diff --git a/static/js/libs/hljs.js b/static/js/libs/hljs.js index e78c7bf..08b8004 100644 --- a/static/js/libs/hljs.js +++ b/static/js/libs/hljs.js @@ -1,11 +1,12 @@ window.addEventListener("load", () => { + /* Configuration */ hljs.configure({ noHighlightRe: /^$/i, languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i, }); - hljs.addPlugin(new CopyButtonPlugin()); + /* Aliases of langs */ const aliases = { bash: ["fish"], }; @@ -13,17 +14,32 @@ window.addEventListener("load", () => { hljs.registerAliases(aliases[lang], { languageName: lang }); } + /* Highlight */ hljs.highlightAll(); - hljs.initLineNumbersOnLoad(); - document - .getElementById( - `hljs-${ - window.matchMedia("(prefers-color-scheme: dark)").matches - ? "dark" - : "light" - }-theme` - ) - .removeAttribute("disabled"); + /* Theme */ + const dark = "dark"; + const light = "light"; + const attribute = ["disabled", "disabled"]; + const updateTheme = (theme) => { + { + const elementToEnable = document.getElementById( + `hljs-${theme.matches ? dark : light}-theme` + ); + const elementToDisable = document.getElementById( + `hljs-${theme.matches ? light : dark}-theme` + ); + + if (elementToEnable.hasAttribute(attribute[0])) { + elementToEnable.removeAttribute(attribute[0]); + } + elementToDisable.setAttribute(...attribute); + } + }; + + const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)"); + updateTheme(darkModePreference); + + darkModePreference.addEventListener("change", (theme) => updateTheme(theme)); }); diff --git a/templates/libs/hljs_head.html b/templates/libs/hljs_head.html index 11a79c1..6dfd659 100644 --- a/templates/libs/hljs_head.html +++ b/templates/libs/hljs_head.html @@ -2,13 +2,11 @@ id="hljs-light-theme" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/solarized-light.min.css" - disabled="disabled" />