Compare commits

..

No commits in common. "master" and "1.5.5" have entirely different histories.

13 changed files with 21 additions and 275 deletions

View file

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

View file

@ -1,94 +0,0 @@
# 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

View file

@ -22,7 +22,6 @@ 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

21
main.ts
View file

@ -14,7 +14,6 @@ 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";
@ -30,15 +29,6 @@ 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);
@ -68,18 +58,11 @@ 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();
@ -106,9 +89,7 @@ export default class PseudocodePlugin extends Plugin {
});
}
onunload() {
detachObserver();
}
onunload() {}
async loadPreamble() {
try {

View file

@ -1,7 +1,7 @@
{
"id": "pseudocode-in-obs",
"name": "Pseudocode",
"version": "1.6.5",
"version": "1.5.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",

8
package-lock.json generated
View file

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

View file

@ -1,6 +1,6 @@
{
"name": "pseudocode-in-obs",
"version": "1.6.5",
"version": "1.5.5",
"description": "This is an obsidian plugin that helps to render a LaTeX-style pseudocode inside a code block.",
"main": "main.js",
"scripts": {
@ -12,7 +12,6 @@
"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",
@ -20,10 +19,11 @@
"esbuild": "0.17.3",
"obsidian": "latest",
"tslib": "2.4.0",
"typescript": "4.7.4"
"typescript": "4.7.4",
"@types/katex": "0.11.1"
},
"dependencies": {
"katex": "0.11.1",
"pseudocode": "github:ytliu74/pseudocode.js#master"
"pseudocode": "ytliu74/pseudocode.js#master",
"katex": "0.11.1"
}
}

View file

@ -81,16 +81,7 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
const start = this.context.start;
const end = editor.getCursor();
const pairSuggestion = this.pairSuggestions[suggestion];
let insertText = suggestion;
if (pairSuggestion) {
const line = editor.getLine(start.line);
const indentMatch = line.match(/^(\s*)/)?.[0] ?? "";
const indent = indentMatch.replace(/\t/g, " "); // replace each tab with four spaces
insertText += "\n" + indent + pairSuggestion;
}
editor.replaceRange(insertText, start, end);
editor.replaceRange(suggestion, start, end);
const newCursor = end;
newCursor.ch = start.ch + suggestion.length;
@ -100,19 +91,6 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
}
}
private pairSuggestions: Record<string, string> = {
"\\begin{algorithmic}": "\\end{algorithmic}",
"\\begin{algorithm}": "\\end{algorithm}",
"\\Procedure{}{}": "\\EndProcedure",
"\\Function{}{}": "\\EndFunction",
"\\For{}": "\\EndFor",
"\\ForAll{}": "\\EndFor",
"\\If{}": "\\EndIf",
"\\While{}": "\\EndWhile",
"\\Repeat": "\\Until{}",
// Add more pairs as needed
};
private pseudocodeKeywords: string[] = [
"\\begin{algorithmic}",
"\\begin{algorithm}",
@ -131,7 +109,6 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
"\\Return",
"\\Print",
"\\For{}",
"\\ForAll{}",
"\\EndFor",
"\\If{}",
"\\Else",

View file

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

View file

@ -1,5 +1,4 @@
import { App, PluginSettingTab, Setting } from "obsidian";
import { setObserver, detachObserver } from "./theme";
import PseudocodePlugin from "main";
@ -37,24 +36,6 @@ 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")

View file

@ -1,77 +0,0 @@
// 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();
};

View file

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

View file

@ -28,14 +28,5 @@
"1.5.2": "0.15.0",
"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.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"
"1.5.5": "0.15.0"
}