Add line numbers to code blocks à la HighlightJS.
The following styles must be injected into the page for line numbers to be visible:
.hljs-ln {
border-collapse: collapse;
}
.hljs-ln-n:before {
content: attr(data-line-number);
}
Line numbers may further be styled by targeting the hljs-ln-numbers
class.
By default, only <code>
elements wrapped by <pre>
tags will be modified. You can override the target selector by passing a selector
option in the plugin's config object, e.g. { selector: 'code' }
(This will add line numbers to all code elements, including in-line ones).
If you're already using metalsmith-dom-transform, you can save a little bit of overhead by accessing the line-numbering transform directly:
const domTransform = require('metalsmith-dom-transform');
const codeLineNumbersTransform = require('metalsmith-code-line-numbers/transform');
metalsmith.use(domTransform({
transforms: [
codeLineNumbersTransform(options),
// Other transforms
]
}));