add editor highlighting

Author: mProjectsCode

README.md

@@ -2,7 +2,7 @@
 
 This plugin integrates [shiki](https://shiki.style/) via [Expressive Code](https://expressive-code.com/) into Obsidian, providing better syntax highlighting for over 100 languages.
 
-This plugin works in reading mode and in live preview mode, as long as your cursor is not inside the code block.
+This plugin works in reading, live preview and edit mode, providing a consistent experience across the app.
 
 Below is an example with line numbers, a custom header, and line highlighting.
 

bun.lockb

@@ -2,7 +2,7 @@
 test: hello
 ---
 
-TypeScript code
+TypeScript codearsiNOM
 
 ```ts title="A part of ParsiNOM" {13-15, 22-29} showLineNumbers
 export class Parser<const SType extends STypeBase> {
@@ -87,7 +87,6 @@ Bash
 echo "Hello"
 ```
 
-
 ```diff
 + this line will be marked as inserted
 - this line will be marked as deleted

exampleVault/Untitled.md

@@ -23,6 +23,9 @@
 	"author": "Moritz Jung",
 	"license": "GPL-3.0",
 	"devDependencies": {
+		"@codemirror/language": "^6.10.1",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.26.1",
 		"@expressive-code/core": "^0.33.5",
 		"@expressive-code/plugin-collapsible-sections": "^0.33.5",
 		"@expressive-code/plugin-frames": "^0.33.5",
@@ -31,6 +34,7 @@
 		"@expressive-code/plugin-text-markers": "^0.33.5",
 		"@happy-dom/global-registrator": "^14.3.6",
 		"@lemons_dev/parsinom": "^0.0.12",
+		"@lezer/common": "^1.2.1",
 		"@tsconfig/svelte": "^5.0.3",
 		"@types/bun": "^1.0.10",
 		"@typescript-eslint/eslint-plugin": "^7.3.1",
@@ -43,6 +47,7 @@
 		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-isaacscript": "^3.12.2",
 		"eslint-plugin-only-warn": "^1.1.0",
+		"itertools-ts": "^1.27.1",
 		"obsidian": "latest",
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",

exampleVault/index.md

@@ -0,0 +1,42 @@
+import { type EditorState } from '@codemirror/state';
+import { type DecorationSet } from '@codemirror/view';
+
+export class Cm6_Util {
+	/**
+	 * Checks if two ranges overlap.
+	 *
+	 * @param fromA
+	 * @param toA
+	 * @param fromB
+	 * @param toB
+	 */
+	static checkRangeOverlap(fromA: number, toA: number, fromB: number, toB: number): boolean {
+		return fromA <= toB && fromB <= toA;
+	}
+
+	/**
+	 * Gets the editor content of a given range.
+	 *
+	 * @param state
+	 * @param from
+	 * @param to
+	 */
+	static getContent(state: EditorState, from: number, to: number): string {
+		return state.sliceDoc(from, to);
+	}
+
+	/**
+	 * Checks if a decoration exists in a given range.
+	 *
+	 * @param decorations
+	 * @param from
+	 * @param to
+	 */
+	static existsDecorationBetween(decorations: DecorationSet, from: number, to: number): boolean {
+		let exists = false;
+		decorations.between(from, to, () => {
+			exists = true;
+		});
+		return exists;
+	}
+}

package.json

@@ -0,0 +1,178 @@
+import type ShikiPlugin from 'src/main';
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type Range } from '@codemirror/state';
+import { type SyntaxNode } from '@lezer/common';
+import { syntaxTree } from '@codemirror/language';
+import { Cm6_Util } from './Cm6_Util';
+import { type ThemedToken } from 'shiki';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createCm6Plugin(plugin: ShikiPlugin): ViewPlugin<any> {
+	return ViewPlugin.fromClass(
+		class {
+			decorations: DecorationSet;
+
+			constructor(view: EditorView) {
+				this.decorations = Decoration.none;
+				this.updateWidgets(view);
+			}
+
+			/**
+			 * Triggered by codemirror when the view updates.
+			 * Depending on the update type, the decorations are either updated or recreated.
+			 *
+			 * @param update
+			 */
+			update(update: ViewUpdate): void {
+				this.decorations = this.decorations.map(update.changes);
+
+				if (update.docChanged || update.selectionSet) {
+					this.updateWidgets(update.view);
+				}
+			}
+
+			/**
+			 * Updates all the widgets by traversing the syntax tree.
+			 *
+			 * @param view
+			 */
+			updateWidgets(view: EditorView): void {
+				let lang = '';
+				let state: SyntaxNode[] = [];
+
+				// const t1 = performance.now();
+
+				syntaxTree(view.state).iterate({
+					enter: nodeRef => {
+						const node = nodeRef.node;
+
+						const props: Set<string> = new Set<string>(node.type.name?.split('_'));
+
+						if (props.has('formatting')) {
+							return;
+						}
+
+						if (props.has('HyperMD-codeblock') && !props.has('HyperMD-codeblock-begin') && !props.has('HyperMD-codeblock-end')) {
+							state.push(node);
+							return;
+						}
+
+						if (props.has('HyperMD-codeblock-begin')) {
+							const content = Cm6_Util.getContent(view.state, node.from, node.to);
+
+							lang = content.match(/^```(\S+)/)?.[1] ?? '';
+						}
+
+						if (props.has('HyperMD-codeblock-end')) {
+							if (state.length > 0) {
+								const start = state[0].from;
+								const end = state[state.length - 1].to;
+
+								const content = Cm6_Util.getContent(view.state, start, end);
+
+								// const t2 = performance.now();
+
+								this.renderWidget(start, end, lang, content)
+									.then(decorations => {
+										this.removeDecoration(start, end);
+										this.addDecoration(start, end, decorations);
+										// console.log('Highlighted widget in', performance.now() - t2, 'ms');
+									})
+									.catch(console.error);
+							}
+
+							lang = '';
+							state = [];
+						}
+					},
+				});
+
+				// console.log('Traversed syntax tree in', performance.now() - t1, 'ms');
+			}
+
+			/**
+			 * Removes all decorations at a given node.
+			 *
+			 * @param from
+			 * @param to
+			 */
+			removeDecoration(from: number, to: number): void {
+				this.decorations = this.decorations.update({
+					filterFrom: from,
+					filterTo: to,
+					filter: (_from3, _to3, _decoration) => {
+						return false;
+					},
+				});
+			}
+
+			/**
+			 * Adds a widget at a given node if it does not exist yet.
+			 *
+			 * @param from
+			 * @param to
+			 * @param newDecorations
+			 */
+			addDecoration(from: number, to: number, newDecorations: Range<Decoration>[]): void {
+				// check if the decoration already exists and only add it if it does not exist
+				if (Cm6_Util.existsDecorationBetween(this.decorations, from, to)) {
+					return;
+				}
+
+				if (newDecorations.length === 0) {
+					return;
+				}
+
+				this.decorations = this.decorations.update({
+					add: newDecorations,
+				});
+			}
+
+			/**
+			 * Renders a singe widget of the given widget type at a given node.
+			 *
+			 * @param from
+			 * @param to
+			 * @param language
+			 * @param content
+			 */
+			async renderWidget(from: number, to: number, language: string, content: string): Promise<Range<Decoration>[]> {
+				const highlight = await plugin.getHighlightTokens(content, language);
+
+				if (!highlight) {
+					return [];
+				}
+
+				const tokens = highlight.tokens.flat(1);
+
+				const decorations: Range<Decoration>[] = [];
+
+				for (let i = 0; i < tokens.length; i++) {
+					const token = tokens[i];
+					const nextToken: ThemedToken | undefined = tokens[i + 1];
+
+					decorations.push(
+						Decoration.mark({
+							attributes: {
+								style: `color: ${token.color}`,
+							},
+						}).range(from + token.offset, nextToken ? from + nextToken.offset : to),
+					);
+				}
+
+				return decorations;
+			}
+
+			/**
+			 * Triggered by codemirror when the view plugin is destroyed.
+			 * Unloads all widgets.
+			 */
+			destroy(): void {
+				this.decorations = Decoration.none;
+			}
+		},
+		{
+			decorations: v => v.decorations,
+		},
+	);
+}

src/Cm6_Util.ts

@@ -6,17 +6,17 @@ export class CodeBlock extends MarkdownRenderChild {
 	plugin: ShikiPlugin;
 	source: string;
 	language: string;
-	languageShorthand: string;
+	languageName: string;
 	ctx: MarkdownPostProcessorContext;
 	cachedMetaString: string;
 
-	constructor(plugin: ShikiPlugin, containerEl: HTMLElement, source: string, language: string, languageShorthand: string, ctx: MarkdownPostProcessorContext) {
+	constructor(plugin: ShikiPlugin, containerEl: HTMLElement, source: string, language: string, languageName: string, ctx: MarkdownPostProcessorContext) {
 		super(containerEl);
 
 		this.plugin = plugin;
 		this.source = source;
 		this.language = language;
-		this.languageShorthand = languageShorthand;
+		this.languageName = languageName;
 		this.ctx = ctx;
 		this.cachedMetaString = '';
 	}
@@ -32,7 +32,7 @@ export class CodeBlock extends MarkdownRenderChild {
 		const startLine = lines[sectionInfo.lineStart];
 
 		// regexp to match the text after the code block language
-		const regex = new RegExp('^[^`~]*?(```+|~~~+)' + this.languageShorthand + ' (.*)', 'g');
+		const regex = new RegExp('^[^`~]*?(```+|~~~+)' + this.languageName + ' (.*)', 'g');
 		const match = regex.exec(startLine);
 		if (match !== null) {
 			return match[2];
@@ -66,13 +66,13 @@ export class CodeBlock extends MarkdownRenderChild {
 		}
 	}
 
-	public async onload(): Promise<void> {
+	public onload(): void {
 		super.onload();
 
 		this.plugin.addActiveCodeBlock(this);
 
 		this.cachedMetaString = this.getMetaString();
-		await this.render(this.cachedMetaString);
+		void this.render(this.cachedMetaString);
 	}
 
 	public onunload(): void {

src/Cm6_ViewPlugin.ts

@@ -4,11 +4,11 @@ export const EC_THEME: ExpressiveCodeEngineConfig['styleOverrides'] = {
 	borderColor: 'var(--shiki-code-block-border-color)',
 	borderRadius: 'var(--shiki-code-block-border-radius)',
 	borderWidth: 'var(--shiki-code-block-border-width)',
-	codeBackground: 'var(--code-background)',
+	codeBackground: 'var(--shiki-code-background)',
 	codeFontFamily: 'var(--font-monospace)',
 	codeFontSize: 'var(--code-size)',
 	codeFontWeight: 'var(--font-normal)',
-	codeForeground: 'var(--code-normal)',
+	codeForeground: 'var(--shiki-code-normal)',
 	codeLineHeight: 'var(--line-height-normal)',
 	codePaddingBlock: 'var(--size-4-3)',
 	codePaddingInline: 'var(--size-4-4)',
@@ -45,30 +45,30 @@ export const EC_THEME: ExpressiveCodeEngineConfig['styleOverrides'] = {
 		markBorderColor: 'var(--shiki-highlight-neutral)',
 	},
 	frames: {
-		editorActiveTabBackground: 'var(--code-background)',
+		editorActiveTabBackground: 'var(--shiki-code-background)',
 		editorActiveTabBorderColor: 'transparent',
 		editorActiveTabForeground: 'var(--text-normal)',
 		editorActiveTabIndicatorBottomColor: 'transparent',
 		editorActiveTabIndicatorHeight: '2px',
 		editorActiveTabIndicatorTopColor: 'var(--shiki-highlight-neutral)',
-		editorBackground: 'var(--code-background)',
+		editorBackground: 'var(--shiki-code-background)',
 		editorTabBarBackground: 'var(--color-primary)',
 		editorTabBarBorderBottomColor: 'transparent',
 		editorTabBarBorderColor: 'transparent',
 		editorTabBorderRadius: 'var(--shiki-code-border-radius)',
 		editorTabsMarginBlockStart: '0',
 		editorTabsMarginInlineStart: '0',
 		frameBoxShadowCssValue: 'none',
-		inlineButtonBackground: 'var(--interactive-normal)',
+		inlineButtonBackground: 'var(--background-modifier-hover)',
 		inlineButtonBackgroundActiveOpacity: '1',
 		inlineButtonBackgroundHoverOrFocusOpacity: '1',
-		inlineButtonBackgroundIdleOpacity: '1',
+		inlineButtonBackgroundIdleOpacity: '0',
 		inlineButtonBorder: 'var(--shiki-code-border-color)',
 		inlineButtonBorderOpacity: '1',
 		inlineButtonForeground: 'var(--text-normal)',
 		shadowColor: 'transparent',
-		terminalBackground: 'var(--code-background)',
-		terminalTitlebarBackground: 'var(--code-background)',
+		terminalBackground: 'var(--shiki-code-background)',
+		terminalTitlebarBackground: 'var(--shiki-code-background)',
 		terminalTitlebarBorderBottomColor: 'transparent',
 		terminalTitlebarDotsForeground: 'var(--shiki-terminal-dots-color)',
 		terminalTitlebarDotsOpacity: '1',