From 2b41b0e82c4b3caa16dab8628c26f9bacd74b680 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Wed, 11 Nov 2020 08:06:05 +0700
Subject: [PATCH] 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
---
repo/code-line-numbers/mod.js | 90 +++++++++++++++++++++++++++++++
repo/code-line-numbers/styles.css | 25 +++++++++
2 files changed, 115 insertions(+)
create mode 100644 repo/code-line-numbers/mod.js
create mode 100644 repo/code-line-numbers/styles.css
diff --git a/repo/code-line-numbers/mod.js b/repo/code-line-numbers/mod.js
new file mode 100644
index 0000000..c3ac80f
--- /dev/null
+++ b/repo/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');
+ }
+ }
+ }
+ }
+ }
+ });
+ },
+ },
+};
diff --git a/repo/code-line-numbers/styles.css b/repo/code-line-numbers/styles.css
new file mode 100644
index 0000000..ee7a0f8
--- /dev/null
+++ b/repo/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;
+}