move some things

Author: mProjectsCode

src/Highlighter.ts

@@ -1,6 +1,15 @@
 import { ExpressiveCodeEngine, ExpressiveCodeTheme } from '@expressive-code/core';
 import type ShikiPlugin from 'src/main';
-import { bundledLanguages, createHighlighter, type DynamicImportLanguageRegistration, type LanguageRegistration, type Highlighter } from 'shiki/index.mjs';
+import {
+	bundledLanguages,
+	createHighlighter,
+	type DynamicImportLanguageRegistration,
+	type LanguageRegistration,
+	type Highlighter,
+	type TokensResult,
+	type BundledLanguage,
+	type ThemedToken,
+} from 'shiki/index.mjs';
 import { ThemeMapper } from 'src/themes/ThemeMapper';
 import { pluginShiki } from '@expressive-code/plugin-shiki';
 import { pluginCollapsibleSections } from '@expressive-code/plugin-collapsible-sections';
@@ -178,6 +187,20 @@ export class CodeHighlighter {
 		return this.plugin.loadedSettings.theme.endsWith('.json');
 	}
 
+	/**
+	 * Returns a list of languages registrations that need to be loaded into Shiki and EC.
+	 */
+	getLoadedLanguageRegistrations(): (DynamicImportLanguageRegistration | LanguageRegistration)[] {
+		return [...Object.values(bundledLanguages), ...this.customLanguages];
+	}
+
+	/**
+	 * All languages that are safe to use with Obsidian's `registerMarkdownCodeBlockProcessor`.
+	 */
+	obsidianSafeLanguageNames(): string[] {
+		return this.loadedLanguages.filter(lang => !languageNameBlacklist.has(lang));
+	}
+
 	/**
 	 * Highlights code with EC and renders it to the passed container element.
 	 */
@@ -191,11 +214,36 @@ export class CodeHighlighter {
 		container.innerHTML = toHtml(this.themeMapper.fixAST(result.renderedGroupAst));
 	}
 
-	getLoadedLanguageRegistrations(): (DynamicImportLanguageRegistration | LanguageRegistration)[] {
-		return [...Object.values(bundledLanguages), ...this.customLanguages];
+	getHighlightTokens(code: string, lang: string): TokensResult | undefined {
+		if (!this.obsidianSafeLanguageNames().includes(lang)) {
+			return undefined;
+		}
+
+		return this.shiki.codeToTokens(code, {
+			lang: lang as BundledLanguage,
+			theme: this.plugin.settings.theme,
+		});
 	}
 
-	obsidianSafeLanguageNames(): string[] {
-		return this.loadedLanguages.filter(lang => !languageNameBlacklist.has(lang));
+	tokenToSpan(token: ThemedToken, parent: HTMLElement): void {
+		const tokenStyle = this.getTokenStyle(token);
+		parent.createSpan({
+			text: token.content,
+			cls: tokenStyle.classes.join(' '),
+			attr: { style: tokenStyle.style },
+		});
+	}
+
+	getTokenStyle(token: ThemedToken): { style: string; classes: string[] } {
+		const fontStyle = token.fontStyle ?? 0;
+
+		return {
+			style: `color: ${token.color}`,
+			classes: [
+				(fontStyle & 1) !== 0 ? 'shiki-italic' : undefined,
+				(fontStyle & 2) !== 0 ? 'shiki-bold' : undefined,
+				(fontStyle & 4) !== 0 ? 'shiki-ul' : undefined,
+			].filter(Boolean) as string[],
+		};
 	}
 }

src/codemirror/Cm6_ViewPlugin.ts

@@ -202,7 +202,7 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 			 * @param content
 			 */
 			buildDecorations(from: number, to: number, language: string, content: string): Range<Decoration>[] {
-				const highlight = plugin.getHighlightTokens(content, language);
+				const highlight = plugin.highlighter.getHighlightTokens(content, language);
 
 				if (!highlight) {
 					return [];
@@ -216,7 +216,7 @@ export function createCm6Plugin(plugin: ShikiPlugin) {
 					const token = tokens[i];
 					const nextToken: ThemedToken | undefined = tokens[i + 1];
 
-					const tokenStyle = plugin.getTokenStyle(token);
+					const tokenStyle = plugin.highlighter.getTokenStyle(token);
 
 					decorations.push(
 						Decoration.mark({

src/main.ts

@@ -1,5 +1,4 @@
 import { loadPrism, Plugin, TFile, type MarkdownPostProcessor } from 'obsidian';
-import { type BundledLanguage, type ThemedToken, type TokensResult } from 'shiki';
 import { CodeBlock } from 'src/CodeBlock';
 import { createCm6Plugin } from 'src/codemirror/Cm6_ViewPlugin';
 import { DEFAULT_SETTINGS, type Settings } from 'src/settings/Settings';
@@ -111,7 +110,7 @@ export default class ShikiPlugin extends Plugin {
 			for (let codeElm of inlineCodes) {
 				let match = codeElm.textContent?.match(SHIKI_INLINE_REGEX); // format: `{lang} code`
 				if (match) {
-					const highlight = this.getHighlightTokens(match[2], match[1]);
+					const highlight = this.highlighter.getHighlightTokens(match[2], match[1]);
 					const tokens = highlight?.tokens.flat(1);
 					if (!tokens?.length) {
 						continue;
@@ -121,7 +120,7 @@ export default class ShikiPlugin extends Plugin {
 					codeElm.addClass('shiki-inline');
 
 					for (let token of tokens) {
-						this.tokenToSpan(token, codeElm);
+						this.highlighter.tokenToSpan(token, codeElm);
 					}
 				}
 			}
@@ -153,39 +152,6 @@ export default class ShikiPlugin extends Plugin {
 		}
 	}
 
-	getHighlightTokens(code: string, lang: string): TokensResult | undefined {
-		if (!this.highlighter.obsidianSafeLanguageNames().includes(lang)) {
-			return undefined;
-		}
-
-		return this.highlighter.shiki.codeToTokens(code, {
-			lang: lang as BundledLanguage,
-			theme: this.settings.theme,
-		});
-	}
-
-	tokenToSpan(token: ThemedToken, parent: HTMLElement): void {
-		const tokenStyle = this.getTokenStyle(token);
-		parent.createSpan({
-			text: token.content,
-			cls: tokenStyle.classes.join(' '),
-			attr: { style: tokenStyle.style },
-		});
-	}
-
-	getTokenStyle(token: ThemedToken): { style: string; classes: string[] } {
-		let fontStyle = token.fontStyle ?? 0;
-
-		return {
-			style: `color: ${token.color}`,
-			classes: [
-				(fontStyle & 1) !== 0 ? 'shiki-italic' : undefined,
-				(fontStyle & 2) !== 0 ? 'shiki-bold' : undefined,
-				(fontStyle & 4) !== 0 ? 'shiki-ul' : undefined,
-			].filter(Boolean) as string[],
-		};
-	}
-
 	async loadSettings(): Promise<void> {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()) as Settings;
 	}