Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 19:05:59 +01:00
Code Issues Packages Projects Releases Activity

chore(highlightjs): introduce client-level list of themes

Browse Source
This commit is contained in:
Elian Doran
2025-05-18 17:12:45 +03:00
parent 488761d4b9
commit 8b11f25f0c
9 changed files with 108 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/services/library_loader.ts
View File

@@ -31,7 +31,6 @@ const HIGHLIGHT_JS: Library = {
}
}
const currentTheme = String(optionsService.get("codeBlockTheme"));
loadHighlightingTheme(currentTheme);
return Array.from(scriptsToLoad);

7
apps/client/src/services/syntax_highlight.ts
View File

@@ -1,4 +1,4 @@
import { ensureMimeTypes, highlight, highlightAuto } from "@triliumnext/highlightjs";
import { ensureMimeTypes, highlight, highlightAuto, loadTheme } from "@triliumnext/highlightjs";
import mime_types from "./mime_types.js";
import options from "./options.js";
@@ -57,6 +57,11 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
}
export async function ensureMimeTypesForHighlighting() {
// Load theme.
const currentTheme = String(options.get("codeBlockTheme"));
loadTheme(currentTheme);
// Load mime types.
const mimeTypes = mime_types.getMimeTypes();
await ensureMimeTypes(mimeTypes);
}

27
apps/client/src/widgets/type_widgets/options/text_notes/code_block.ts
View File

@@ -4,6 +4,7 @@ import library_loader from "../../../../services/library_loader.js";
import server from "../../../../services/server.js";
import OptionsWidget from "../options_widget.js";
import { ensureMimeTypesForHighlighting } from "../../../../services/syntax_highlight.js";
import { Themes } from "@triliumnext/highlightjs";
const SAMPLE_LANGUAGE = "javascript";
const SAMPLE_CODE = `\
@@ -76,6 +77,13 @@ export default class CodeBlockOptions extends OptionsWidget {
doRender() {
this.$widget = $(TPL);
this.$themeSelect = this.$widget.find(".theme-select");
// Populate the list of themes.
for (const name of Object.keys(Themes)) {
const option = $("<option>")
.attr("value", `default:${name}`)
.text(name);
this.$themeSelect.append(option);
}
this.$themeSelect.on("change", async () => {
const newTheme = String(this.$themeSelect.val());
library_loader.loadHighlightingTheme(newTheme);
@@ -107,25 +115,6 @@ export default class CodeBlockOptions extends OptionsWidget {
}
async optionsLoaded(options: OptionMap) {
const themeGroups = await server.get<Response>("options/codeblock-themes");
this.$themeSelect.empty();
for (const [key, themes] of Object.entries(themeGroups)) {
const $group = key ? $("<optgroup>").attr("label", key) : null;
for (const theme of themes) {
const option = $("<option>").attr("value", theme.val).text(theme.title);
if ($group) {
$group.append(option);
} else {
this.$themeSelect.append(option);
}
}
if ($group) {
this.$themeSelect.append($group);
}
}
this.$themeSelect.val(options.codeBlockTheme);
this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
this.$widget.closest(".note-detail-printable").toggleClass("word-wrap", options.codeBlockWordWrap === "true");