chore(highlightjs): load theme by IDs

This commit is contained in:
Elian Doran
2025-05-18 17:50:31 +03:00
parent 8b11f25f0c
commit 66cbe468f5
5 changed files with 356 additions and 96 deletions

View File

@@ -1,4 +1,4 @@
import { ensureMimeTypes, highlight, highlightAuto, loadTheme } from "@triliumnext/highlightjs";
import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes } from "@triliumnext/highlightjs";
import mime_types from "./mime_types.js";
import options from "./options.js";
@@ -58,8 +58,17 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
export async function ensureMimeTypesForHighlighting() {
// Load theme.
const currentTheme = String(options.get("codeBlockTheme"));
loadTheme(currentTheme);
const currentThemeName = String(options.get("codeBlockTheme"));
const themePrefix = "default:";
let theme = null;
if (currentThemeName.includes(themePrefix)) {
theme = Themes[currentThemeName.substring(themePrefix.length)];
}
if (!theme) {
theme = Themes.default;
}
loadTheme(theme);
// Load mime types.
const mimeTypes = mime_types.getMimeTypes();

View File

@@ -57,14 +57,6 @@ const TPL = /*html*/`
</div>
`;
// TODO: Deduplicate
interface Theme {
title: string;
val: string;
}
type Response = Record<string, Theme[]>;
/**
* Contains appearance settings for code blocks within text notes, such as the theme for the syntax highlighter.
*/
@@ -78,10 +70,10 @@ export default class CodeBlockOptions extends OptionsWidget {
this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select");
// Populate the list of themes.
for (const name of Object.keys(Themes)) {
for (const [ id, theme ] of Object.entries(Themes)) {
const option = $("<option>")
.attr("value", `default:${name}`)
.text(name);
.attr("value", `default:${id}`)
.text(theme.name);
this.$themeSelect.append(option);
}
this.$themeSelect.on("change", async () => {