3 Star 1 Fork 1

Gitee 极速下载 / highlightjs-line-numbers

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
此仓库是为了提升国内下载速度的镜像仓库,每日同步一次。 原始仓库: https://github.com/wcoder/highlightjs-line-numbers.js
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

highlightjs-line-numbers.js npm npm

Highlight.js line numbers plugin.

DEMO | SСREENSHOTS

Install

Bower

bower install highlightjs-line-numbers.js

Npm

npm install highlightjs-line-numbers.js

Getting the library from CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

highlightjs-line-numbers.js 2.8.0 is known to work with highlight.js 11.3.1.

Usage

Download plugin and include file after highlight.js:

<script src="path/to/highlight.min.js"></script>

<script src="path/to/highlightjs-line-numbers.min.js"></script>

Initialize plugin after highlight.js:

hljs.highlightAll();

hljs.initLineNumbersOnLoad();

Here’s an equivalent way to calling initLineNumbersOnLoad using jQuery:

$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});

If your needs cool style, add styles by taste:

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 1px solid #CCC;
    vertical-align: top;
    padding-right: 5px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 10px;
}

Options

After version 2.1 plugin has optional parameter options - for custom setup.

version name type default value description
v2.1 singleLine boolean false enable plugin for code block with one line
v2.8 startFrom int 1 Start numbering from a custom value

Examples of using

hljs.initLineNumbersOnLoad({
    singleLine: true
});
hljs.lineNumbersBlock(myCodeBlock, myOptions);
hljs.lineNumbersValue(myCodeBlock, myOptions);

startFrom

If you want numbering to start from some other value than 1, you can specify a numbering offset, in one of the following ways:

  • Specifying desired offset in hljs.lineNumbersBlock() call, as in:
hljs.lineNumbersBlock(myCodeBlock, {
    startFrom: 10
});
  • Specifying the desired offset in data-ln-start-from attribute of code element, as in:
<pre>
    <code data-ln-start-from="10">
    ...
    </code>
</pre>

In both cases numbering offset will be 10, meaning that the numbering will start from 10.

Skipping some blocks

(Applies to hljs.initLineNumbersOnLoad() initialization only.)

If you want to skip some of your code blocks (to leave them unnumbered), you can mark them with .nohljsln class.

CSS selectors

You may need to select some lines of code after rendering. For instance, you may want to highlight a range of lines, selected by users, by changing their background color. The CSS selectors below can be used to perform these selection operations.

CSS selector description
.hljs-ln-line Select all lines, including line numbers
.hljs-ln-numbers Select all line numbers, excluding lines of code
.hljs-ln-code Select all lines of code, excluding line numbers
.hljs-ln-line[data-line-number="i"] Select the ith line, including line number
.hljs-ln-numbers[data-line-number="i"] Select the ith line number, excluding the line of code
.hljs-ln-code[data-line-number="i"] Select the ith line of code, excluding the line number

More plugins


© 2023 Yauheni Pakala and Community | MIT License

The MIT License (MIT) Copyright (c) 2017 Yauheni Pakala Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

highlightjs-line-numbers.js 是 highlight.js 的一个插件,用来显示代码行号,如下图所示: expand collapse
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/mirrors/highlightjs-line-numbers.git
git@gitee.com:mirrors/highlightjs-line-numbers.git
mirrors
highlightjs-line-numbers
highlightjs-line-numbers
master

Search