+WikiLinkAutoHint, +CompileSystem +README

Author: Gk0Wk

Makefile

@@ -0,0 +1,7 @@
+all: build
+
+build:
+	python3 ./build.py
+
+clean:
+	rm -rf ./dist

README.md

@@ -1,31 +1,71 @@
 # CodeMirror-Mode-TiddlyWiki5
 
-Adds Syntax Highlighting for TiddlyWiki tiddlers (text/vnd.tiddlywiki) to the CodeMirror.
+Adds Syntax Highlighting for TiddlyWiki5 tiddlers (`text/vnd.tiddlywiki`) to the CodeMirror, along with some other useful editor addon (wikilink hint, macro hint, etc.). Now is under development.
+
+为TiddlyWiki的CodeMirror编辑器添加TiddlyWiki5(`text/vnd.tiddlywiki`)语法高亮，同时还有其他有用的编辑器插件(如Wiki链接自动提示、宏提示等)。现在正在开发中。
+
+[> English Readme <](https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/blob/main/README_en.md)
+
+---
+
+[TOC]
 
-![default](media/default.jpg)
-![ayu-dark](media/ayu-dark.jpg)
-![tiddlywiki](media/tiddlywiki.jpg)
 ## 插件说明
 
-增加 [CodeMirror](http://codemirror.net) 对TiddlyWiki5语法高亮的支持，所有类型留空或者为`text/vnd.tiddlywiki`的tiddler都会有高亮。请首先安装最新版CodeMirror主插件和CodeMirror XML子插件(不然会报错)。
+增加 [CodeMirror](http://codemirror.net) 对TiddlyWiki5语法高亮的支持，所有MIME类型留空或者为`text/vnd.tiddlywiki`的tiddler都会有高亮。同时支持像`VSCode`那样在打字时实时进行代码补全提示(目前仅实现了WikiLink补全)，且**不需要**用`Ctrl+Space`激活。
 
 插件还在开发中，如有任何建议或者bug请直接提Issue。
 
+## 安装&编译
+
+<span style="color: red; font-weight: 900;">请首先安装最新版CodeMirror主插件和CodeMirror XML子插件(不然会报错)。</span>
+
+直接去[Release](https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/releases)下载`CodeMirrorModeTiddlyWiki5-X.X.X.json`，然后将其拖拽到你的TiddlyWiki中，或者在TiddlyWiki中导入之。
+
 如果插件报错了，不必惊慌，因为插件不会对TiddlyWiki本体内容做修改，所以只需要卸载就能够消除问题，但保险起见**还是建议先备份再安装**。
 
+如果想DIY和编译，请直接运行`make`或者`make build`。请注意，被打包的是那几个`xxx.min.js`和`xxx.min.css`。
+
+## 功能介绍
+
+<details>
+<summary>高亮TiddlyWiki5语法，支持内嵌代码块和LaTeX的语法高亮</summary>
+
+Default:
+![default](media/mode-default.jpg)
+
+Ayu-Dark:
+![ayu-dark](media/mode-ayu-dark.jpg)
+
+TiddlyWiki:
+![tiddlywiki](media/mode-tiddlywiki.jpg)
+
+</details>
+
+注意：这些主题有些是我自己装的，如感兴趣换主题，请阅读TiddlyWiki的CodeMirror的README。
+
+<details>
+<summary>WikiLink自动补全提示</summary>
+
+![wikilink-hint](media/wikilink-hint.gif)
+
+</details>
+
+其他功能正在开发中。
+
 ## 开发感想
 
-在使用TiddlyWiki之后，一直苦于TiddlyWiki5语法没有高亮支持，写作体验不是很好。之前有也在网上找到一些相关的解决办法，例如在[Google Group](https://groups.google.com/g/tiddlywiki/c/c3y-PycRP4M)上面有人建议[用TiddlyWiki2的语法进行Hack](https://www.gitmemory.com/issue/Jermolene/TiddlyWiki5/3685/770313436)。
+在使用TiddlyWiki之后，一直苦于TiddlyWiki5语法没有高亮支持，写作体验不是很好。之前有也在网上找到一些相关的解决办法，例如在[Google Group](https://groups.google.com/g/tiddlywiki/c/c3y-PycRP4M)上面有人建议[用TiddlyWiki2的语法进行Hack](https://www.gitmemory.com/issue/Jermolene/TiddlyWiki5/3685/770313436)，但是这种方法并不完美。
 
-也有人编写了一个可用的CodeMirror的扩展版本[TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus)，虽然是可用的，但是有两个问题：一个是语法高亮的内容有限，另一个是该插件直接基于theme而非mode进行开发，这就导致''如果想要用TW5的高亮就必须舍弃其他语法高亮，并且无法自定义主题''。所以最终还是打算自己写一个XD
+也有人编写了一个可用的CodeMirror的扩展版本[TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus)，虽然是可用的，但是有两个问题：一个是语法高亮的内容有限，另一个是该插件直接基于theme而非mode进行开发，这就导致**如果想要用TW5的高亮就必须舍弃其他语法高亮，并且无法自定义主题**。所以最终还是打算自己写一个 :D
 
-本插件其实也是基于[TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus)开发的，只不过魔改了很多，基本上是两个插件了。
+本插件一开始也是基于[TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus)开发的，只不过魔改了很多，现在基本上是两个不同的插件了。
 
-## TODO
+## TODO List
 
 - [x] 代码块内的语法高亮与缩进。
 - [x] LaTeX公式高亮与缩进。
-- [ ] 自动补全内部链接的tiddler名称。
+- [x] 自动补全内部链接的tiddler名称。
 - [ ] 其他代码提示。
 - [ ] 代码错误检查。
 - [ ] 鼠标悬在LaTeX代码上方能够进行公式预览。

README_en.md

@@ -0,0 +1,71 @@
+# CodeMirror-Mode-TiddlyWiki5
+
+Adds Syntax Highlighting for TiddlyWiki5 tiddlers (`text/vnd.tiddlywiki`) to the CodeMirror, along with some other useful editor addon (wikilink hint, macro hint, etc.). Now is under development.
+
+为TiddlyWiki的CodeMirror编辑器添加TiddlyWiki5(`text/vnd.tiddlywiki`)语法高亮，同时还有其他有用的编辑器插件(如Wiki链接自动提示、宏提示等)。现在正在开发中。
+
+[> 中文README <](https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/blob/main/README.md)
+
+---
+
+[TOC]
+
+## Plugin description
+
+Add [CodeMirror](http://codemirror.net) support for TiddlyWiki5 syntax highlighting, all tiddlers with MIME type left blank or `text/vnd.tiddlywiki` will be highlighted. Also supports real-time code completion hints like `VSCode` while typing (currently only WikiLink completion is implemented) and **no need** to activate with `Ctrl+Space`.
+
+Plugin is still under development, if you have any suggestions or bugs, please directly mention Issues.
+
+## Installation & Compilation
+
+<span style="color: red; font-weight: 900;">First install the latest version of CodeMirror main plugin and CodeMirror XML sub-plugin (otherwise it will report an error).</span>
+
+Go directly to [Release](https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5/releases) and download `CodeMirrorModeTiddlyWiki5-X.X.X.json`, then drag and drop it into your TiddlyWiki, or import it in TiddlyWiki.
+
+If the plugin reports an error, there is no need to panic, because the plugin does not make changes to your TiddlyWiki content, so just uninstall it and you will be able to eliminate the problem, but to be on the safe side **it is still recommended to backup it before installing it**.
+
+If you want to DIY and compile, please run `make` or `make build` directly. Note that it is the `xxx.min.js` and `xxx.min.css` that are packaged.
+
+## Function Introduction
+
+<details>
+<summary>TiddlyWiki5 syntax highlighting, support for inline code blocks and syntax highlighting for LaTeX</summary>
+
+Default:
+![default](media/mode-default.jpg)
+
+Ayu-Dark:
+![ayu-dark](media/mode-ayu-dark.jpg)
+
+TiddlyWiki:
+![tiddlywiki](media/mode-tiddlywiki.jpg)
+
+</details>
+
+Note: Some of these themes are installed by myself, if you are interested in changing the theme, please read TiddlyWiki's CodeMirror's README.
+
+<details>
+<summary>WikiLink Auto Hint</summary>
+
+![wikilink-hint](media/wikilink-hint.gif)
+
+</details>
+
+Other features are under development.
+
+## Development Thoughts
+
+After using TiddlyWiki, I've been suffering from the lack of highlighting support in TiddlyWiki5 syntax, and the writing experience is not very good. I have found some solutions on the web, for example, on the [Google Group](https://groups.google.com/g/tiddlywiki/c/c3y-PycRP4M) someone suggested [Hack with TiddlyWiki2 syntax](https://www.gitmemory.com/issue/Jermolene/TiddlyWiki5/3685/770313436), but this approach is not perfect.
+
+An extended version of CodeMirror has also been written that is available [TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus), which is available but has two problems. One is that the syntax highlighting is limited. The other is that the plugin is developed directly based on theme rather than mode, which leads to that **if you want to use TW5's highlighting you have to discard other syntax highlighting and can't customize the theme**. So eventually I plan to write one myself :D
+
+This plugin is also based on [TW5-CodeMirror-Plus](https://github.com/adithya-badidey/TW5-codemirror-plus) at the beginning, but I made a lot of changes on it, now they're basically two different plugins.
+
+## TODO List
+
+- [x] Syntax highlighting and indentation within code blocks.
+- [x] LaTeX formula highlighting and indentation.
+- [x] WikiLink AutoHint.
+- [ ] Other code hints.
+- [ ] Code error checking.
+- [ ] Mouse hovering over LaTeX code enables formula preview.

build.json

@@ -0,0 +1,62 @@
+{
+    "meta": {
+        "version": "0.0.2",
+        "type": "application/json",
+        "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5",
+        "plugin-type": "plugin",
+        "parent-plugin": "$:/plugins/tiddlywiki/codemirror",
+        "name": "CodeMirror Mode TiddlyWiki5",
+        "list": "readme-zh",
+        "description": "TiddlyWiki5 highlighting mode for CodeMirror",
+        "dependents": "$:/plugins/tiddlywiki/codemirror-mode-xml"
+    },
+    "shadow-tiddlers": [{
+            "type": "external",
+            "src": "./src/tw5-mode.min.js",
+            "meta": {
+                "title": "$:/plugins/tiddlywiki/codemirror/mode/tiddlywiki5/tiddlywiki5.js",
+                "module-type": "codemirror",
+                "tags": "",
+                "type": "application/javascript"
+            }
+        },
+        {
+            "type": "external",
+            "src": "./src/style.min.css",
+            "meta": {
+                "type": "text/css",
+                "title": "$:/plugins/Gk0Wk/codemirror-tiddlywiki5/style.css",
+                "tags": "$:/tags/Stylesheet"
+            }
+        },
+        {
+            "type": "external",
+            "src": "./src/tex-mode.min.js",
+            "meta": {
+                "type": "application/javascript",
+                "title": "$:/plugins/tiddlywiki/codemirror/mode/tex/tex.js",
+                "tags": "",
+                "module-type": "codemirror"
+            }
+        },
+        {
+            "type": "external",
+            "src": "./src/readme-zh.tw5",
+            "meta": {
+                "type": "",
+                "title": "$:/plugins/Gk0Wk/codemirror-mode-tiddlywiki5/readme-zh",
+                "tags": ""
+            }
+        },
+        {
+            "type": "external",
+            "src": "./src/tw5-autohint.min.js",
+            "meta": {
+                "type": "application/javascript",
+                "title": "$:/plugins/tiddlywiki/codemirror/addon/hint/hint-tiddlywiki5.js",
+                "tags": "",
+                "module-type": "codemirror"
+            }
+        }
+    ]
+}

build.py

@@ -0,0 +1,26 @@
+if __name__ == '__main__':
+    import json
+    import os
+
+    with open('build.json', 'r') as fp:
+        build_info = json.loads(fp.read())
+
+    tiddlers = {}
+    for tiddler_ in build_info['shadow-tiddlers']:
+        tiddler = tiddler_['meta']
+        if tiddler_['type'] == 'external':
+            if os.path.exists(tiddler_['src']) and os.path.isfile(tiddler_['src']):
+                with open(tiddler_['src'], 'r') as fp:
+                    tiddler['text'] = fp.read()
+            else:
+                tiddler['text'] = ''
+        tiddlers[tiddler['title']] = tiddler
+    plugin = build_info['meta']
+    plugin['text'] = json.dumps({'tiddlers': tiddlers})
+
+    os.makedirs('./dist', exist_ok=True)
+    import re
+    with open('./dist/' +
+              re.sub('[^A-Za-z0-9_]', '', build_info['meta']['name'])
+              + '-' + build_info['meta']['version'] + '.json', 'w') as fp:
+        fp.write(json.dumps([plugin]))

media/ayu-dark.jpg media/mode-ayu-dark.jpgmedia/ayu-dark.jpg renamed to media/mode-ayu-dark.jpg

@@ -0,0 +1,17 @@
+[[GitHub Repo|https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5]]
+
+!! 插件说明
+
+增加 [[CodeMirror|http://codemirror.net]] 对~TiddlyWiki5语法高亮的支持，所有类型留空或者为`text/vnd.tiddlywiki`的tiddler都会有高亮。请首先安装最新版[[CodeMirror plugin|$:/plugins/tiddlywiki/codemirror]]主插件和~CodeMirror XML附插件(不然会报错)。
+
+插件还在开发中，如有任何建议或者bug请在[[GitHub|https://github.com/Gk0Wk/CodeMirror-Mode-TiddlyWiki5]]上提Issue，如果墙翻不过去的同学，可以联系我(Email: [email protected])。
+
+如果插件报错了，不必惊慌，因为插件不会对~TiddlyWiki本体内容做修改，所以只需要卸载就能够消除问题，但保险起见''__还是建议先备份再安装__''。
+
+!! 开发感想
+
+在使用~TiddlyWiki之后，一直苦于~TiddlyWiki5语法没有高亮支持，写作体验不是很好。之前有也在网上找到一些相关的解决办法，例如在[[Google Group|https://groups.google.com/g/tiddlywiki/c/c3y-PycRP4M]]上面有人建议[[用TiddlyWiki2的语法进行Hack|https://www.gitmemory.com/issue/Jermolene/TiddlyWiki5/3685/770313436]]。
+
+也有人编写了一个可用的~CodeMirror的扩展版本[[TW5-CodeMirror-Plus|https://github.com/adithya-badidey/TW5-codemirror-plus]]，虽然是可用的，但是有两个问题：一个是语法高亮的内容有限，另一个是该插件直接基于theme而非mode进行开发，这就导致''如果想要用TW5的高亮就必须舍弃其他语法高亮，并且无法自定义主题''。所以最终还是打算自己写一个XD
+
+本插件其实也是基于[[TW5-CodeMirror-Plus|https://github.com/adithya-badidey/TW5-codemirror-plus]]开发的，只不过魔改了很多，基本上是两个插件了。