EC migration is working

Author: mProjectsCode

bun.lockb

@@ -24,7 +24,10 @@
   "license": "GPL-3.0",
   "devDependencies": {
     "@expressive-code/core": "^0.33.5",
+    "@expressive-code/plugin-collapsible-sections": "^0.33.5",
+    "@expressive-code/plugin-line-numbers": "^0.33.5",
     "@expressive-code/plugin-shiki": "^0.33.5",
+    "@expressive-code/plugin-text-markers": "^0.33.5",
     "@happy-dom/global-registrator": "^14.3.6",
     "@lemons_dev/parsinom": "^0.0.12",
     "@tsconfig/svelte": "^5.0.3",

package.json

@@ -1,6 +1,105 @@
-import { type ThemeInput } from 'shiki';
+import { ThemeRegistration } from 'shiki';
+import * as hast_util_to_html_lib_types from 'hast-util-to-html/lib/types';
+import * as hast_types from 'hast';
 
-export const OBSIDIAN_THEME: ThemeInput = {
+interface Theme {
+	theme: ThemeRegistration;
+	mapping: Map<string, string>;
+	reverseMapping: Map<string, string>;
+}
+
+export class ThemeMapper {
+	mapCounter: number;
+	mapping: Map<string, string>;
+
+	constructor() {
+		this.mapCounter = 0;
+		this.mapping = new Map();
+	}
+
+	getTheme(): Theme {
+		const theme: ThemeRegistration = {
+			displayName: OBSIDIAN_THEME.displayName,
+			name: OBSIDIAN_THEME.name,
+			semanticHighlighting: OBSIDIAN_THEME.semanticHighlighting,
+			colors: Object.fromEntries(Object.entries(OBSIDIAN_THEME.colors).map(([key, value]) => [key, this.mapColor(value)])),
+			tokenColors: OBSIDIAN_THEME.tokenColors.map(token => {
+				const newToken = { ...token };
+
+				if (newToken.settings) {
+					newToken.settings = { ...newToken.settings };
+				}
+
+				if (newToken.settings.foreground) {
+					newToken.settings.foreground = this.mapColor(newToken.settings.foreground);
+				}
+
+				return newToken;
+			}),
+		};
+
+		const reverseMapping = this.getReverseMapping();
+
+		return {
+			theme: theme,
+			mapping: this.mapping,
+			reverseMapping: reverseMapping,
+		};
+	}
+
+	mapColor(color: string): string {
+		if (this.mapping.has(color)) {
+			return this.mapping.get(color)!;
+		} else {
+			const newColor = `#${this.mapCounter.toString(16).padStart(6, '0').toUpperCase()}`;
+			this.mapCounter += 1;
+			this.mapping.set(color, newColor);
+			return newColor;
+		}
+	}
+
+	private getReverseMapping(): Map<string, string> {
+		const reverseMapping = new Map<string, string>();
+		this.mapping.forEach((value, key) => {
+			reverseMapping.set(value, key);
+		});
+		return reverseMapping;
+	}
+
+	fixAST(ast: hast_util_to_html_lib_types.Parent): hast_util_to_html_lib_types.Parent {
+		ast.children = ast.children.map(child => {
+			if (child.type === 'element') {
+				return this.fixNode(child);
+			} else {
+				return child;
+			}
+		});
+
+		return ast;
+	}
+
+	private fixNode(node: hast_types.Element): hast_types.Element {
+		if (node.properties?.style) {
+			let style = node.properties.style as string;
+			console.log(style);
+			for (const [key, value] of this.mapping) {
+				style = style.replaceAll(value, key);
+			}
+			console.log(style);
+			node.properties.style = style;
+		}
+
+		for (const child of node.children) {
+			if (child.type === 'element') {
+				this.fixNode(child);
+			}
+		}
+
+		return node;
+	}
+}
+
+export const OBSIDIAN_THEME = {
 	displayName: 'Obsidian Theme',
 	name: 'obsidian-theme',
 	semanticHighlighting: true,
@@ -691,4 +790,4 @@ export const OBSIDIAN_THEME: ThemeInput = {
 		},
 	],
 	type: 'dark',
-};
+} satisfies ThemeRegistration;

src/ObsidianTheme.ts

@@ -1,32 +1,33 @@
 import { Plugin } from 'obsidian';
-import { bundledLanguages, getHighlighter } from 'shiki';
-import { OBSIDIAN_THEME } from 'src/ObsidianTheme';
+import { bundledLanguages } from 'shiki';
+import { ThemeMapper } from 'src/ObsidianTheme';
 import { ExpressiveCodeEngine, ExpressiveCodeTheme } from '@expressive-code/core';
 import { pluginShiki } from '@expressive-code/plugin-shiki';
 import { toHtml } from 'hast-util-to-html';
+import { pluginTextMarkers } from '@expressive-code/plugin-text-markers';
 
 // some languages break obsidian's `registerMarkdownCodeBlockProcessor`, so we blacklist them
 const languageNameBlacklist = new Set(['c++', 'c#', 'f#']);
 
 export default class ShikiPlugin extends Plugin {
 	async onload(): Promise<void> {
-		// const highlighter = await getHighlighter({
-		// 	themes: [OBSIDIAN_THEME],
-		// 	langs: Object.keys(bundledLanguages),
-		// });
-
-		const registeredLanguages = new Set<string>();
+		const themeMapper = new ThemeMapper();
+		const theme = themeMapper.getTheme();
 
 		const ec = new ExpressiveCodeEngine({
-			themes: [new ExpressiveCodeTheme(OBSIDIAN_THEME as any)],
+			themes: [new ExpressiveCodeTheme(theme.theme)],
 			plugins: [
 				pluginShiki({
-					langs: Object.entries(bundledLanguages).map(([_, langFn]) => langFn),
+					langs: Object.values(bundledLanguages),
 				}),
+				// pluginCollapsibleSections(),
+				pluginTextMarkers(),
+				// pluginLineNumbers(),
 			],
+			minSyntaxHighlightingColorContrast: 0,
 		});
 
-		console.log(ec);
+		const registeredLanguages = new Set<string>();
 
 		for (const [shikiLanguage, registration] of Object.entries(bundledLanguages)) {
 			// the last element of the array is seemingly the most recent version of the language
@@ -52,25 +53,16 @@ export default class ShikiPlugin extends Plugin {
 
 				// register the language with obsidian
 				this.registerMarkdownCodeBlockProcessor(languageAlias, async (source, el, ctx) => {
-					// yes, this is innerHTML, but we trust shiki
-					// and this is how shiki recommends using it
-					// https://shiki.style/guide/install#shorthands
-					// this is also async, against what eslint thinks
-					// eslint-disable-next-line @typescript-eslint/await-thenable
-					// el.innerHTML = await highlighter.codeToHtml(source, {
-					// 	lang: shikiLanguage,
-					// 	theme: 'obsidian-theme',
-					// 	meta: {
-					// 		__raw: '',
-					// 	},
-					// });
-
 					const rederResult = await ec.render({
 						code: source,
-						language: language.name,
+						language: shikiLanguage,
+						meta: '{1-2}',
 					});
 
-					el.innerHTML = toHtml(rederResult.renderedGroupAst);
+					const ast = themeMapper.fixAST(rederResult.renderedGroupAst);
+
+					// yes, this is innerHTML, but we trust hast
+					el.innerHTML = toHtml(ast);
 				});
 			}
 		}

src/main.ts

@@ -12,8 +12,23 @@ body {
 }
 
 /* Disable ligatures in code blocks, as they can cause incorrect highlighting */
-pre.shiki {
+div.expressive-code {
 	font-variant-ligatures: no-contextual;
+
+	div.ec-line {
+		span {
+			color: var(--0);
+			font-style: var(--0fs);
+		}
+
+		&.highlight {
+			background-color: var(--highlight);
+		}
+
+		&.mark {
+			--highlight: var(--background-modifier-hover);
+		}
+	}
 }
 
 /* Hide the frontmatter code block in reading view again */