some more tweaks

Author: mProjectsCode

exampleVault/index.md

@@ -4,7 +4,7 @@ test: hello
 
 TypeScript code
 
-```ts title="A part of ParsiNOM" {13-15}
+```ts title="A part of ParsiNOM" {13-15, 22-29} showLineNumbers
 export class Parser<const SType extends STypeBase> {
 	public p: ParseFunction<SType>;
 
@@ -62,7 +62,7 @@ input:is([data-task="字"], [data-task="字"] > *):checked::after {
 
 Bash
 
-```bash title="My Bash Script"
+```bash title="Other Title"
 echo "Hello"
 ```
 

src/CodeBlock.ts

@@ -1,4 +1,4 @@
-import { MarkdownRenderChild, type MarkdownSectionInformation } from 'obsidian';
+import { type MarkdownPostProcessorContext, MarkdownRenderChild } from 'obsidian';
 import type ShikiPlugin from 'src/main';
 import { toHtml } from 'hast-util-to-html';
 
@@ -7,32 +7,29 @@ export class CodeBlock extends MarkdownRenderChild {
 	source: string;
 	language: string;
 	languageShorthand: string;
-	sectionInfo: MarkdownSectionInformation | null;
-
-	constructor(
-		plugin: ShikiPlugin,
-		containerEl: HTMLElement,
-		source: string,
-		language: string,
-		languageShorthand: string,
-		sectionInfo: MarkdownSectionInformation | null,
-	) {
+	ctx: MarkdownPostProcessorContext;
+	cachedMetaString: string;
+
+	constructor(plugin: ShikiPlugin, containerEl: HTMLElement, source: string, language: string, languageShorthand: string, ctx: MarkdownPostProcessorContext) {
 		super(containerEl);
 
 		this.plugin = plugin;
 		this.source = source;
 		this.language = language;
 		this.languageShorthand = languageShorthand;
-		this.sectionInfo = sectionInfo;
+		this.ctx = ctx;
+		this.cachedMetaString = '';
 	}
 
-	getMetaString(): string {
-		if (this.sectionInfo === null) {
+	private getMetaString(): string {
+		const sectionInfo = this.ctx.getSectionInfo(this.containerEl);
+
+		if (sectionInfo === null) {
 			return '';
 		}
 
-		const lines = this.sectionInfo.text.split('\n');
-		const startLine = lines[this.sectionInfo.lineStart];
+		const lines = sectionInfo.text.split('\n');
+		const startLine = lines[sectionInfo.lineStart];
 
 		// regexp to match the text after the code block language
 		const regex = new RegExp('^[^`~]*?(```+|~~~+)' + this.languageShorthand + ' (.*)', 'g');
@@ -44,11 +41,7 @@ export class CodeBlock extends MarkdownRenderChild {
 		}
 	}
 
-	public async onload(): Promise<void> {
-		super.onload();
-
-		const metaString = this.getMetaString();
-
+	private async render(metaString: string): Promise<void> {
 		const renderResult = await this.plugin.ec.render({
 			code: this.source,
 			language: this.language,
@@ -61,7 +54,32 @@ export class CodeBlock extends MarkdownRenderChild {
 		this.containerEl.innerHTML = toHtml(ast);
 	}
 
+	public async rerenderOnNoteChange(): Promise<void> {
+		// compare the new meta string to the cached one
+		// only rerender if they are different, to avoid unnecessary work
+		// since the meta string is likely to be the same most of the time
+		// and if the code block content changes obsidian will rerender for us
+		const newMetaString = this.getMetaString();
+		if (newMetaString !== this.cachedMetaString) {
+			this.cachedMetaString = newMetaString;
+			await this.render(newMetaString);
+		}
+	}
+
+	public async onload(): Promise<void> {
+		super.onload();
+
+		this.plugin.addActiveCodeBlock(this);
+
+		this.cachedMetaString = this.getMetaString();
+		await this.render(this.cachedMetaString);
+	}
+
 	public onunload(): void {
+		super.onunload();
+
+		this.plugin.removeActiveCodeBlock(this);
+
 		this.containerEl.empty();
 		this.containerEl.innerText = 'unloaded shiki code block';
 	}

src/main.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'obsidian';
+import { Plugin, TFile } from 'obsidian';
 import { bundledLanguages } from 'shiki';
 import { ExpressiveCodeEngine, ExpressiveCodeTheme } from '@expressive-code/core';
 import { pluginShiki } from '@expressive-code/plugin-shiki';
@@ -20,13 +20,33 @@ export default class ShikiPlugin extends Plugin {
 	ec: ExpressiveCodeEngine;
 	// @ts-expect-error TS2564
 	ecElements: HTMLElement[];
+	// @ts-expect-error TS2564
+	activeCodeBlocks: Map<string, CodeBlock[]>;
 
 	async onload(): Promise<void> {
 		this.themeMapper = new ThemeMapper();
+		this.activeCodeBlocks = new Map();
 
 		await this.loadEC();
 
 		await this.registerCodeBlockProcessors();
+
+		// this is a workaround for the fact that obsidian does not rerender the code block
+		// when the start line with the language changes, and we need that for the EC meta string
+		this.registerEvent(
+			this.app.vault.on('modify', async file => {
+				// sleep 0 so that the code block context is updated before we rerender
+				await sleep(100);
+
+				if (file instanceof TFile) {
+					if (this.activeCodeBlocks.has(file.path)) {
+						for (const codeBlock of this.activeCodeBlocks.get(file.path)!) {
+							void codeBlock.rerenderOnNoteChange();
+						}
+					}
+				}
+			}),
+		);
 	}
 
 	async loadEC(): Promise<void> {
@@ -44,6 +64,9 @@ export default class ShikiPlugin extends Plugin {
 			styleOverrides: EC_THEME,
 			minSyntaxHighlightingColorContrast: 0,
 			themeCssRoot: 'div.expressive-code',
+			defaultProps: {
+				showLineNumbers: false,
+			},
 		});
 
 		this.ecElements = [];
@@ -84,7 +107,7 @@ export default class ShikiPlugin extends Plugin {
 
 				// register the language with obsidian
 				this.registerMarkdownCodeBlockProcessor(languageAlias, async (source, el, ctx) => {
-					const codeBlock = new CodeBlock(this, el, source, shikiLanguage, languageAlias, ctx.getSectionInfo(el));
+					const codeBlock = new CodeBlock(this, el, source, shikiLanguage, languageAlias, ctx);
 
 					ctx.addChild(codeBlock);
 				});
@@ -102,4 +125,25 @@ export default class ShikiPlugin extends Plugin {
 		}
 		this.ecElements = [];
 	}
+
+	addActiveCodeBlock(codeBlock: CodeBlock): void {
+		const filePath = codeBlock.ctx.sourcePath;
+
+		if (!this.activeCodeBlocks.has(filePath)) {
+			this.activeCodeBlocks.set(filePath, [codeBlock]);
+		} else {
+			this.activeCodeBlocks.get(filePath)!.push(codeBlock);
+		}
+	}
+
+	removeActiveCodeBlock(codeBlock: CodeBlock): void {
+		const filePath = codeBlock.ctx.sourcePath;
+
+		if (this.activeCodeBlocks.has(filePath)) {
+			const index = this.activeCodeBlocks.get(filePath)!.indexOf(codeBlock);
+			if (index !== -1) {
+				this.activeCodeBlocks.get(filePath)!.splice(index, 1);
+			}
+		}
+	}
 }