As part of the unified highlighting architecture (#7788), we need a simple, environment-agnostic utility to add line number markup to HTML generated by highlight.js. This utility must work in both the browser and Node.js environments.
The current browser-based plugin is not compatible with Node.js as it relies on the DOM.
Plan
- Create a new utility , following the pattern of .
- The file will be located at .
- It will be a plain JavaScript object (not a class) wrapped with .
- It will provide a method that takes an HTML string (from ) and returns a new HTML string with a table structure for line numbers.
- The implementation will be based on the Node.js-compatible version discussed in this GitHub issue, but will have no external dependencies (like lodash).
- The generated HTML structure should be compatible with the existing SCSS for line numbers.
SCSS
.hljs-ln {
border-collapse: collapse;
td {
padding: 0;
}
td.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;
border-right: 1px solid #717171;
vertical-align: top;
padding-right: 5px;
}
td.hljs-ln-code {
padding-left: 10px;
}
}
.hljs-ln-n:before {
content: attr(data-line-number)
}
As part of the unified highlighting architecture (#7788), we need a simple, environment-agnostic utility to add line number markup to HTML generated by highlight.js. This utility must work in both the browser and Node.js environments.
The current browser-based plugin is not compatible with Node.js as it relies on the DOM.
Plan
SCSS
// highlight-js line numbers styles .hljs-ln { border-collapse: collapse; td { padding: 0; } /* for block of numbers */ td.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; border-right: 1px solid #717171; vertical-align: top; padding-right: 5px; } /* for block of code */ td.hljs-ln-code { padding-left: 10px; } } .hljs-ln-n:before { content: attr(data-line-number) }