@@ -6,41 +6,48 @@ Highlight.js line numbers plugin.
66
77## Install
88
9- #### Bower
9+ ### Bower
10+
1011```
1112bower install highlightjs-line-numbers.js
1213```
1314
14- #### Npm
15+ ### Npm
16+
1517```
1618npm install highlightjs-line-numbers.js
1719```
1820
1921#### Getting the library from CDN
22+
2023``` html
2124<script src =" //cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js" ></script >
2225```
26+
2327``` html
2428<script src =" //cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7.0/dist/highlightjs-line-numbers.min.js" ></script >
2529```
2630
2731## Usage
2832
2933Download plugin and include file after highlight.js:
34+
3035``` html
3136<script src =" path/to/highlight.min.js" ></script >
3237
3338<script src =" path/to/highlightjs-line-numbers.min.js" ></script >
3439```
3540
3641Initialize plugin after highlight.js:
42+
3743``` js
3844hljs .initHighlightingOnLoad ();
3945
4046hljs .initLineNumbersOnLoad ();
4147```
4248
4349Here’s an equivalent way to calling ` initLineNumbersOnLoad ` using jQuery:
50+
4451``` js
4552$ (document ).ready (function () {
4653 $ (' code.hljs' ).each (function (i , block ) {
@@ -50,6 +57,7 @@ $(document).ready(function() {
5057```
5158
5259If your needs cool style, add styles by taste:
60+
5361``` css
5462/* for block of numbers */
5563.hljs-ln-numbers {
@@ -79,11 +87,12 @@ If your needs cool style, add styles by taste:
7987
8088After version 2.1 plugin has optional parameter ` options ` - for custom setup.
8189
82- name | type | default value | description
83- -----------|---------|---------------|-----------------------
84- singleLine | boolean | false | enable plugin for code block with one line
90+ version | name | type | default value | description
91+ --------|------------|---------|---------------|-----------------------
92+ v2.1 | singleLine | boolean | false | enable plugin for code block with one line
93+ v2.8 | startFrom | int | 1 | [ Start numbering from a custom value] ( startFrom )
8594
86- #### Examples of using
95+ ### Examples of using
8796
8897``` js
8998hljs .initLineNumbersOnLoad ({
@@ -95,32 +104,39 @@ hljs.initLineNumbersOnLoad({
95104hljs .lineNumbersBlock (myCodeBlock, myOptions);
96105```
97106
98- ## Skipping some blocks
99-
100- (Applies to ` hljs.initLineNumbersOnLoad() ` initialization only.)
107+ ``` js
108+ hljs . lineNumbersValue (myCodeBlock, myOptions);
109+ ```
101110
102- If you want to skip some of your ` code ` blocks (to leave them unnumbered), you can mark
103- them with ` .hlnoln ` class.
111+ ### startFrom
104112
105- ## Start numbering from a custom value
113+ If you want numbering to start from some other value than ` 1 ` , you can specify a _ numbering offset _ , in one of the following ways:
106114
107- If you want numbering to start from some other value than ` 1 ` , you can specify a
108- _ numbering offset_ , in one of the following ways:
115+ - Specifying desired offset in ` hljs.lineNumbersBlock() ` call, as in:
109116
110- * Specifying desired offset in ` hljs.lineNumbersBlock() ` call, as in:
111117``` js
112- hljs .lineNumbersBlock (myCodeBlock, myOptions, 10 ); // Numbering will start from 11
118+ hljs .lineNumbersBlock (myCodeBlock, {
119+ startFrom: 10
120+ });
113121```
114- * Specifying the desired offset in ` data-ln-offset ` attribute of ` code ` element, as in:
122+
123+ - Specifying the desired offset in ` data-ln-start-from ` attribute of ` code ` element, as in:
124+
115125``` html
116126<pre >
117- <code data-ln-offset =" 10" >
118- ...
119- </code >
127+ <code data-ln-start-from =" 10" >
128+ ...
129+ </code >
120130</pre >
121131```
122132
123- In both cases numbering offset will be ` 10 ` , meaning that the numbering will start from ` 11 ` .
133+ In both cases numbering offset will be ` 10 ` , meaning that the numbering will start from ` 10 ` .
134+
135+ ## Skipping some blocks
136+
137+ (Applies to ` hljs.initLineNumbersOnLoad() ` initialization only.)
138+
139+ If you want to skip some of your ` code ` blocks (to leave them unnumbered), you can mark them with ` .nohljs-ln ` class.
124140
125141## CSS selectors
126142
@@ -137,4 +153,4 @@ CSS selector | description
137153` .hljs-ln-numbers[data-line-number="i"] ` | Select the ith line number, excluding the line of code
138154` .hljs-ln-code[data-line-number="i"] ` | Select the ith line of code, excluding the line number
139155---
140- © ; 2018 Yauheni Pakala | MIT License
156+ © ; 2020 Yauheni Pakala and [ Community ] ( https://github.com/wcoder/highlightjs-line-numbers.js/graphs/contributors ) | MIT License
0 commit comments