☰

Fix kbin Code Blocks

Fix for kbin code blocks federated from Lemmy. Strips out the weird <span> tags on each line.

目前為 2023-11-21 提交的版本，檢視 最新版本。

// ==UserScript==
// @name         Fix kbin Code Blocks
// @namespace    pamasich-kbin
// @version      1.2.0.1
// @description  Fix for kbin code blocks federated from Lemmy. Strips out the weird <span> tags on each line.
// @author       Pamasich
// @match        https://kbin.social/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=kbin.social
// @license      MIT
// @grant        none
// ==/UserScript==

const testPattern = /\n?<span style="color:#323232;">(.+\n)+<\/span>\n?/;
const startTagPattern = /^\n?<span style="color:#323232;">/g;
const endTagPattern = /<\/span>\n?$/g;
const combinedPattern = /^<\/span><span style="color:#323232;">/gm;

function fixCodeBlock(code) {
    if (testPattern.test(code.innerText)) {
        code.innerText = code.innerText
            .replace(startTagPattern, "")
            .replaceAll(combinedPattern, "")
            .replace(endTagPattern, "");
    }
}

// used to ensure the code blocks in the thread body itself, not just the comments, are replaced
// unlike the blockquote for comments, it doesn't seem like the MutationObserver is picking up any article elements or anything nearby I could use
document.querySelectorAll("pre code").forEach(fixCodeBlock);

const observer = new MutationObserver(mutations => {
    // the filter ensures the script only looks for new code blocks to fix if new comments were added or the user navigated to a different thread
    const codeBlocks = mutations.flatMap(mutation => Array.from(mutation.addedNodes))
        .filter(node => node.nodeName == "BLOCKQUOTE" || node.nodeName == "BODY")
        .map(node => Array.from(node.querySelectorAll("pre code")))
        .flat(1);
    // codeBlocks at this point might contain the same node twice, so the Set constructor is used to get unique nodes
    new Set(codeBlocks).forEach(fixCodeBlock);
});
// observing the entire document because of turbo mode
observer.observe(document, { childList: true, subtree: true });