LearnNewsExamplesServices
Frontmatter
id7789
titleCreate a utility for highlight.js line numbers
stateClosed
labels
enhancementai
assigneestobiu
createdAtNov 18, 2025, 10:44 AM
updatedAtNov 18, 2025, 3:15 PM
githubUrlhttps://github.com/neomjs/neo/issues/7789
authortobiu
commentsCount0
parentIssue7791
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtNov 18, 2025, 3:15 PM

Create a utility for highlight.js line numbers

Closed v11.5.0 enhancementai
tobiu
tobiu commented on Nov 18, 2025, 10:44 AM

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

  1. Create a new utility , following the pattern of .
  2. The file will be located at .
  3. It will be a plain JavaScript object (not a class) wrapped with .
  4. It will provide a method that takes an HTML string (from ) and returns a new HTML string with a table structure for line numbers.
  5. The implementation will be based on the Node.js-compatible version discussed in this GitHub issue, but will have no external dependencies (like lodash).
  6. The generated HTML structure should be compatible with the existing SCSS for line numbers.

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)
}
tobiu added the enhancement label on Nov 18, 2025, 10:44 AM
tobiu added the ai label on Nov 18, 2025, 10:44 AM
tobiu assigned to @tobiu on Nov 18, 2025, 10:45 AM
tobiu cross-referenced by #7791 on Nov 18, 2025, 11:13 AM
tobiu added parent issue #7791 on Nov 18, 2025, 11:13 AM
tobiu cross-referenced by #7788 on Nov 18, 2025, 11:16 AM
tobiu referenced in commit 45b20ac - "Create a utility for highlight.js line numbers #7789" on Nov 18, 2025, 2:12 PM
tobiu referenced in commit 57ea8d9 - "#7789 theming" on Nov 18, 2025, 2:54 PM
tobiu referenced in commit fee73f6 - "#7789 load theme files" on Nov 18, 2025, 3:02 PM
tobiu closed this issue on Nov 18, 2025, 3:16 PM