refactor, feat: support notationHightligh (close #50), feat: editing in live preview (close #19, about #44)

.github/workflows/build.yml

@@ -0,0 +1,64 @@
+name: Node.js CI/CD Pipeline
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  build-obsidian:
+    runs-on: ubuntu-latest
+    steps:
+    - name: checkout repo
+      uses: actions/checkout@v4
+    - name: env use node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+    - name: Install Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+    - name: build
+      run: |
+        bun install
+        bun run build
+    - name: upload build artifact
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifact
+        path: |
+          manifest.json
+          main.js
+          styles.css
+
+  build-obsidian-min:
+    runs-on: ubuntu-latest
+    steps:
+    - name: checkout repo
+      uses: actions/checkout@v4
+    - name: env use node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+    - name: Install Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+    - name: build
+      run: |
+        bun install
+        bun run build-min
+        mv dist-min/main.js main.js
+    - name: upload build artifact
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: build-artifact-min
+        path: |
+          manifest.json
+          main.js
+          styles.css

automation/build/esbuild.config.min.ts

@@ -0,0 +1,55 @@
+import builtins from 'builtin-modules';
+import esbuild from 'esbuild';
+import { getBuildBanner } from 'build/buildBanner';
+import { nodeModulesPolyfillPlugin } from 'esbuild-plugins-node-modules-polyfill';
+
+const banner = getBuildBanner('Release Build', version => version);
+
+const build = await esbuild.build({
+	banner: {
+		js: banner,
+	},
+	entryPoints: ['src/main.min.ts'],
+	bundle: true,
+	external: [
+		'obsidian',
+		'electron',
+		'@codemirror/autocomplete',
+		'@codemirror/collab',
+		'@codemirror/commands',
+		'@codemirror/language',
+		'@codemirror/lint',
+		'@codemirror/search',
+		'@codemirror/state',
+		'@codemirror/view',
+		'@lezer/common',
+		'@lezer/highlight',
+		'@lezer/lr',
+		...builtins,
+	],
+	format: 'cjs',
+	target: 'es2018',
+	logLevel: 'info',
+	sourcemap: false,
+	treeShaking: true,
+	outfile: 'dist-min/main.js',
+	minify: true,
+	metafile: true,
+	define: {
+		MB_GLOBAL_CONFIG_DEV_BUILD: 'false',
+	},
+	plugins: [
+		nodeModulesPolyfillPlugin({
+			modules: {
+				fs: true,
+				path: true,
+				url: true,
+			},
+		}),
+	],
+});
+
+const file = Bun.file('meta.txt');
+await Bun.write(file, JSON.stringify(build.metafile, null, '\t'));
+
+process.exit(0);

bun.lock

@@ -17,8 +17,10 @@
         "@happy-dom/global-registrator": "^17.4.7",
         "@lemons_dev/parsinom": "^0.0.12",
         "@lezer/common": "^1.2.3",
+        "@shikijs/transformers": "^3.4.2",
         "@tsconfig/svelte": "^5.0.4",
         "@types/bun": "^1.2.13",
+        "@types/prismjs": "^1.26.5",
         "builtin-modules": "^5.0.0",
         "esbuild": "^0.25.4",
         "esbuild-plugin-copy-watch": "^2.3.1",
@@ -164,6 +166,8 @@
 
     "@shikijs/themes": ["@shikijs/[email protected]", "", { "dependencies": { "@shikijs/types": "3.4.2" } }, "sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg=="],
 
+    "@shikijs/transformers": ["@shikijs/[email protected]", "", { "dependencies": { "@shikijs/core": "3.4.2", "@shikijs/types": "3.4.2" } }, "sha512-I5baLVi/ynLEOZoWSAMlACHNnG+yw5HDmse0oe+GW6U1u+ULdEB3UHiVWaHoJSSONV7tlcVxuaMy74sREDkSvg=="],
+
     "@shikijs/types": ["@shikijs/[email protected]", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg=="],
 
     "@shikijs/vscode-textmate": ["@shikijs/[email protected]", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
@@ -184,6 +188,8 @@
 
     "@types/node": ["@types/[email protected]", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-KpSfKOHPsiSC4IkZeu2LsusFwExAIVGkhG1KkbaBMLwau0uMhj0fCrvyg9ddM2sAvd+gtiBJLir4LAw1MNMIaw=="],
 
+    "@types/prismjs": ["@types/[email protected]", "", {}, "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="],
+
     "@types/tern": ["@types/[email protected]", "", { "dependencies": { "@types/estree": "*" } }, "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw=="],
 
     "@types/unist": ["@types/[email protected]", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],

docs/README.md

@@ -0,0 +1,46 @@
+# More Document
+
+version: v0.5.1
+
+## SettingPanel Document
+
+### Rendering engine
+
+Shiki, PrismJS, CodeMirror
+
+- Shiki: A powerful code highlighting engine.
+  - More powerful functions, more themes and plugins
+  - Plugins: meta annotations, annotated annotations. Line highlighting, word highlighting, differentiated annotation, warning/error annotation
+  - Theme: Nearly 80 color schemes: You can visually select them at https://textmate-grammars-themes.netlify.app
+- PrismJS: The rendering engine that Obsidian uses by default in reading mode.
+  - When choosing this one, you can also select the min version of this plugin, which has a smaller plugin size and a faster loading speed
+  - It can be color-matched with code using obsidian themes and can be used in conjunction with some other obsidian stylization plugins
+- CodeMirror: Obsidian is the default rendering engine used in real-time mode. The current plugin is not supported
+  - It is suitable for real-time rendering and has acceptable performance
+  - However, the code analysis is rather rough, with a small number of highlighting layers and a poor effect
+
+### Rendering method
+
+- textarea: Allows real-time editing and offers a Typora-like WYSIWYG experience
+  - WARNING: Since this method allows for the editing of text content, it is best to use it when the warehouse is regularly backed up to avoid accidents
+- pre: Real-time editing is not allowed. The rendering effect is more similar to the textarea method
+- codemirror: The only supported method for V0.5.0 and earlier versions, which does not allow real-time editing
+
+## Shiki Extend Sytax
+
+see https://shiki.style/packages/transformers for detail
+
+This is a simple summary of grammar:
+
+- notaion
+  - diff:            `// [!code ++]` `// [!code --]`
+  - highlight:       `// [!code hl]` `// [!code highlight]`
+  - word highlight:  `// [!code word:<Word>:<number>]` `// [!code word:Hello:1]`
+  - focus:           `// [!code focus]`
+  - error level:     `// [!code error]` `// [!code warning]`
+  - (mul line):      `// [!code highlight:3]`
+- meta
+  - highlight:       `{1,3-4}`
+  - word highlight   `/<Word>/` `/Hello/`
+
+example: see [../README.md](../README.md) or [Shiki document](https://shiki.style/packages/transformers)

docs/README.zh.md

@@ -0,0 +1,46 @@
+# 更多文档
+
+version: v0.5.1
+
+## 设置面板文档
+
+### 渲染引擎
+
+Shiki, PrismJS，CodeMirror
+
+- Shiki: 一个强大的代码高亮引擎。
+  - 功能更加强大，更多主题和插件
+  - 插件: meta标注、注释型标注。行高亮、单词高亮、差异化标注、警告/错误标注
+  - 主题：近80种配色方案：你可以在 https://textmate-grammars-themes.netlify.app 中可视化选择
+- PrismJS: Obsidian默认在阅读模式中使用的渲染引擎。
+  - 当选择这个的时候，你也可以选用min版本的本插件，拥有更小的插件体积和更快的加载速度
+  - 可以与使用obsidian主题的代码配色，可以与一些其他的obsidian风格化插件配合
+- CodeMirror: Obsidian默认在实时模式中使用的渲染引擎。当前插件不支持
+  - 适合实时渲染，性能尚可
+  - 但代码分析比较粗糙，高亮层数少，效果较差
+
+### 渲染方式
+
+- textarea: 允许实时编辑，typora般的所见即所得的体验
+  - WARNING: 由于该方式允许编辑文本内容，最好能在仓库定期备份的情况下使用，避免意外
+- pre: 不允许实时编辑
+- codemirror: V0.5.0及之前唯一支持的方式，不允许实时编辑
+
+## Shiki扩展语法
+
+详见: https://shiki.style/packages/transformers (可切换至中文)
+
+这是个简单的语法总结:
+
+- notaion 注释型标注
+  - diff:            `// [!code ++]` `// [!code --]` 差异化
+  - highlight:       `// [!code hl]` `// [!code highlight]` 高亮
+  - word highlight:  `// [!code word:<Word>:<number>]` `// [!code word:Hello:1]` 单词高亮
+  - focus:           `// [!code focus]` 聚焦
+  - error level:     `// [!code error]` `// [!code warning]` 警告/错误
+  - (mul line):      `// [!code highlight:3]` (多行)
+- meta 元数据型标注
+  - highlight:       `{1,3-4}`
+  - word highlight   `/<Word>/` `/Hello/`
+
+示例: see [../README.md](../README.md) or [Shiki document](https://shiki.style/packages/transformers)

package.json

@@ -6,6 +6,7 @@
 	"scripts": {
 		"dev": "bun run automation/build/esbuild.dev.config.ts",
 		"build": "bun run tsc && bun run automation/build/esbuild.config.ts",
+		"build-min": "bun run tsc && bun run automation/build/esbuild.config.min.ts",
 		"tsc": "tsc -noEmit -skipLibCheck",
 		"test": "bun test",
 		"test:log": "LOG_TESTS=true bun test",
@@ -35,8 +36,10 @@
 		"@happy-dom/global-registrator": "^17.4.7",
 		"@lemons_dev/parsinom": "^0.0.12",
 		"@lezer/common": "^1.2.3",
+		"@shikijs/transformers": "^3.4.2",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/bun": "^1.2.13",
+		"@types/prismjs": "^1.26.5",
 		"builtin-modules": "^5.0.0",
 		"esbuild": "^0.25.4",
 		"esbuild-plugin-copy-watch": "^2.3.1",
@@ -53,4 +56,4 @@
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.32.1"
 	}
-}
+}

src/Highlighter.ts

@@ -179,6 +179,7 @@ export class CodeHighlighter {
 		this.shiki = await createHighlighter({
 			themes: [await this.themeMapper.getTheme()],
 			langs: this.customLanguages,
+
 		});
 	}