Home / JavaScript / Code highlighting

Line numbering plugin for Highlight.js

highlightjs-line-numbers.js Highlight.js line numbers plugin. DEMO | SСREENSHOTS Install Bower bower install highlightjs-line-numbers.js Npm npm install highlightjs-line-numbers.js
Information
Category: JavaScript / Code highlighting
Watchers: 14
Star: 466
Fork: 121
Last update: Mar 25, 2023
Resource links
https://github.com/isagalaev/highlight.js
https://github.com/wcoder/highlightjs-line-numbers.js

highlightjs-line-numbers.js version

Highlight.js line numbers plugin.

DEMO | SСREENSHOTS

Install

Bower

bower install highlightjs-line-numbers.js

Npm

npm install highlightjs-line-numbers.js

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>

Adding styles:

.hljs-line-numbers {
    text-align: right;
    border-right: 1px solid #ccc;
    color: #999;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Initialize plugin after highlight.js:

hljs.initHighlightingOnLoad();

hljs.initLineNumbersOnLoad();

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

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

© 2015 Yauheni Pakala | MIT License

19 Open More issues
Closed

Removing phpDoc comments

Before image

After image

Version 2.2.0

bug 
opened Mar 5, 2018 by lex111 14
Closed

Fix copy / paste behavior when using Firefox or Edge [DOM based] (#51)

I took some time trying to fix the annoying copy / paste behavior observed when using Firefox or Edge browsers. As explained in issue #51, blank lines are inserted in text editors after each pasted line of code, which is pretty annoying.

Based on my understanding, this is due to different behaviors among browsers when copying text from a multi-column based layout wrapped into a HTML pre element.

After numerous tryouts (notably using CSS tables instead of plain HTML ones), the only solution I found ensuring same copy/paste behavior for all browsers is the following. So instead of wrapping line numbers and code in a single table element, use the following approach instead:

  1. render the lines number in a table with single column
  2. render the lines of code in a div
  3. wrap these in a div and make the table float left
  4. adjust the left margin of the code div once inserted in the dom

With this approach, the annoying copy / paste behavior with Firefox and Edge goes away while obtaining the exact same rendering as before.

The only drawback I see with these changes is that they may break custom user scripts selecting hljs-ln-* element as the html layout has been slightly modified. Nevertheless, I have also improved the way to select line elements and documented it, so custom user scripts will not be difficult to fix.

firefox issue 
opened Feb 6, 2019 by anlambert 12
Closed

Only the first line gets numbered when fetching data from an API and rendering it with highlightjs

Describe the bug I have an application which uses the JavaScript fetch() API to fetch some data and render it on a page.

To Reproduce

<html>
<body>
<!--StartFragment-->

Line wrap
--
  | <!DOCTYPE html>
  |  
  | <html>
  |  
  | <head>
  | <title>Paste.is</title>
  | <meta name="viewport" content="width=device-width, initial-scale=1.0">
  |  
  | <link rel="stylesheet" href="/global.css" crossorigin="anonymous">
  | <link rel="stylesheet" href="/lib/bootstrap.min.css" crossorigin="anonymous">
  | <link rel="stylesheet" href="/lib/fontawesome-free-5.15.3-web/css/all.css" crossorigin="anonymous">
  |  
  | <script src="/lib/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  | <script src="/lib/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  | <script src="/lib/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
  | <script src="/lib/crypto-js.min.js" integrity="sha384-0DrKBsfUuJe/vqjia1HviapRn4mR1BYfCpQ9gT7qjSKu8TrzTe2tlbK3cI9i9EwV" crossorigin="anonymous"></script>
  | <script src="/lib/highlight.min.js"></script>
  | <script src="/lib/highlightjs-line-numbers.min.js"></script>
  |  
  | <script src="/paste.js?v=1620658068"></script>
  | </head>
  |  
  | <body>
  |  
  | <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  | <a class="navbar-brand" href="/">Paste.is</a>
  | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="true" aria-label="Toggle navigation">
  | <span class="navbar-toggler-icon"></span>
  | </button>
  | <div class="navbar-collapse" id="navbarText">
  | <ul class="navbar-nav mr-auto">
  | <li class="nav-item active">
  | <a class="nav-link" href="/"><span class="fas fa-home"></span> Home <span class="sr-only">(current)</span></a>
  | </li>
  | <li class="nav-item active">
  | <a class="nav-link" href="mailto:[email protected]"><span class="fas fa-exclamation-triangle"></span> Report Abuse <span class="sr-only">(current)</span></a>
  | </li>
  | </ul>
  | </div>
  | </nav>
  | <div class="alert alert-primary">
  | <strong>Introducing Encrypted Pastes:</strong> Encrypted Pastes are now in public beta there may still be bugs but we hope you enjoy the feature 😎.
  | </div>
  |  
  | <div class="card">
  | <div class="card-body">
  | <h5 class="card-title">View Paste</h5>
  | <pre><code id="pasteContent"></code></pre>
  | <hr />
  | <h5 class="card-title">Additional Information</h5>
  | <ul>
  | <li><strong>UUID:</strong> <span id="uuid"></span></li>
  | <li><strong>Published On:</strong> <span id="pub"></span></li>
  | <li><strong>Expires On:</strong> <span id="exp"></span></li>
  | <li><strong>Will Self Destruct:</strong> <span id="will_self_destruct"></span></li>
  | <li><strong>Raw:</strong> <span id="raw_uuid_url"></span></li>
  | </ul>
  | </div>
  | </div>
  |  
  | <div style="text-align: center">
  | <hr /><i>Copyright 2021 \| Developed with 💜 by <a href="https://hacked.is/">Hacked LLC</a></i>
  | </div>
  |  
  | </body>
  |  
  | </html>

<!--EndFragment-->
</body>
</html>

// Set page title
document.getElementsByTagName("title")
    .item(0)
    .innerText = `${document.getElementsByTagName("title")
    .item(0)
    .innerText} | View Paste`

// Get UUID
let uuid = window.location.href.split('/p/v/')[1];

// Get Key if exists
let isEncrypted = false;
if (window.location.href.split('#')[1]) {
    isEncrypted = true;
}

// Get Paste JSON
    fetch('/api/v1/paste?dataType=json&uuid='+uuid)
        .then(resp => resp.text())
        .then((json) => {
            document.getElementById("will_self_destruct").innerText = JSON.parse(json)['will_self_destruct'];
            document.getElementById("pub").innerText = JSON.parse(json)['published_on'];
            document.getElementById("exp").innerText = JSON.parse(json)['expired_on'];
            document.getElementById("raw_uuid_url").innerHTML = "<a href=\"" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid + "\">" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid + "</a>";
            document.getElementById("uuid").innerText = uuid;
        })
        .then(() => {
            // Get Paste Text
            fetch('/api/v1/paste?dataType=text&uuid='+uuid)
                .then(resp => resp.text())
                .then((text) => {
                    if (isEncrypted) {
                        let bytes  = CryptoJS.AES.decrypt(atob(text), atob(window.location.href.split('#')[1]));
                        let originalText = bytes.toString(CryptoJS.enc.Utf8);
                        document.getElementById("pasteContent").innerText = originalText;
                        document.getElementById("raw_uuid_url").innerHTML = "<a href=\"" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid.split("#")[0] + "\">" + window.location.href.split('/p/v/')[0] + "/api/v1/paste?dataType=text&uuid=" + uuid.split("#")[0] + "</a>";
                        document.getElementById("uuid").innerText = uuid.split("#")[0];
                        return originalText;
                    } else {
                        document.getElementById("pasteContent").innerText = text;
                        return text;
                    }
                })
                .then((text) => {
                    hljs.highlightAll();
                    hljs.initLineNumbersOnLoad({
                        singleLine: true,
                    });
                })
        })

Expected behavior I expect the content to be fetched, decrypted, hightlighted with highlightjs (this works great due to the usage of JavaScript promises) and finally for highlightjs line numbers to add a number to each line.

Screenshots image

Additional context Example URL https://paste.is/p/v/264ce2ae-c9c0-40f9-9863-61f1b0c3fd1b#NXZNeWVpM3lEV2xpNXZENldOOE5qaENUYlE5eHpoajJYTUJUblViQlZXWHY2dTJTYTFrWmVKeXZON0NHZ2haUQ==

question 
opened May 10, 2021 by nathanielsuchy 10
Closed

Got wrong line numbers

Check this: http://preview.daimaduan.com/paste/f4612fa76b

line number shows 16, but actual line number is 19. I understand it's because highlightjs auto wrap words and lines, but how to make them match?

bug 
opened Oct 28, 2015 by darth30joker 10
Closed

Copying not correctly working (spaces between lines)

If I copy code, it puts white spaces between lines

bug firefox issue 
opened Oct 11, 2018 by Snakzi 9
Closed

Fix multiline comments highlighting in c++

I've corrected handling multiline comments in c++. Every tag with a multiline comment is changed into a multiple tags with only one line.

opened Nov 28, 2017 by rafalk342 6
Open

version 2.8.0 chrome console warning 

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/typescript.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/xml.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js" />
image
  • Using version 2.7.0 eliminates the warning
question need more info 
opened Dec 20, 2022 by maor-benami 1
Open

Option to use in nodejs environment (without window)

highlight.js can be used on server side to change code tags

line-numbers plugin depends on window

https://stackoverflow.com/questions/48843806/how-to-use-npm-marked-with-highlightjs

enhancement help wanted 
opened Dec 20, 2022 by maor-benami 0
Open

Yaml highlights have extra space

Describe the bug When using the line-number-plugin yaml highlights, multilines have an extra space without line-numbers all aligned to the left edge

To Reproduce https://codepen.io/Keda37/pen/ExRddRR - on/off hljs.initLineNumbersOnLoad();

Screenshots Снимок экрана 2022-12-02 в 13 08 59 image

bug 
opened Dec 2, 2022 by amshkv 1
Open

Trim empty first lines of a code block

Basically, when I use a code snippet like below, that I've likely pasted in from another document:

<pre>
<code>
fn main() {
    println!("Hello World"!);
}
</code>
</pre>

Line 1 (using hljs.initLineNumbersOnLoad();) will always be blank, as it registers the line break after the <code> tag as a new line.

It's easy enough to fix, it's just a little annoying.

Describe the solution you'd like Optionally remove the first line from the code block if it's empty.

Describe alternatives you've considered Technically you can do this:

<pre>
<code>fn main() {
    println!("Hello World"!);
}
</code>
</pre>

But it looks a little gross to me idk.

Not a high priority by any means, but I think it would feel nice :)

opened Feb 27, 2022 by PhalanxHead 1
Open

Highlight result of line numbers rendering like highlight js lib

Highlight.js lib gives you a stream with the option to react when highlighting is finished. It would be nice to have same feature with the line numbers lib. Because when HighlightResult is coming, line numbers still not finished at this moment and it is not possible to react correctly e.g. to use css selectors to jump to some line or to highlight background. Css selecteros like (.hljs-ln-line[data-line-number="55"]) can be used only when rendering is fully finished, but there is no event to catch this moment.

enhancement 
opened Apr 27, 2021 by Smascer 0
Open

`highlight-line-numbers` causing commented code on uncommented code

Describe the bug highlight-line-numbers causing commented code on uncommented code

To Reproduce Steps to reproduce the behavior:

  1. I'm developing nextjs app
  2. importing highlight.js lazy loading using NodeJS import()
  3. importing highlightjs-line-numbers.js lazy loading using NodeJS
  4. calling hljs.highlightBlock then hljs.lineNumbersBlock
  5. first render is no problem
  6. if the component did re-render, which also calls again hljs.highlightBlock and hljs.lineNumbersBlock it broke the highlighting

** Problem **

  • code that is not a commented recognized as comment
  • happens on any code language

Expected behavior highlight-line-numbers should not modify highlighting done by highlight.js for the subsequent calls

Screenshots Screen Shot 2021-02-19 at 08 36 20

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Chrome
  • Version: 88.0.4324.150 (Official Build) (x86_64)

Additional context I know I can prevent re-calling the method by tracking if it has been called or not. But I also have cases when this is not possible.

opened Feb 18, 2021 by azamuddin 0

v2.8.0(Jan 2, 2022)

What's Changed

  • Implementing line number offset. by @peske in https://github.com/wcoder/highlightjs-line-numbers.js/pull/65
  • New release 2.8 by @wcoder in https://github.com/wcoder/highlightjs-line-numbers.js/pull/76

New Contributors

  • @peske made their first contribution in https://github.com/wcoder/highlightjs-line-numbers.js/pull/65

Full Changelog: https://github.com/wcoder/highlightjs-line-numbers.js/compare/v2.7.0...v2.8.0

Contents

    Astray-git vue-highlight-words react-highlight-wordsvue-highlight-words - Vue component to highlight words within a larger body of text. Ported from react-highlight-words
    TonPC64 vue-highlight-text - Vue component for highlight multiple instances of a word
    substack highlight javascript syntax with html
    substack highlight bash syntax with html
    cereda A very simple package that provides John Cleese's iconic silly walk routine as page numbering style.
    clauderic Find and highlight words within a larger body of text 🖍
    bdlukaa Text and TextField highlighted with rounded corners
    taufik-nurrohman Line number plugin for Highlight.js to show line numbers on every code block automatically.
    AlbertLucianto vue-text-highlight - Text highlighter library for Vue.js 💄
    substack highlight source code syntax with html
    Badranh Beautiful Android Syntax View with line counter it will automatically highlight the code,you can design your own IDE using this view
    XuJinNet A key words highlight plugin for jQuery.
    folke 🌈 Plugin that creates missing LSP diagnostics highlight groups for color schemes that don't yet support the Neovim 0.5 builtin LSP client.
    paoloantinori A command line tool to highlight terms
    xhico Download any public Playlist from Youtube
    chr4 Improved nginx vim plugin (incl. syntax highlighting)
    hyy920109 HighlightPro is a highlight library for android and also it can be a simple popup window library for android
    vuejs 💡 Sublime Text syntax highlighting for single-file Vue components
    jhermann :construction: [BETA, not feature complete] A Markdown lexer for Pygments to highlight Markdown code snippets.
    andydevacc MentionEditText adds some useful features for mention string(@xxxx), such as highlight, intelligent deletion, intelligent selection and '@' input detection, etc.
    amlcurran [Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly
    Share this repo

    Related Repos


    Code highlighting
    5
    A tool for people who don't like Nim's indentation-based syntax
    xigoi nimdenter Do you hate Nim because it's indentation-based? No worries! This tool will allow you to write Nim code with braces and automatically fill in
     
    Code highlighting
    7
    React component library for displaying code samples with syntax highlighting!!
    pranavnt react-code-samples usage example: import {} from 'react-code-samples'; import 'highlight.js/styles/default.css'; // or use another highlight js style
     
    Code highlighting
    3.2k
    Simple syntax highlighting library written in javascript
    ccampbell Rainbow Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (~2.5kb), easy to use, and extendable.
     
    Code highlighting
    4
    a Lua object-orientation framework based around special syntax
    ry00001 classified a Lua object-orientation framework made to be easy to read and write for what? classified is a way to object-orient your Lua code. if you'v
     
    Code highlighting
    113
    Simply beautiful syntax highlighting for your MDX docs
    atomiks MDX Pretty Code A Remark plugin to make the code in your MDX docs simply beautiful. Powered by Shiki. ✅ Perfect VS Code highlighting (use any theme) ✅
     
    Code highlighting
    9.8k
    Lightweight, robust, elegant syntax highlighting.
    PrismJS Prism Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet. You can learn more on prismjs.com
     
    Code highlighting
    59
    Improved C syntax highlighting for vim
    pulkomandy Improved vim syntax highlighting for vim What it is For a very long time I was not quite happy with the syntax highlighting in vim for C code. That wa
     
    Code highlighting
    18
    The word highlighter library for Vue 2.x & Vue 3.x.
    kawamataryo The word highlighter library for Vue 2 and Vue 3
     
    Code highlighting
    137
    VSCode extension to highlight nested code blocks
    leodevbro VSCode extension to highlight nested code blocks
     
    Code highlighting
    14
    Shikijs - A JavaScript Library for Syntax Highlighting with Awesome themes
    arnav-kr Shikijs - A JavaScript Library for Syntax Highlighting on the way with the themes you always wanted.
     
    Code highlighting
    53
    Protect and beautify your shell scripting
    geelen A tool to make invoking a series of shell commands safer & better-looking.
     
    Code highlighting
    19
    Load components initialized through @nuxt/components dyamically.
    blokwise @blokwise/dynamic Read the official docs Installation Add @blokwise/dynamic dependency to your project: yarn add @blokwise/dynamic npm install @blokwi
     
    Code highlighting
    19
    golang's present tool but with code syntax highlighting
    soypat golang's present tool but with code syntax highlighting
     
    Code highlighting
    14
    Adds support for Caddyfile syntax highlighting and automatic formatting.
    matthewpi Caddyfile Support Adds support for Caddyfile syntax highlighting and automatic formatting. This is essentially an updated version of vscode-caddyfile-
     
    Code highlighting
    6.9k
    A javascript text differencing implementation.
    kpdecker jsdiff A javascript text differencing implementation. Based on the algorithm proposed in "An O(ND) Difference Algorithm and its Variations" (Myers, 1986). Installation npm install diff --save API