From 6c4513fb2e430c718f465833c16585175ce939e7 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sun, 27 Oct 2024 08:52:34 +0200 Subject: [PATCH] client: Enable syntax highlight for read-only notes --- src/public/app/widgets/type_widgets/read_only_text.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/public/app/widgets/type_widgets/read_only_text.js b/src/public/app/widgets/type_widgets/read_only_text.js index ffab9fcef..c382dc189 100644 --- a/src/public/app/widgets/type_widgets/read_only_text.js +++ b/src/public/app/widgets/type_widgets/read_only_text.js @@ -90,6 +90,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget { // we could load just ckeditor-content.css but that causes CSS conflicts when both build CSS and this content CSS is loaded at the same time // (see https://github.com/zadam/trilium/issues/1590 for example of such conflict) await libraryLoader.requireLibrary(libraryLoader.CKEDITOR); + await libraryLoader.requireLibrary(libraryLoader.HIGHLIGHT_JS); const blob = await note.getBlob(); @@ -110,6 +111,14 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget { renderMathInElement(this.$content[0], {trust: true}); } + + // Enable syntax highlight + const codeBlocks = this.$content.find("pre code"); + for (const codeBlock of codeBlocks) { + const text = codeBlock.innerText; + const highlightedText = hljs.highlightAuto(text).value; + codeBlock.innerHTML = highlightedText; + } } async refreshIncludedNoteEvent({noteId}) {