Refactor

.factory/LICENSE.txt

@@ -0,0 +1,30 @@
+BSD 3-Clause License
+
+Copyright (c) 2006, Ivan Sagalaev.
+Copyright (c) %(year), Taufik Nurrohman
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

.factory/index.html.pug

@@ -0,0 +1,62 @@
+html
+  head
+    meta(content='width=device-width' name='viewport')
+    meta(charset='utf-8')
+    title Line Number Plugin for Highlight.js
+    link(href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css' rel='stylesheet')
+  body
+    header
+      h1 Line Number Plugin for #[a(href='https://highlightjs.org' rel='nofollow' target='_blank') Highlight.js]
+      p Works for all themes. No configuration needed. Number and border color will inherit to your theme color.
+    main
+      h2 CSS
+      pre: code.hljs.language-css
+        | * {
+        |   box-sizing: border-box;
+        |   color: inherit;
+        |   font: inherit;
+        |   margin: 0;
+        |   padding: 0;
+        | }
+        |
+        | :root {
+        |   background: #fff;
+        |   color: #000;
+        |   font: normal normal 16px/1.4 sans-serif;
+        | }
+        |
+        | body {
+        |   padding: 2em;
+        | }
+        |
+        | #main {
+        |   margin: 0 auto;
+        |   max-width: 600px;
+        | }
+      h2 HTML
+      pre: code.hljs.language-html
+        | <main id="main">
+        |   <p>
+        |     Loading…
+        |   </p>
+        | </main>
+      h2 JavaScript
+      pre: code.hljs.language-js
+        | let controller = new AbortController;
+        |
+        | fetch('https://example.com/rest/index.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;
+        | });
+    script(src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js')
+    script(src='index.min.js')
+    script
+      | hljs.highlightAll();

.factory/index.js.mjs

@@ -0,0 +1,53 @@
+import {getName, getParent, getStyle, setClass, setElement, setHTML, setStyles, W} from '@taufik-nurrohman/document';
+import {isDefined} from '@taufik-nurrohman/is';
+
+function getColorFrom(node) {
+    let color = getStyle(node, 'color') || "", c;
+    // <https://www.regular-expressions.info/numericranges.html>
+    if (c = color.match(/^rgba\s*\(\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[, ]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[, ]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[, ]\s*([01]|0?\.\d+)\s*\)$/i)) {
+        return [+c[1], +c[2], +c[3], +c[4]];
+    }
+    if (c = color.match(/^rgb\s*\(\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[, ]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*[, ]\s*([01]?[0-9]?[0-9]|2[0-4][0-9]|25[0-5])\s*\)$/i)) {
+        return [+c[1], +c[2], +c[3], 1];
+    }
+    return [0, 0, 0, 1];
+}
+
+const LineNumberPlugin = {
+    'after:highlightElement': function ({el, result, text}) {
+        let theCode = el,
+            theCodeLines = setElement(getName(el)),
+            theCodeNumbers = [],
+            theCodeParent = getParent(el),
+            theCodeParentIsValid = theCodeParent && 'pre' === getName(theCodeParent);
+        if (theCodeParentIsValid) {
+            for (let i = 0, j = text.split(/\n/).length; i < j; ++i) {
+                theCodeNumbers.push('<span>' + (i + 1) + '</span>');
+            }
+            theCodeParent.insertBefore(theCodeLines, theCode);
+            setStyles(theCode, {
+                'flex': '1'
+            });
+            setStyles(theCodeParent, {
+                'direction': 'ltr',
+                'display': 'flex'
+            });
+            setHTML(theCodeLines, theCodeNumbers.join('\n'));
+            setClass(theCodeLines, 'hljs'); // Inherit `background` and `padding` value(s) from the style sheet
+            let [r, g, b, a] = getColorFrom(theCodeLines);
+            setStyles(theCodeLines, {
+                'border-right': '2px solid rgba(' + r + ',' + g + ',' + b + ',' + (a / 10) + ')',
+                'text-align': 'right',
+                'user-select': 'none' // Disable selection on number(s)
+            });
+        }
+        return {el, result, text};
+    }
+}
+
+// Is a web browser
+if (isDefined(W) && isDefined(W.hljs)) {
+    W.hljs.addPlugin(LineNumberPlugin);
+}
+
+export default LineNumberPlugin;

.gitattributes

@@ -0,0 +1,7 @@
+* linguist-vendored
+*.js linguist-vendored=false
+.factory export-ignore
+.gitattributes export-ignore
+.github export-ignore
+.gitignore export-ignore
+README.md export-ignore

.github/workflows/npm.yml

@@ -0,0 +1,16 @@
+name: 'Publish to NPM'
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: 'actions/checkout@v1'
+      - uses: 'actions/setup-node@v1'
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: 'npm publish --access=public'
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

LICENSE

@@ -1,7 +1,7 @@
 BSD 3-Clause License
 
 Copyright (c) 2006, Ivan Sagalaev.
-Copyright (c) 2020, Taufik Nurrohman
+Copyright (c) 2024, Taufik Nurrohman
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without
@@ -27,4 +27,4 @@ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
 SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
 CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -8,31 +8,47 @@ Line Number Plugin for [Highlight.js](https://github.com/highlightjs/highlight.j
 Usage
 -----
 
-### Browsers
+### Browser
 
-~~~ .html
+~~~ html
 <script src="highlight.min.js"></script>
-<script src="highlight.ln.min.js"></script>
+<script src="highlight.ln.js/index.min.js"></script>
 <script>
-hljs.initHighlighting();
+  hljs.highlightAll();
 </script>
 ~~~
 
-### ES6 Modules (TODO)
+### Node.js
 
-~~~ .js
+~~~ js
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
 
-import {highlightWithLineNumbers} from 'highlight.ln.js';
+import LineNumberPlugin from '@taufik-nurrohman/highlight.ln.js';
+
+hljs.addPlugin(LineNumberPlugin);
+
+hljs.registerLanguage('css', css);
+
+hljs.highlightAll();
+~~~
+
+### CommonJS
+
+~~~ js
+const hljs = require('highlight.js/lib/core');
+const css = require('highlight.js/lib/languages/css');
+
+const LineNumberPlugin = require('@taufik-nurrohman/highlight.ln.js').default;
+
+hljs.addPlugin(LineNumberPlugin);
 
 hljs.registerLanguage('css', css);
 
-const highlighted = hljs.highlight('css', '#foo { bar: baz; }');
-const highlightedMarkup = highlightWithLineNumbers(highlighted);
+hljs.highlightAll();
 ~~~
 
 License
 -------
 
-BSD
+BSD