livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-02-22 13:53:23 +08:00
Code Issues Projects Releases Packages Wiki Activity

Ensure the highlighter CSS is loaded when highlighting snippets

Browse source
This commit is contained in:
Jonatan Kłosko 2024-02-08 02:48:29 +07:00
parent 80534d27fa
commit d1e8f68525
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/js/hooks/cell_editor/live_editor/highlight.js
View file

@ -1,5 +1,6 @@
import { LanguageDescription } from "@codemirror/language"; import { LanguageDescription } from "@codemirror/language";
import { highlightCode } from "@lezer/highlight"; import { highlightCode } from "@lezer/highlight";
import { StyleModule } from "style-mod";
import { languages } from "./codemirror/languages"; import { languages } from "./codemirror/languages";
import { highlightStyle, lightHighlightStyle } from "./codemirror/theme"; import { highlightStyle, lightHighlightStyle } from "./codemirror/theme";
import { escapeHtml } from "../../../lib/utils"; import { escapeHtml } from "../../../lib/utils";
@ -15,6 +16,11 @@ export function highlight(code, language) {
return escapeHtml(code); return escapeHtml(code);
} }
const highlightStyle = getHighlightStyle();
// Ensure the highlighter CSS is added to the page
StyleModule.mount(window.document, highlightStyle.module);
const tree = languageDesc.support.language.parser.parse(code); const tree = languageDesc.support.language.parser.parse(code);
let html = ""; let html = "";
@ -22,7 +28,7 @@ export function highlight(code, language) {
highlightCode( highlightCode(
code, code,
tree, tree,
getHighlightStyle(), highlightStyle,
(code, classes) => { (code, classes) => {
html += `<span class="${classes}">${escapeHtml(code)}</span>`; html += `<span class="${classes}">${escapeHtml(code)}</span>`;
}, },