Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +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);
}
};
@ -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 {
requireCss,
requireLibrary,
loadHighlightingTheme,
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() {
// Load theme.
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:";
let theme = null;
if (currentThemeName.includes(themePrefix)) {
theme = Themes[currentThemeName.substring(themePrefix.length)];
if (themeName.includes(themePrefix)) {
theme = Themes[themeName.substring(themePrefix.length)];
}
if (!theme) {
theme = Themes.default;
}
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 { t } from "../../../../services/i18n.js";
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 { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../../services/syntax_highlight.js";
import { Themes } from "@triliumnext/highlightjs";
const SAMPLE_LANGUAGE = "javascript";
@ -78,7 +77,7 @@ export default class CodeBlockOptions extends OptionsWidget {
}
this.$themeSelect.on("change", async () => {
const newTheme = String(this.$themeSelect.val());
library_loader.loadHighlightingTheme(newTheme);
loadHighlightingTheme(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 unsupportedMimeTypes = new Set<string>();
let highlightingThemeEl: HTMLStyleElement | null = null;
export async function ensureMimeTypes(mimeTypes: MimeType[]) {
for (const mimeType of mimeTypes) {
@ -45,11 +46,22 @@ export function highlight(code: string, options: HighlightOptions) {
return hljs.highlight(code, options);
}
export async function loadTheme(theme: Theme) {
console.log("Got theme", theme);
export async function loadTheme(theme: "none" | Theme) {
if (theme === "none") {
if (highlightingThemeEl) {
highlightingThemeEl.remove();
highlightingThemeEl = null;
}
return;
}
const loadedTheme = await theme.load();
console.log("Got", loadedTheme.default);
if (!highlightingThemeEl) {
highlightingThemeEl = document.createElement("style");
document.querySelector("head")?.append(highlightingThemeEl);
}
const themeCss = (await theme.load()).default as string;
highlightingThemeEl.textContent = themeCss;
}
export const { highlightAuto } = hljs;