Add lineNumbers option

lelinhtinh · Aug 18, 2020 · fc15fb9 · fc15fb9
1 parent 0d974ef
commit fc15fb9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/_data/options.yml b/_data/options.yml
@@ -1,3 +1,6 @@
+- key: lineNumbers
+  name: Line numbers
+  checked: false
 - key: _unescape
   name: Unescape
   checked: false

diff --git a/_includes/highlight-js/styles/hljs-line-numbers.css b/_includes/highlight-js/styles/hljs-line-numbers.css
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -10,6 +10,7 @@ $special-disabled-color: #000000;
 
 @import "{{ site.theme }}";
 {% include highlight-js/styles/hljs-theme.css %}
+{% include highlight-js/styles/hljs-line-numbers.css %}
 .hljs{
   background: #030303;
 }

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -89,6 +89,7 @@
     renderRemove = document.getElementById('renderRemove'),
     view = document.getElementById('view'),
     encode = document.getElementsByName('encode'),
+    options,
     none = document.getElementById('none'),
     readable = document.getElementById('readable'),
     form = document.de4js,
@@ -117,6 +118,11 @@
       clear.disabled = true;
       autoBtn.disabled = true;
       disableAll(true);
+
+      options = Array.from(document.querySelectorAll('.de4js-option')).reduce((obj, e) => {
+        obj[e.name] = e.checked;
+        return obj;
+      }, {});
     },
     stopEffect = function () {
       isAuto = false;
@@ -137,7 +143,7 @@
       }, 800);
     },
     externalStyle =
-      '*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}{% include highlight-js/styles/hljs-theme.css %}html,body,.hljs{background:#030303}',
+      '*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all}{% include highlight-js/styles/hljs-theme.css %}{% include highlight-js/styles/hljs-line-numbers.css %}html,body,.hljs{background:#030303}',
     externalUrl,
     externalPreview = function (source) {
       if (externalUrl) URL.revokeObjectURL(externalUrl);
@@ -192,6 +198,7 @@
       startEffect();
       workerFormat.postMessage({
         source: temp,
+        options: options,
       });
     }, 250),
     detect = function (source) {
@@ -262,10 +269,7 @@
       workerDecode.postMessage({
         source: temp,
         packer: packer,
-        options: Array.from(document.querySelectorAll('.de4js-option')).reduce((obj, e) => {
-          obj[e.name] = e.checked;
-          return obj;
-        }, {}),
+        options: options,
       });
     }, 250),
     changeEncode = function (e) {

diff --git a/assets/js/worker/format.js b/assets/js/worker/format.js
@@ -11,6 +11,7 @@
 
 self.addEventListener('message', (e) => {
   let source = e.data.source;
+  const options = e.data.options;
 
   try {
     self._window = self.window;
@@ -37,6 +38,12 @@ self.addEventListener('message', (e) => {
     self.importScripts('{{ "/assets/js/vendor/highlight-js/highlight.min.js" | relative_url }}');
 
     source = self.hljs.highlight('javascript', source).value;
+
+    if (options.lineNumbers) {
+      source = source.split('\n');
+      source = source.join('</code><code>');
+      source = `<code>${source}</code>`;
+    }
   } catch (err) {
     console.log(err);
   }