Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(highlightjs): reintegrate loading of themes

Browse Source
This commit is contained in:
Elian Doran 2025-05-18 18:24:35 +03:00
parent 66cbe468f5
commit b998dee476
No known key found for this signature in database
4 changed files with 28 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,8 +31,6 @@ const HIGHLIGHT_JS: Library = {
} }
} }
loadHighlightingTheme(currentTheme);
return Array.from(scriptsToLoad); return Array.from(scriptsToLoad);
} }
}; };
@ -90,35 +88,8 @@ async function requireCss(url: string, prependAssetPath = true) {
} }
} }
let highlightingThemeEl: JQuery<HTMLElement> | null = null;
function loadHighlightingTheme(theme: string) {
if (!theme) {
return;
}
if (theme === "none") {
// Deactivate the theme.
if (highlightingThemeEl) {
highlightingThemeEl.remove();
highlightingThemeEl = null;
}
return;
}
if (!highlightingThemeEl) {
highlightingThemeEl = $(`<link rel="stylesheet" type="text/css" />`);
$("head").append(highlightingThemeEl);
}
const url = getStylesheetUrl(theme);
if (url) {
highlightingThemeEl.attr("href", url);
}
}
export default { export default {
requireCss, requireCss,
requireLibrary, requireLibrary,
loadHighlightingTheme,
KATEX KATEX
}; };

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

@ -59,20 +59,24 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
export async function ensureMimeTypesForHighlighting() { export async function ensureMimeTypesForHighlighting() {
// Load theme. // Load theme.
const currentThemeName = String(options.get("codeBlockTheme")); const currentThemeName = String(options.get("codeBlockTheme"));
loadHighlightingTheme(currentThemeName);
// Load mime types.
const mimeTypes = mime_types.getMimeTypes();
await ensureMimeTypes(mimeTypes);
}
export function loadHighlightingTheme(themeName: string) {
const themePrefix = "default:"; const themePrefix = "default:";
let theme = null; let theme = null;
if (currentThemeName.includes(themePrefix)) { if (themeName.includes(themePrefix)) {
theme = Themes[currentThemeName.substring(themePrefix.length)]; theme = Themes[themeName.substring(themePrefix.length)];
} }
if (!theme) { if (!theme) {
theme = Themes.default; theme = Themes.default;
} }
loadTheme(theme); loadTheme(theme);
// Load mime types.
const mimeTypes = mime_types.getMimeTypes();
await ensureMimeTypes(mimeTypes);
} }
/** /**

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

@ -1,9 +1,8 @@
import type { OptionMap } from "@triliumnext/commons"; import type { OptionMap } from "@triliumnext/commons";
import { t } from "../../../../services/i18n.js"; import { t } from "../../../../services/i18n.js";
import library_loader from "../../../../services/library_loader.js";
import server from "../../../../services/server.js"; import server from "../../../../services/server.js";
import OptionsWidget from "../options_widget.js"; import OptionsWidget from "../options_widget.js";
import { ensureMimeTypesForHighlighting } from "../../../../services/syntax_highlight.js"; import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../../services/syntax_highlight.js";
import { Themes } from "@triliumnext/highlightjs"; import { Themes } from "@triliumnext/highlightjs";
const SAMPLE_LANGUAGE = "javascript"; const SAMPLE_LANGUAGE = "javascript";
@ -78,7 +77,7 @@ export default class CodeBlockOptions extends OptionsWidget {
} }
this.$themeSelect.on("change", async () => { this.$themeSelect.on("change", async () => {
const newTheme = String(this.$themeSelect.val()); const newTheme = String(this.$themeSelect.val());
library_loader.loadHighlightingTheme(newTheme); loadHighlightingTheme(newTheme);
await server.put(`options/codeBlockTheme/${newTheme}`); await server.put(`options/codeBlockTheme/${newTheme}`);
}); });

20
packages/highlightjs/src/index.ts
View File

@ -8,6 +8,7 @@ export { default as Themes } from "./themes.js";
const registeredMimeTypes = new Set<string>(); const registeredMimeTypes = new Set<string>();
const unsupportedMimeTypes = new Set<string>(); const unsupportedMimeTypes = new Set<string>();
let highlightingThemeEl: HTMLStyleElement | null = null;
export async function ensureMimeTypes(mimeTypes: MimeType[]) { export async function ensureMimeTypes(mimeTypes: MimeType[]) {
for (const mimeType of mimeTypes) { for (const mimeType of mimeTypes) {
@ -45,11 +46,22 @@ export function highlight(code: string, options: HighlightOptions) {
return hljs.highlight(code, options); return hljs.highlight(code, options);
} }
export async function loadTheme(theme: Theme) { export async function loadTheme(theme: "none" | Theme) {
console.log("Got theme", theme); if (theme === "none") {
if (highlightingThemeEl) {
highlightingThemeEl.remove();
highlightingThemeEl = null;
}
return;
}
const loadedTheme = await theme.load(); if (!highlightingThemeEl) {
console.log("Got", loadedTheme.default); highlightingThemeEl = document.createElement("style");
document.querySelector("head")?.append(highlightingThemeEl);
}
const themeCss = (await theme.load()).default as string;
highlightingThemeEl.textContent = themeCss;
} }
export const { highlightAuto } = hljs; export const { highlightAuto } = hljs;