diff --git a/mods/code-line-numbers/mod.js b/mods/code-line-numbers/mod.js new file mode 100644 index 0000000..c3ac80f --- /dev/null +++ b/mods/code-line-numbers/mod.js @@ -0,0 +1,90 @@ +/* + * code line numbers + * (c) 2020 dragonwocky (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(''); + + const blockStyle = window.getComputedStyle(block.children[0]) + numbers.style.top = blockStyle.paddingTop; + numbers.style.bottom = blockStyle.paddingBottom; + + block.append(numbers); + + const temp = createElement('
A
'); + 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/mods/code-line-numbers/styles.css b/mods/code-line-numbers/styles.css new file mode 100644 index 0000000..ee7a0f8 --- /dev/null +++ b/mods/code-line-numbers/styles.css @@ -0,0 +1,25 @@ +/* + * code line numbers + * (c) 2020 dragonwocky (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; +}