From 70f3543c6877f30fe3f91212971af262ddae5a32 Mon Sep 17 00:00:00 2001 From: "Felipe S. S. Schneider" Date: Wed, 7 Apr 2021 12:06:49 -0300 Subject: [PATCH 1/2] Use CodeMirror.findModeByName instead of listing aliases --- frontend/components/CellOutput.js | 29 ++++++++++++++++------------- frontend/editor.html | 1 + 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/frontend/components/CellOutput.js b/frontend/components/CellOutput.js index d8a2a980f3..1c968343ca 100644 --- a/frontend/components/CellOutput.js +++ b/frontend/components/CellOutput.js @@ -333,16 +333,7 @@ export let RawHTMLContainer = ({ body, persist_js_state = false, last_run_timest for (let code_element of container.current.querySelectorAll("code")) { for (let className of code_element.classList) { if (className.startsWith("language-")) { - let aliases = { - "html": "htmlmixed", - "jl": "julia", - "js": "javascript", - } - let language = className.substr(9) - if (language in aliases) { - language = aliases[language] - } // Remove "language-" highlight(code_element, language) @@ -364,15 +355,27 @@ export let RawHTMLContainer = ({ body, persist_js_state = false, last_run_timest export let highlight = (code_element, language) => { if (code_element.children.length === 0) { // @ts-ignore + let mode = language // fallback + + let info = window.CodeMirror.findModeByName(language) + if (info) { + mode = info.mode + } + + // Not require since https://github.com/codemirror/CodeMirror/commit/bd1b7d2976d768ae4e3b8cf209ec59ad73c0305a + if (mode == "jl") { + mode = "julia" + } + window.CodeMirror.requireMode( - language, + mode, function () { - window.CodeMirror.runMode(code_element.innerText, language, code_element) + window.CodeMirror.runMode(code_element.innerText, mode, code_element) code_element.classList.add("cm-s-default") }, { - path: function (language) { - return `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${language}/${language}.min.js` + path: function (mode) { + return `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${mode}/${mode}.min.js` }, } ) diff --git a/frontend/editor.html b/frontend/editor.html index f71529dbdb..4e00f87696 100644 --- a/frontend/editor.html +++ b/frontend/editor.html @@ -29,6 +29,7 @@ + From 6bd46a988e7ea9605024bbfa28119939a5cd2413 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Sat, 10 Apr 2021 10:59:36 +0200 Subject: [PATCH 2/2] whitespace --- frontend/components/CellOutput.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/components/CellOutput.js b/frontend/components/CellOutput.js index 1c968343ca..d4ab0e1578 100644 --- a/frontend/components/CellOutput.js +++ b/frontend/components/CellOutput.js @@ -9,6 +9,9 @@ import { cl } from "../common/ClassTable.js" import { observablehq_for_cells } from "../common/SetupCellEnvironment.js" import { PlutoBondsContext, PlutoContext } from "../common/PlutoContext.js" +//@ts-ignore +const CodeMirror = window.CodeMirror + export class CellOutput extends Component { constructor() { super() @@ -354,29 +357,26 @@ export let RawHTMLContainer = ({ body, persist_js_state = false, last_run_timest /** @param {HTMLElement} code_element */ export let highlight = (code_element, language) => { if (code_element.children.length === 0) { - // @ts-ignore - let mode = language // fallback + let mode = language // fallback - let info = window.CodeMirror.findModeByName(language) + let info = CodeMirror.findModeByName(language) if (info) { mode = info.mode } - // Not require since https://github.com/codemirror/CodeMirror/commit/bd1b7d2976d768ae4e3b8cf209ec59ad73c0305a + // Will not be required after release of https://github.com/codemirror/CodeMirror/commit/bd1b7d2976d768ae4e3b8cf209ec59ad73c0305a if (mode == "jl") { mode = "julia" } - window.CodeMirror.requireMode( + CodeMirror.requireMode( mode, - function () { - window.CodeMirror.runMode(code_element.innerText, mode, code_element) + () => { + CodeMirror.runMode(code_element.innerText, mode, code_element) code_element.classList.add("cm-s-default") }, { - path: function (mode) { - return `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${mode}/${mode}.min.js` - }, + path: (mode) => `https://cdn.jsdelivr.net/npm/codemirror@5.58.1/mode/${mode}/${mode}.min.js`, } ) }