Add support for dynamic theme switching in highlight.js styles within Kotlin fenced code blocks

This commit is contained in:
Sergey Chernov 2026-03-07 17:08:20 +03:00
parent 8e10540257
commit c351e6ff1e
2 changed files with 19 additions and 2 deletions

View File

@ -1,5 +1,5 @@
/*
* Copyright 2025 Sergey S. Chernov real.sergeych@gmail.com
* Copyright 2026 Sergey S. Chernov real.sergeych@gmail.com
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@ -777,12 +777,19 @@ private fun applyTheme(isDark: Boolean) {
// Toggle GitHub Markdown CSS light/dark
val light = document.getElementById("md-light") as? HTMLLinkElement
val dark = document.getElementById("md-dark") as? HTMLLinkElement
// Toggle highlight.js CSS for Kotlin fenced blocks
val hljsLight = document.getElementById("hljs-light") as? HTMLLinkElement
val hljsDark = document.getElementById("hljs-dark") as? HTMLLinkElement
if (isDark) {
light?.setAttribute("disabled", "")
dark?.removeAttribute("disabled")
hljsLight?.setAttribute("disabled", "")
hljsDark?.removeAttribute("disabled")
} else {
dark?.setAttribute("disabled", "")
light?.removeAttribute("disabled")
hljsDark?.setAttribute("disabled", "")
hljsLight?.removeAttribute("disabled")
}
}

View File

@ -318,7 +318,17 @@
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/dark.min.css">
<link
id="hljs-light"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css"
/>
<link
id="hljs-dark"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css"
disabled
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>