SergeychWorks/lyng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 20 Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
site/src/jsMain/kotlin/Main.kt
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"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with 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 // Toggle GitHub Markdown CSS light/dark
val light = document.getElementById("md-light") as? HTMLLinkElement val light = document.getElementById("md-light") as? HTMLLinkElement
val dark = document.getElementById("md-dark") 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) { if (isDark) {
light?.setAttribute("disabled", "") light?.setAttribute("disabled", "")
dark?.removeAttribute("disabled") dark?.removeAttribute("disabled")
hljsLight?.setAttribute("disabled", "")
hljsDark?.removeAttribute("disabled")
} else { } else {
dark?.setAttribute("disabled", "") dark?.setAttribute("disabled", "")
light?.removeAttribute("disabled") light?.removeAttribute("disabled")
hljsDark?.setAttribute("disabled", "")
hljsLight?.removeAttribute("disabled")
} }
} }

12
site/src/jsMain/resources/index.html
View File

@ -318,7 +318,17 @@
} }
</style> </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> <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 --> <!-- 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> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script>