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"
/>