Basic syntax highlight support for code blocks

bin/copy-dist.ts

@@ -55,6 +55,7 @@ const copy = async () => {
     "node_modules/katex/dist/katex.min.js",
     "node_modules/katex/dist/contrib/mhchem.min.js",
     "node_modules/katex/dist/contrib/auto-render.min.js",
+    "node_modules/@highlightjs/cdn-assets/highlight.min.js"
   ];
 
   for (const file of nodeModulesFile) {
@@ -89,7 +90,9 @@ const copy = async () => {
     "node_modules/codemirror/addon/",
     "node_modules/codemirror/mode/",
     "node_modules/codemirror/keymap/",
-    "node_modules/mind-elixir/dist/"
+    "node_modules/mind-elixir/dist/",
+    "node_modules/@highlightjs/cdn-assets/languages",
+    "node_modules/@highlightjs/cdn-assets/styles"
   ];
 
   for (const folder of nodeModulesFolder) {

libraries/ckeditor/ckeditor-content.css

@@ -526,16 +526,19 @@
 /* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
 .ck-content pre {
     padding: 1em;
-    color: hsl(0, 0%, 20.8%);
-    background: hsla(0, 0%, 78%, 0.3);
-    border: 1px solid hsl(0, 0%, 77%);
-    border-radius: 2px;
     text-align: left;
     direction: ltr;
     tab-size: 4;
     white-space: pre-wrap;
     font-style: normal;
     min-width: 200px;
+    border: 0px;
+    border-radius: 6px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
+}
+.ck-content pre:not(.hljs) {
+    color: hsl(0, 0%, 20.8%);    
+    background: hsla(0, 0%, 78%, 0.3);
 }
 /* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
 .ck-content pre code {

package.json

@@ -52,6 +52,7 @@
     "@braintree/sanitize-url": "7.1.0",
     "@electron/remote": "2.1.2",
     "@excalidraw/excalidraw": "0.17.6",
+    "@highlightjs/cdn-assets": "11.10.0",
     "archiver": "7.0.1",
     "async-mutex": "0.5.0",
     "autocomplete.js": "0.38.1",

src/becca/entities/rows.ts

@@ -38,9 +38,18 @@ export interface RecentNoteRow {
     utcDateCreated?: string;
 }
 
+/**
+ * Database representation of an option.
+ * 
+ * Options are key-value pairs that are used to store information such as user preferences (for example
+ * the current theme, sync server information), but also information about the state of the application).
+ */
 export interface OptionRow {
+    /** The name of the option. */
     name: string;
+    /** The value of the option. */
     value: string;
+    /** `true` if the value should be synced across multiple instances (e.g. locale) or `false` if it should be local-only (e.g. theme). */
     isSynced: boolean;
     utcDateModified?: string;
 }

src/public/app/services/content_renderer.js

@@ -10,6 +10,7 @@ import treeService from "./tree.js";
 import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
 import imageContextMenuService from "../menus/image_context_menu.js";
+import { applySyntaxHighlight } from "./syntax_highlight.js";
 
 let idCounter = 1;
 
@@ -105,6 +106,8 @@ async function renderText(note, $renderedContent) {
         for (const el of referenceLinks) {
             await linkService.loadReferenceLinkTitle($(el));
         }
+
+        await applySyntaxHighlight($renderedContent);
     } else {
         await renderChildrenList($renderedContent, note);
     }

src/public/app/services/library_loader.js

@@ -1,3 +1,6 @@
+import mimeTypesService from "./mime_types.js";
+import optionsService from "./options.js";
+
 const CKEDITOR = {"js": ["libraries/ckeditor/ckeditor.js"]};
 
 const CODE_MIRROR = {
@@ -84,18 +87,44 @@ const MIND_ELIXIR = {
     ]
 };
 
+const HIGHLIGHT_JS = {
+    js: () => {
+        const mimeTypes = mimeTypesService.getMimeTypes();
+        const scriptsToLoad = new Set();
+        scriptsToLoad.add("node_modules/@highlightjs/cdn-assets/highlight.min.js");
+        for (const mimeType of mimeTypes) {
+            if (mimeType.enabled && mimeType.highlightJs) {
+                scriptsToLoad.add(`node_modules/@highlightjs/cdn-assets/languages/${mimeType.highlightJs}.min.js`);
+            }
+        }
+
+        const currentTheme = optionsService.get("codeBlockTheme");
+        loadHighlightingTheme(currentTheme);
+
+        return Array.from(scriptsToLoad);
+    }
+};
+
 async function requireLibrary(library) {
     if (library.css) {
         library.css.map(cssUrl => requireCss(cssUrl));
     }
 
     if (library.js) {
-        for (const scriptUrl of library.js) {
+        for (const scriptUrl of unwrapValue(library.js)) {
             await requireScript(scriptUrl);
         }
     }
 }
 
+function unwrapValue(value) {
+    if (typeof value === "function") {
+        return value();
+    }
+
+    return value;
+}
+
 // we save the promises in case of the same script being required concurrently multiple times
 const loadedScriptPromises = {};
 
@@ -127,9 +156,41 @@ async function requireCss(url, prependAssetPath = true) {
     }
 }
 
+let highlightingThemeEl = null;
+function loadHighlightingTheme(theme) {
+    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);
+    }
+
+    let url;
+    const defaultPrefix = "default:";
+    if (theme.startsWith(defaultPrefix)) {        
+        url = `${window.glob.assetPath}/node_modules/@highlightjs/cdn-assets/styles/${theme.substr(defaultPrefix.length)}.min.css`;
+    }
+
+    if (url) {
+        highlightingThemeEl.attr("href", url);
+    }
+}
+
 export default {
     requireCss,
     requireLibrary,
+    loadHighlightingTheme,
     CKEDITOR,
     CODE_MIRROR,
     ESLINT,
@@ -143,5 +204,6 @@ export default {
     EXCALIDRAW,
     MARKJS,
     I18NEXT,
-    MIND_ELIXIR
+    MIND_ELIXIR,
+    HIGHLIGHT_JS
 }