Skip to content

Instantly share code, notes, and snippets.

@logicplace
Created March 4, 2023 06:38
Show Gist options
  • Save logicplace/7e0cfb8737768c1ca476a31034d5c1bc to your computer and use it in GitHub Desktop.
Save logicplace/7e0cfb8737768c1ca476a31034d5c1bc to your computer and use it in GitHub Desktop.
Utilize the color attribute in HTML elements (e.g. span) in rendered Markdown on GitHub
// ==UserScript==
// @name GitHub colors
// @namespace https://logicplace.com/
// @version 1.0
// @description Support span (and other tags) color on GitHub since I guess it used to work
// @author Sapphire Becker
// @match https://github.com/*
// @match https://gist.github.com/*
// ==/UserScript==
(function() {
'use strict';
function update_colors(mutationList, observer) {
mutationList.forEach((mutation) => {
switch (mutation.type) {
case "childList":
mutation.addedNodes.forEach((x) => {
if (x instanceof Element) {
x.querySelectorAll("[color]").forEach((y) => {
y.style.color = y.attributes.color.value;
});
}
});
break;
case "attributes":
mutation.target.style.color = mutation.target.attributes.color.value;
break;
}
});
}
new MutationObserver(update_colors).observe(
document.querySelector('.markdown-body'),
{
attributes: true,
attributeFilter: ["color"],
childList: true,
subtree: true,
},
);
update_colors([{type: "childList", addedNodes: document.querySelectorAll('.markdown-body')}]);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment