client: Don't load syntax highlighter when not needed

src/public/app/services/content_renderer.js

@@ -107,7 +107,7 @@ async function renderText(note, $renderedContent) {
             await linkService.loadReferenceLinkTitle($(el));
         }
 
-        applySyntaxHighlight($renderedContent);
+        await applySyntaxHighlight($renderedContent);
     } else {
         await renderChildrenList($renderedContent, note);
     }

src/public/app/services/syntax_highlight.js

@@ -1,11 +1,19 @@
+import library_loader from "./library_loader.js";
 import mime_types from "./mime_types.js";
+import options from "./options.js";
 
 /**
- * Identifies all the code blocks under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
+ * Identifies all the code blocks (as `pre code`) under the specified hierarchy and uses the highlight.js library to obtain the highlighted text which is then applied on to the code blocks.
  * 
  * @param $container the container under which to look for code blocks and to apply syntax highlighting to them.
  */
-export function applySyntaxHighlight($container) {
+export async function applySyntaxHighlight($container) {
+    if (!isSyntaxHighlightEnabled()) {
+        return;
+    }
+
+    await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
+
     const codeBlocks = $container.find("pre code");
     for (const codeBlock of codeBlocks) {
         $(codeBlock).parent().toggleClass("hljs");
@@ -31,6 +39,15 @@ export function applySyntaxHighlight($container) {
     }
 }
 
+/**
+ * Indicates whether syntax highlighting should be enabled for code blocks, by querying the value of the `codeblockTheme` option.
+ * @returns whether syntax highlighting should be enabled for code blocks.
+ */
+export function isSyntaxHighlightEnabled() {
+    const theme = options.get("codeBlockTheme");
+    return theme && theme !== "none";
+}
+
 /**
  * Given a HTML element, tries to extract the `language-` class name out of it.
  * 

src/public/app/widgets/type_widgets/ckeditor/syntax_highlight.js

@@ -8,10 +8,16 @@
  * TODO: Generally this class can be done directly in the CKEditor repository.
  */
 
+import library_loader from "../../../services/library_loader.js";
 import mime_types from "../../../services/mime_types.js";
+import { isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
 
-export function initSyntaxHighlighting(editor) {
+export async function initSyntaxHighlighting(editor) {
-    console.log("Init syntax highlight");
+    if (!isSyntaxHighlightEnabled) {
+        return;
+    }
+
+    await library_loader.requireLibrary(library_loader.HIGHLIGHT_JS);
     initTextEditor(editor);
 }
 

src/public/app/widgets/type_widgets/editable_text.js

@@ -12,6 +12,7 @@ import appContext from "../../components/app_context.js";
 import dialogService from "../../services/dialog.js";
 import { initSyntaxHighlighting } from "./ckeditor/syntax_highlight.js";
 import options from "../../services/options.js";
+import { isSyntaxHighlightEnabled } from "../../services/syntax_highlight.js";
 
 const ENABLE_INSPECTOR = false;
 
@@ -124,7 +125,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
     async initEditor() {
         await libraryLoader.requireLibrary(libraryLoader.CKEDITOR);
-        await libraryLoader.requireLibrary(libraryLoader.HIGHLIGHT_JS);
 
         const codeBlockLanguages = buildListOfLanguages();
 
@@ -171,9 +171,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         this.watchdog.setCreator(async (elementOrData, editorConfig) => {
             const editor = await BalloonEditor.create(elementOrData, editorConfig);
 
-            if (options.get("codeBlockTheme") !== "none") {
+            await initSyntaxHighlighting(editor);
-                initSyntaxHighlighting(editor);
-            }
 
             editor.model.document.on('change:data', () => this.spacedUpdate.scheduleUpdate());
 

src/public/app/widgets/type_widgets/read_only_text.js

@@ -90,8 +90,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
         // we load CKEditor also for read only notes because they contain content styles required for correct rendering of even read only notes
         // 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.CKEDITOR);        
-        await libraryLoader.requireLibrary(libraryLoader.HIGHLIGHT_JS);
 
         const blob = await note.getBlob();
 
@@ -113,7 +112,7 @@ export default class ReadOnlyTextTypeWidget extends AbstractTextTypeWidget {
             renderMathInElement(this.$content[0], {trust: true});
         }
 
-        applySyntaxHighlight(this.$content);
+        await applySyntaxHighlight(this.$content);
     }
 
     async refreshIncludedNoteEvent({noteId}) {