@@ -6,41 +6,48 @@ Highlight.js line numbers plugin.
6
6
7
7
## Install
8
8
9
- #### Bower
9
+ ### Bower
10
+
10
11
```
11
12
bower install highlightjs-line-numbers.js
12
13
```
13
14
14
- #### Npm
15
+ ### Npm
16
+
15
17
```
16
18
npm install highlightjs-line-numbers.js
17
19
```
18
20
19
21
#### Getting the library from CDN
22
+
20
23
``` html
21
- <script src =" //cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7 .0/highlightjs-line-numbers.min.js" ></script >
24
+ <script src =" //cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8 .0/highlightjs-line-numbers.min.js" ></script >
22
25
```
26
+
23
27
``` html
24
- <script src =" //cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7 .0/dist/highlightjs-line-numbers.min.js" ></script >
28
+ <script src =" //cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8 .0/dist/highlightjs-line-numbers.min.js" ></script >
25
29
```
26
30
27
31
## Usage
28
32
29
33
Download plugin and include file after highlight.js:
34
+
30
35
``` html
31
36
<script src =" path/to/highlight.min.js" ></script >
32
37
33
38
<script src =" path/to/highlightjs-line-numbers.min.js" ></script >
34
39
```
35
40
36
41
Initialize plugin after highlight.js:
42
+
37
43
``` js
38
44
hljs .initHighlightingOnLoad ();
39
45
40
46
hljs .initLineNumbersOnLoad ();
41
47
```
42
48
43
49
Here’s an equivalent way to calling ` initLineNumbersOnLoad ` using jQuery:
50
+
44
51
``` js
45
52
$ (document ).ready (function () {
46
53
$ (' code.hljs' ).each (function (i , block ) {
@@ -50,6 +57,7 @@ $(document).ready(function() {
50
57
```
51
58
52
59
If your needs cool style, add styles by taste:
60
+
53
61
``` css
54
62
/* for block of numbers */
55
63
.hljs-ln-numbers {
@@ -79,11 +87,12 @@ If your needs cool style, add styles by taste:
79
87
80
88
After version 2.1 plugin has optional parameter ` options ` - for custom setup.
81
89
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 )
85
94
86
- #### Examples of using
95
+ ### Examples of using
87
96
88
97
``` js
89
98
hljs .initLineNumbersOnLoad ({
@@ -95,6 +104,40 @@ hljs.initLineNumbersOnLoad({
95
104
hljs .lineNumbersBlock (myCodeBlock, myOptions);
96
105
```
97
106
107
+ ``` js
108
+ hljs .lineNumbersValue (myCodeBlock, myOptions);
109
+ ```
110
+
111
+ ### startFrom
112
+
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:
114
+
115
+ - Specifying desired offset in ` hljs.lineNumbersBlock() ` call, as in:
116
+
117
+ ``` js
118
+ hljs .lineNumbersBlock (myCodeBlock, {
119
+ startFrom: 10
120
+ });
121
+ ```
122
+
123
+ - Specifying the desired offset in ` data-ln-start-from ` attribute of ` code ` element, as in:
124
+
125
+ ``` html
126
+ <pre >
127
+ <code data-ln-start-from =" 10" >
128
+ ...
129
+ </code >
130
+ </pre >
131
+ ```
132
+
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 ` .nohljsln ` class.
140
+
98
141
## CSS selectors
99
142
100
143
You may need to select some lines of code after rendering. For instance, you may want
@@ -110,4 +153,4 @@ CSS selector | description
110
153
` .hljs-ln-numbers[data-line-number="i"] ` | Select the ith line number, excluding the line of code
111
154
` .hljs-ln-code[data-line-number="i"] ` | Select the ith line of code, excluding the line number
112
155
---
113
- © ; 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