new release 1.6.5

Enable Click edit

.github/workflows/release.yml

@@ -22,7 +22,7 @@ jobs:
 
       - name: Install Dependencies
         run: |
-          npm config set registry http://registry.npmjs.org/
+          npm config set registry https://registry.npmjs.org/
           npm install
 
       - name: Build

CLAUDE.md

@@ -0,0 +1,94 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Obsidian-Pseudocode is an Obsidian plugin that renders LaTeX-style pseudocode inside code blocks. It uses pseudocode.js to convert LaTeX algorithmic constructs to HTML, with support for math formulas via KaTeX.
+
+## Build and Development Commands
+
+```bash
+# Development mode with file watching
+npm run dev
+
+# Production build (includes TypeScript type checking)
+npm run build
+
+# Version bump
+npm run version
+```
+
+## Architecture
+
+### Plugin Entry Point
+- `main.ts`: Core plugin class (`PseudocodePlugin`)
+  - Registers markdown code block processor for `pseudo` language
+  - Manages settings and preamble loading
+  - Handles theme observer lifecycle
+
+### Core Processing Flow
+1. User creates a code block with `pseudo` language specifier
+2. `pseudocodeHandler()` in main.ts processes the block:
+   - Extracts inline macros (before `\begin{algorithm}`)
+   - Combines with global preamble if enabled
+   - Injects preamble into all math expressions (`$...$`)
+   - Renders using pseudocode.js library
+   - Adds export button and applies theme
+
+### Key Modules
+
+**src/inline_macro.ts**
+- Separates inline macro definitions from algorithm content
+- Macros before `\begin{algorithm}` are treated as preamble
+
+**src/latex_translator.ts**
+- Converts unsupported LaTeX macros to KaTeX-compatible commands
+- Handles `\DeclarePairedDelimiter`, `\DeclareMathOperator*`, `\DeclareMathOperator`
+- Validates macros using KaTeX parser and converts `\newcommand` to `\renewcommand` when redefining
+
+**src/export_button.ts**
+- Creates "Export to clipboard" button for each pseudocode block
+- Generates compilable LaTeX document with required packages (algorithm, algpseudocodex, amsmath)
+- Includes both global and inline macros
+
+**src/theme.ts**
+- MutationObserver watches document.body for theme changes
+- Applies Obsidian theme colors (--background-primary, --text-normal) to pseudocode blocks
+- Updates .ps-root, .ps-algorithm, and border colors dynamically
+
+**src/setting_tab.ts**
+- UI for plugin settings (block size, preamble path, line numbers, theme following, etc.)
+
+**src/auto_complete.ts**
+- EditorSuggestor for autocomplete within `pseudo` code blocks
+
+### Build System
+- Uses esbuild (config in `esbuild.config.mjs`)
+- Bundles to CommonJS format targeting ES2018
+- Main entry: `main.ts` → `main.js`
+- External: Obsidian API, CodeMirror 6, Electron
+
+## Important Implementation Details
+
+### Preamble System
+- Global preamble: loaded from file (default `preamble.sty`)
+- Inline preamble: defined per-block before `\begin{algorithm}`
+- Preamble is injected into every math expression in the pseudocode
+- Must reload plugin after changing global preamble file
+
+### Theme Integration
+- When `followSystemTheme` is enabled, plugin observes Obsidian theme changes
+- CSS custom properties are read from document.body and applied to rendered pseudocode
+- Observer must be detached on plugin unload to prevent memory leaks
+
+### Error Handling
+- Pseudocode rendering errors display in-block with ✖ symbol
+- Preamble loading failures show Notice to user
+- Invalid LaTeX in preamble is caught and logged to console
+
+## Dependencies
+- `pseudocode`: Uses forked version from ytliu74/pseudocode.js#master
+- `katex`: Fixed at 0.11.1 for macro rendering
+- `obsidian`: Latest API
+- TypeScript 4.7.4 with strict null checks enabled

README.md

@@ -22,6 +22,7 @@ This is a plugin for [Obsidian](https://obsidian.md/) that allows you to render
 - Auto-completion inside `pseudo` code block. (Release 1.1.0)
 - [Preamble style (macros) customization.](#preamble-style-customization) (Release 1.2.0 & 1.5.0)
 - [Export a LaTeX file that can be compiled, including any required additional macros.](#export-to-a-compilable-latex-file) (Release 1.3.0)
+- Pseudocode block follows Obsidian theme and supports both light and dark ones. (Release 1.6.0)
 
 ### Future Features
 

main.ts

@@ -14,6 +14,7 @@ import {
 } from "src/latex_translator";
 import { createExportButton } from "src/export_button";
 import { extractInlineMacros } from "src/inline_macro";
+import { setObserver, detachObserver, setPseudocodeTheme } from "src/theme";
 
 import * as pseudocode from "pseudocode";
 
@@ -29,6 +30,15 @@ export default class PseudocodePlugin extends Plugin {
 		const blockDiv = el.createDiv({ cls: "pseudocode-block" });
 		const blockWidth = this.settings.blockSize;
 		blockDiv.style.width = `${blockWidth}em`;
+		blockDiv.addEventListener("click", (event) => {
+            const target = (event.target as HTMLElement | null);
+            if(target && target.tagName !== 'BUTTON')
+                (target
+                    .closest('.pseudocode-block')
+                    ?.parentElement?.parentElement
+                    ?.querySelector('.edit-block-button') as HTMLElement | null)
+                    ?.click();
+		});
 
 		// Extract inline macros
 		const [inlineMacros, nonMacroLines] = extractInlineMacros(source);
@@ -58,11 +68,18 @@ export default class PseudocodePlugin extends Plugin {
 			blockDiv.empty();
 			blockDiv.appendChild(errorSpan);
 		}
+
+		// Set the pseudocode theme
+		if (this.settings.followSystemTheme) {
+			setPseudocodeTheme(blockDiv);
+		}
 	}
 
 	async onload() {
 		await this.loadSettings();
 
+		setObserver();
+
 		if (this.settings.preambleEnabled) {
 			console.log("Preamble is enabled.");
 			await this.loadPreamble();
@@ -89,7 +106,9 @@ export default class PseudocodePlugin extends Plugin {
 		});
 	}
 
-	onunload() {}
+	onunload() {
+		detachObserver();
+	}
 
 	async loadPreamble() {
 		try {

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "pseudocode-in-obs",
 	"name": "Pseudocode",
-	"version": "1.5.6",
+	"version": "1.6.5",
 	"minAppVersion": "0.15.0",
 	"description": "This is an obsidian plugin that helps to render a LaTeX-style pseudocode inside a code block.",
 	"author": "Yaotian Liu",

package-lock.json

@@ -1,16 +1,16 @@
 {
 	"name": "pseudocode-in-obs",
-	"version": "1.5.4",
+	"version": "1.6.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "pseudocode-in-obs",
-			"version": "1.5.4",
+			"version": "1.6.4",
 			"license": "MIT",
 			"dependencies": {
 				"katex": "0.11.1",
-				"pseudocode": "ytliu74/pseudocode.js#master"
+				"pseudocode": "github:ytliu74/pseudocode.js#master"
 			},
 			"devDependencies": {
 				"@types/katex": "0.11.1",
@@ -1888,7 +1888,7 @@
 		},
 		"node_modules/pseudocode": {
 			"version": "2.3.0",
-			"resolved": "git+ssh://git@github.com/ytliu74/pseudocode.js.git#4ac293a977b191d66b3cba640804814651c95aaf",
+			"resolved": "git+ssh://git@github.com/ytliu74/pseudocode.js.git#db17188d06528b12b3279f4f1025c1a978519d1e",
 			"license": "MIT"
 		},
 		"node_modules/punycode": {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pseudocode-in-obs",
-	"version": "1.5.6",
+	"version": "1.6.5",
 	"description": "This is an obsidian plugin that helps to render a LaTeX-style pseudocode inside a code block.",
 	"main": "main.js",
 	"scripts": {
@@ -12,6 +12,7 @@
 	"author": "",
 	"license": "MIT",
 	"devDependencies": {
+		"@types/katex": "0.11.1",
 		"@types/node": "^16.11.6",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
@@ -19,11 +20,10 @@
 		"esbuild": "0.17.3",
 		"obsidian": "latest",
 		"tslib": "2.4.0",
-		"typescript": "4.7.4",
-		"@types/katex": "0.11.1"
+		"typescript": "4.7.4"
 	},
 	"dependencies": {
-		"pseudocode": "ytliu74/pseudocode.js#master",
-		"katex": "0.11.1"
+		"katex": "0.11.1",
+		"pseudocode": "github:ytliu74/pseudocode.js#master"
 	}
 }

src/auto_complete.ts

@@ -106,8 +106,10 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
 		"\\Procedure{}{}": "\\EndProcedure",
 		"\\Function{}{}": "\\EndFunction",
 		"\\For{}": "\\EndFor",
+		"\\ForAll{}": "\\EndFor",
 		"\\If{}": "\\EndIf",
 		"\\While{}": "\\EndWhile",
+		"\\Repeat": "\\Until{}",
 		// Add more pairs as needed
 	};
 
@@ -129,6 +131,7 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
 		"\\Return",
 		"\\Print",
 		"\\For{}",
+		"\\ForAll{}",
 		"\\EndFor",
 		"\\If{}",
 		"\\Else",

src/setting.ts

@@ -15,6 +15,7 @@ export interface PseudocodeSettings {
 	preambleEnabled: boolean;
 	preamblePath: string;
 	preambleLoadedNotice: boolean;
+	followSystemTheme: boolean;
 	jsSettings: PseudocodeJsSettings;
 }
 
@@ -23,6 +24,7 @@ export const DEFAULT_SETTINGS: PseudocodeSettings = {
 	preambleEnabled: false,
 	preamblePath: "preamble.sty",
 	preambleLoadedNotice: false,
+	followSystemTheme: false,
 	jsSettings: {
 		indentSize: "1.2em",
 		commentDelimiter: "//",

src/setting_tab.ts

@@ -1,4 +1,5 @@
 import { App, PluginSettingTab, Setting } from "obsidian";
+import { setObserver, detachObserver } from "./theme";
 
 import PseudocodePlugin from "main";
 
@@ -36,6 +37,24 @@ export class PseudocodeSettingTab extends PluginSettingTab {
 					})
 			);
 
+		// Instantiate Follow System Theme setting
+		new Setting(containerEl)
+			.setName("Follow System Theme")
+			.setDesc("Whether to follow the system theme.")
+			.addToggle((toggle) =>
+				toggle
+					.setValue(this.plugin.settings.followSystemTheme)
+					.onChange(async (value) => {
+						this.plugin.settings.followSystemTheme = value;
+						if (value) {
+							setObserver();
+						} else {
+							detachObserver();
+						}
+						await this.plugin.saveSettings();
+					})
+			);
+
 		// Instantiate Indent Size setting
 		new Setting(containerEl)
 			.setName("Indent Size")

src/theme.ts

@@ -0,0 +1,77 @@
+// Reference: https://forum.obsidian.md/t/obsidian-publish-api-how-to-track-changing-theme/73637/4
+
+export const themeObserver = new MutationObserver(function (mutations) {
+	mutations.forEach(function (mutation) {
+		const target = mutation.target as HTMLElement;
+		if (
+			// dark -> dark & light -> light
+			mutation.oldValue?.contains("theme-dark") &&
+			!mutation.oldValue?.contains("theme-light") && // key line, avoid calling twice
+			target.classList.value.contains("theme-light")
+		) {
+			console.log("light theme detected");
+			setPseudocodeTheme();
+		} else if (
+			// light -> empty -> dark
+			mutation.oldValue?.contains("theme-light") && // key line, avoid calling twice
+			!mutation.oldValue?.contains("theme-dark") &&
+			target.classList.value.contains("theme-dark")
+		) {
+			console.log("dark theme detected");
+			setPseudocodeTheme();
+		}
+	});
+});
+
+export function setPseudocodeTheme(psBlock?: Element) {
+
+	const bodyElement = document.body;
+	const backgroundValue = getComputedStyle(bodyElement)
+		.getPropertyValue("--background-primary")
+		.trim();
+	const fontValue = getComputedStyle(bodyElement)
+		.getPropertyValue("--text-normal")
+		.trim();
+	console.log(backgroundValue, fontValue);
+
+	const psRootElements = psBlock
+		? psBlock.querySelectorAll(".ps-root")
+		: document.querySelectorAll(".ps-root");
+	// console.log(psRootElements);
+
+	// Loop through each element and modify the CSS properties
+	psRootElements.forEach((element) => {
+		const htmlElement = element as HTMLElement;
+		htmlElement.style.backgroundColor = backgroundValue;
+		htmlElement.style.opacity = "1";
+		htmlElement.style.color = fontValue;
+
+		// Change border colors for .ps-algorithm and .ps-algorithm.with-caption > .ps-line:first-child
+		const algorithmElements = htmlElement.querySelectorAll(".ps-algorithm");
+		algorithmElements.forEach((algElement) => {
+			const algHtmlElement = algElement as HTMLElement;
+			algHtmlElement.style.borderTopColor = fontValue;
+			algHtmlElement.style.borderBottomColor = fontValue;
+		});
+
+		const lineElements = htmlElement.querySelectorAll(
+			".ps-algorithm.with-caption > .ps-line:first-child"
+		);
+		lineElements.forEach((lineElement) => {
+			const lineHtmlElement = lineElement as HTMLElement;
+			lineHtmlElement.style.borderBottomColor = fontValue;
+		});
+	});
+}
+
+export const setObserver = () => {
+	themeObserver.observe(document.body, {
+		attributes: true,
+		attributeOldValue: true,
+		attributeFilter: ["class"],
+	});
+};
+
+export const detachObserver = () => {
+	themeObserver.disconnect();
+};

styles.css

@@ -1399,12 +1399,22 @@ If your plugin does not need CSS, delete this file.
 	text-transform: none;
 }
 
-.ps-root .ps-comment {
-	font-family: KaTeX_Main, "Times New Roman", Times, serif;
-	font-weight: 400;
-	font-variant: normal;
-	font-style: normal;
-	text-transform: none;
+.ps-root {
+        font-family: KaTeX_Main, "Times New Roman", Times, serif;
+        font-weight: 400;
+        font-variant: normal;
+        font-style: normal;
+        text-transform: none;
+}
+
+.ps-comment {
+        font-family: KaTeX_Main, "Times New Roman", Times, serif;
+        font-weight: 400;
+        font-variant: normal;
+        font-style: italic;
+        text-transform: none;
+        opacity: 70%;
+        float: right;
 }
 
 .ps-root .ps-linenum {
@@ -1468,4 +1478,4 @@ If your plugin does not need CSS, delete this file.
 	background-color: white;
 	opacity: 1;
 	color: black;
-}
+}

versions.json

@@ -29,5 +29,13 @@
 	"1.5.3": "0.15.0",
 	"1.5.4": "0.15.0",
 	"1.5.5": "0.15.0",
-	"1.5.6": "0.15.0"
+	"1.5.6": "0.15.0",
+	"1.5.7": "0.15.0",
+	"1.5.8": "0.15.0",
+	"1.6.0": "0.15.0",
+	"1.6.1": "0.15.0",
+	"1.6.2": "0.15.0",
+	"1.6.3": "0.15.0",
+	"1.6.4": "0.15.0",
+	"1.6.5": "0.15.0"
 }