add dark/light theme for mermaid and hljs
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
Some checks are pending
ci/woodpecker/push/publish Pipeline is pending
This commit is contained in:
parent
a0817a3879
commit
c6a1f3efcb
3 changed files with 29 additions and 2 deletions
|
@ -1,4 +1,8 @@
|
|||
window.addEventListener("load", () => {
|
||||
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark" // dark
|
||||
: "default"; // light
|
||||
|
||||
hljs.configure({
|
||||
noHighlightRe: /^$/i,
|
||||
languageDetectRe: /\blanguage-hljs-([\w-]+)\b/i,
|
||||
|
@ -16,4 +20,14 @@ window.addEventListener("load", () => {
|
|||
hljs.highlightAll();
|
||||
|
||||
hljs.initLineNumbersOnLoad();
|
||||
|
||||
document
|
||||
.getElementById(
|
||||
`hljs-${
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light"
|
||||
}-theme`
|
||||
)
|
||||
.removeAttribute("disabled");
|
||||
});
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
|
||||
|
||||
window.addEventListener("load", async () => {
|
||||
mermaid.initialize({ startOnLoad: false });
|
||||
const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark" // dark
|
||||
: "default"; // light
|
||||
|
||||
mermaid.initialize({ startOnLoad: false, theme: theme });
|
||||
|
||||
await mermaid.run({
|
||||
querySelector: ".language-mermaid",
|
||||
});
|
||||
|
|
|
@ -1,6 +1,14 @@
|
|||
<link
|
||||
id="hljs-light-theme"
|
||||
rel="stylesheet"
|
||||
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
|
||||
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/solarized-light.min.css"
|
||||
disabled="disabled"
|
||||
/>
|
||||
<link
|
||||
id="hljs-dark-theme"
|
||||
rel="stylesheet"
|
||||
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/base16/dracula.min.css"
|
||||
disabled="disabled"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
|
Loading…
Reference in a new issue