taufik-nurrohman / highlight.ln.js

Line number plugin for Highlight.js to show line numbers on every code block automatically.

Line Number Plugin for Highlight.js

Demo

Usage

Browsers

<script src="highlight.min.js"></script>
<script src="highlight.ln.min.js"></script>
<script>
hljs.initHighlighting();
</script>

ES6 Modules (TODO)

import hljs from 'highlight.js/lib/core';
import css from 'highlight.js/lib/languages/css';

import {highlightWithLineNumbers} from 'highlight.ln.js';

hljs.registerLanguage('css', css);

const highlighted = hljs.highlight('css', '#foo { bar: baz; }');
const highlightedMarkup = highlightWithLineNumbers(highlighted);

License

BSD

highlight.ln.js's Issues

`after:highlightBlock` is Deprecated

TODO: Rename to after:highlightElement.

TODO: Add Line Number Configuration via HTML Attributes

What I am thinking:

• data-ln-active → Determine line or range of line to be highlighted.
• data-ln-hide → Hide line number only for this block.
• data-ln-start → Determine the start number (default to 1).

Please customize the line number color. Do not use the same color as the text

lines.className = 'hljs'; // Inherit backgroundandpadding from the style sheet

For example, the line number is customized to white

after repair :

TODO: Inherit Border Color to Text Color

That way we can automaticize the theme border color based on the parent theme style (either dark or light).

How to achieve this:

• Take the block color using getComputedStyle().
• Normalize the color so that we can take the R, G and B part of the color.
• Set border color using the data as RGBA color with a slight opacity.

Markdown for jekyll syntax is very good

Current environment:

1. highlight.js
2. jekyll
3. bootstrap
4. highlight.ln.js
   The four of them used together without conflict

Thanks for developing such a useful plug-in, how to adapt the "Markdown" syntax, thank you very much!
Expected effect: delete unnecessary line breaks at the end of the code

---

Effect after repair：