Line Number Plugin for Highlight.js

Works for all themes. No configuration needed. Number and border color will inherit to your theme color.

CSS

* {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

html {
  background: #fff;
  font: normal normal 16px/1.4 sans-serif;
  color: #000;
}

body {
  padding: 2em;
}

#main {
  max-width: 600px;
  margin: 0 auto;
}

HTML

<main id="main">
  <p>Loading&hellip;</p>
</main>

JavaScript

let controller = new AbortController;
fetch('https://example.com/api/list.json', {
    signal: controller.signal
}).then(response => response.json()).then(json => {
    let out = "";
    for (let v of json) {
        out += '<article>';
        out += '<h2>' + v.title + '</h2>';
        out += '<p>' + v.description + '</p>';
        out += '</article>';
    }
    document.querySelector('#main').innerHTML = out;
});