mirror of
https://github.com/ytliu74/obsidian-pseudocode.git
synced 2026-07-22 07:40:25 +00:00
Compare commits
No commits in common. "master" and "1.5.4" have entirely different histories.
13 changed files with 21 additions and 278 deletions
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
|
|
@ -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
|
||||
|
|
|
|||
94
CLAUDE.md
94
CLAUDE.md
|
|
@ -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
|
||||
|
|
@ -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
21
main.ts
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"id": "pseudocode-in-obs",
|
||||
"name": "Pseudocode",
|
||||
"version": "1.6.5",
|
||||
"version": "1.5.4",
|
||||
"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
8
package-lock.json
generated
|
|
@ -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": {
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "pseudocode-in-obs",
|
||||
"version": "1.6.5",
|
||||
"version": "1.5.4",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
@ -140,8 +117,6 @@ export class PseudocodeSuggestor extends EditorSuggest<string> {
|
|||
"\\While{}",
|
||||
"\\EndWhile",
|
||||
"\\Repeat",
|
||||
"\\Continue",
|
||||
"\\Break",
|
||||
"\\Until{}",
|
||||
"\\Comment{}",
|
||||
"\\{",
|
||||
|
|
|
|||
|
|
@ -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: "//",
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
77
src/theme.ts
77
src/theme.ts
|
|
@ -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();
|
||||
};
|
||||
24
styles.css
24
styles.css
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,15 +27,5 @@
|
|||
"1.5.1": "0.15.0",
|
||||
"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.4": "0.15.0"
|
||||
}
|
||||
Loading…
Reference in a new issue