Fix for kbin code blocks federated from Lemmy. Strips out the weird <span> tags on each line.
目前為
// ==UserScript==
// @name Fix kbin Code Blocks
// @namespace pamasich-kbin
// @version 1.2.2
// @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==
/*
This script fixes code blocks on kbin that originate from Lemmy.
When federating code blocks, Lemmy includes additional <span> tags
which kbin currently does not expect, so it just renders them in plaintext.
The script removes those tags from code blocks.
*/
const testPattern = /\n?<span style="color:#323232;">(.+\n)+<\/span>\n?/;
const startTagPattern = /^\n?<span style="color:#323232;">/;
const endTagPattern = /<\/span>\n?$/;
const combinedPattern = /^<\/span><span style="color:#323232;">/gm;
function fixCodeBlock(code) {
// used to avoid false positives, wouldn't want to strip out end span tags (</span>) from legit HTML code blocks
if (testPattern.test(code.innerText)) {
code.innerText = code.innerText
.replace(startTagPattern, "")
.replaceAll(combinedPattern, "")
.replace(endTagPattern, "");
}
}
// the MutationObserver doesn't work well when the page is loaded from scratch (without navigating from another kbin page with turbo mode)
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")
.flatMap(node => Array.from(node.querySelectorAll("pre code")));
// 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 });