---
id: 7789
title: Create a utility for highlight.js line numbers
state: CLOSED
labels:
  - enhancement
  - ai
assignees:
  - tobiu
createdAt: '2025-11-18T09:44:35Z'
updatedAt: '2025-11-18T14:15:59Z'
githubUrl: 'https://github.com/neomjs/neo/issues/7789'
author: tobiu
commentsCount: 0
parentIssue: 7791
subIssues: []
subIssuesCompleted: 0
subIssuesTotal: 0
blockedBy: []
blocking: []
closedAt: '2025-11-18T14:15:59Z'
---
# Create a utility for highlight.js line numbers

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](https://github.com/yauhenipakala/highlightjs-line-numbers.js/issues/19#issuecomment-335563484), but will have no external dependencies (like lodash).
6.  The generated HTML structure should be compatible with the existing SCSS for line numbers.

## SCSS
```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)
}
```

## Timeline

- 2025-11-18T09:44:36Z @tobiu added the `enhancement` label
- 2025-11-18T09:44:36Z @tobiu added the `ai` label
- 2025-11-18T09:45:15Z @tobiu assigned to @tobiu
- 2025-11-18T10:13:13Z @tobiu cross-referenced by #7791
- 2025-11-18T10:13:37Z @tobiu added parent issue #7791
- 2025-11-18T10:16:31Z @tobiu cross-referenced by #7788
- 2025-11-18T13:12:17Z @tobiu referenced in commit `45b20ac` - "Create a utility for highlight.js line numbers #7789"
- 2025-11-18T13:54:18Z @tobiu referenced in commit `57ea8d9` - "#7789 theming"
- 2025-11-18T14:02:58Z @tobiu referenced in commit `fee73f6` - "#7789 load theme files"
- 2025-11-18T14:16:00Z @tobiu closed this issue

