Extension: Code Line Numbers (#231)

* Added extension folder with mod.js and styles.css

* Option to show numbering on single-lined blocks

Disabled by default

* Update styles.css

* Update mod.js

Changed class name from numbered to code-numbered

* Update styles.css

Changed class name from numbered to code-numbered

mods/code-line-numbers/mod.js

@@ -0,0 +1,90 @@
+/*
+ * code line numbers
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+'use strict';
+
+const { createElement } = require('../../pkg/helpers.js');
+
+module.exports = {
+  id: 'd61dc8a7-b195-465b-935f-53eea9efe74e',
+  tags: ['extension'],
+  name: 'code line numbers',
+  desc: 'adds line numbers to code blocks.',
+  version: '1.0.0',
+  author: 'CloudHill',
+  options: [
+    {
+      key: 'single_lined',
+      label: 'show line numbers on single-lined code blocks',
+      type: 'toggle',
+      value: false
+    }
+  ],
+  hacks: {
+    'renderer/preload.js'(store, __exports) {
+      document.addEventListener('readystatechange', (event) => {
+        if (document.readyState !== 'complete') return false; 
+        let queue = [];
+        const observer = new MutationObserver((list, observer) => {
+          if (!queue.length) requestAnimationFrame(() => process(queue));
+          queue.push(...list);
+        });
+        observer.observe(document.body, {
+          childList: true,
+          subtree: true,
+        });
+        function process(list) {
+          queue = [];
+          for (let { addedNodes } of list) {
+            if (
+              addedNodes[0] &&
+              addedNodes[0].dataset &&
+              addedNodes[0].dataset.tokenIndex &&
+              addedNodes[0].parentElement
+            ) {
+              const block = addedNodes[0].parentElement.parentElement;
+              if (
+                block && 
+                block.classList &&
+                block.classList.contains('notion-code-block')
+              ) {
+                let numbers = block.querySelector('#code-line-numbers');
+                if (!numbers) {
+                  numbers = createElement('<span id="code-line-numbers"></span>');                  
+                  
+                  const blockStyle = window.getComputedStyle(block.children[0])
+                  numbers.style.top = blockStyle.paddingTop; 
+                  numbers.style.bottom = blockStyle.paddingBottom;
+
+                  block.append(numbers);
+
+                  const temp = createElement('<div>A</div>');
+                  block.children[0].append(temp);
+                  block.lineHeight = temp.getBoundingClientRect().height;
+                  temp.remove();
+                }
+
+                const lines = Math.round(
+                  numbers.getBoundingClientRect().height / 
+                  block.lineHeight
+                );
+                
+                if (lines > 1) {
+                  block.children[0].classList.add('code-numbered');
+                  numbers.innerText = Array.from(
+                    Array(lines),
+                    (e, i) => i + 1
+                  ).join('\n');
+                }
+              }
+            }
+          }
+        }
+      });
+    },
+  },
+};

mods/code-line-numbers/styles.css

@@ -0,0 +1,25 @@
+/*
+ * code line numbers
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+.notion-code-block.line-numbers > div {
+    position: relative;
+}
+
+.code-numbered {
+    padding-left: 48px !important;
+}
+
+#code-line-numbers {
+    font-size: var(--theme--font_code-size) !important;
+    font-family: var(--theme--font_code) !important;
+    opacity: 0.5;
+    text-align: right;
+    position: absolute;
+    right: calc(100% - 30px);
+    overflow: hidden;
+    pointer-events: none;
+}