简单的语法符号高亮单独工具（只支持嵌入/筛选器/宏/变量/小工具）

w6iyes

基于highlight.js的单独网页（不是插件），只能用于简单地高亮：筛选器、嵌入、宏/变量、微件/小工具 这4种语法的符号，用于方便地分辨语法查看代码。不支持富文本语法与html语法。 bug很多，可以反馈或提议，但不打算修，将就着用。（假如有后续更新，会回复在楼下）

wikitext简单语法高亮-v1.html

使用方法：下载附件，病毒扫描，双击打开。粘贴文本、点击“语法高亮”按钮。

可以手动复制高亮后的html代码到tiddlywiki中，并保存条目为html类型，即可显示高亮后的代码。

！注意：这不能帮助你检查语法的正确性/合法性。这不是编辑器，关闭网页就会清空所有数据。

PS: 你可以手动切换高亮配色，如果你知道怎么切换highlight.js的css，即配色主题对应的url地址。
PS2: 你可以手动添加快捷键，如果你知道什么是accesskey属性。
PS3: 欢迎推荐其他的wikitext语法高亮工具。

dyp1121054136

不需要那么麻烦，不是有个wikitext高亮工具吗，我已经整理成插件了 $:/plugins/dyp/WikiText-highlight

https://dyp1121054136.github.io/dyp-plugins-library/

dyp1121054136

官方插件 $:/plugins/tiddlywiki/highlight
我让ai帮我写了黑色主题的配色
$:/plugins/tiddlywiki/highlight/highlight.css

/*!
  Theme: Default
  Description: Original highlight.js style
  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
  Maintainer: @highlightjs/core-team
  Website: https://highlightjs.org/
  License: see project LICENSE
  Touched: 2021
*/

/* 修改版 适配黑色主题 */

/* 设置代码块的样式，使用黑色背景 */
.hljs {
/*   background-color: #1E1E1E;
  color: #D4D4D4; */
  display: block;            /* 块级元素 */
  overflow-x: auto;          /* 横向滚动 */
  padding: 1em;              /* 内边距 */
}

/* 代码行的内边距 */
code.hljs {
  padding: 3px 5px;
}

/* 注释颜色 */
.hljs-comment {
  color: #6A6A6A;  /* 浅灰色注释 */
}

/* 标点符号、标签等 */
.hljs-punctuation,
.hljs-tag {
  color: #D4D4D4;  /* 默认代码颜色 */
}

/* 标签内的属性或名称 */
.hljs-tag .hljs-attr,
.hljs-tag .hljs-name {
  color: #D4D4D4;  /* 默认代码颜色 */
}

/* 属性名、关键字、选择器等 */
.hljs-attribute,
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-name,
.hljs-selector-tag {
  font-weight: 700;  /* 加粗显示 */
  color: #569CD6;    /* 蓝色 */
}

/* 删除内容、数字、字符串、类选择器等 */
.hljs-deletion,
.hljs-number,
.hljs-quote,
.hljs-selector-class,
.hljs-selector-id,
.hljs-string,
.hljs-template-tag,
.hljs-type {
  color: #CE9178;  /* 橙色 */
}

/* 标题、部分标题等 */
.hljs-section,
.hljs-title {
  color: #D16969;  /* 红色 */
  font-weight: 700;  /* 加粗 */
}

/* 链接、操作符、正则表达式、变量等 */
.hljs-link,
.hljs-operator,
.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-symbol,
.hljs-template-variable,
.hljs-variable {
  color: #C586C0;  /* 紫色 */
}

/* 字面量（如 true、false、null） */
.hljs-literal {
  color: #608B4E;  /* 绿色 */
}

/* 新增内容、内置函数、代码块等 */
.hljs-addition,
.hljs-builtin,
.hljs-bullet,
.hljs-code {
  color: #608B4E;  /* 绿色 */
}

/* 元数据（如 @import、@media 等） */
.hljs-meta {
  color: #9CDCFE;  /* 青色 */
}

/* 元数据中的字符串 */
.hljs-meta .hljs-string {
  color: #CE9178;  /* 橙色 */
}

/* 强调文本（斜体） */
.hljs-emphasis {
  font-style: italic;  /* 斜体 */
}

/* 加粗文本 */
.hljs-strong {
  font-weight: 700;  /* 加粗 */
}

dyp1121054136

想要什么配色改这个css就好了，实测是可以完美替换的

w6iyes

@dyp1121054136 好插件啊！学习了，谢谢大佬分享！

大佬的更全面，包含完整的富文本与html语法支持！还教你如何添加wikitext语法自动高亮支持和切换配色。

PS4: 关于如何修改默认的code-body字段的代码查看
https://talk.tiddlywiki.org/t/display-source-code-of-code-tiddlers/2015/3
（比如else[text/vnd.tiddlywiki]改成else[tw]）

w6iyes

搜了一下原来有不少方案（欢迎补充）

vscode、atom、vim、sublime都有专门的高亮插件
或者CodeMirror系列插件自带的高亮，如cm6、cme、cmp
tiddlywiki-codemirror6
TW5-CodeMirror-Enhanced
TW5-CodeMirror-Plus
以及不少开发者做过的努力，如这个帖子中提到的
https://talk.tiddlywiki.org/t/tiddlywiki-syntax-highlighting/6386/12
vim的
https://talk.tiddlywiki.org/t/tw5-what-are-editor-options-for-tiddlywiki-syntax-highlighting/799/7
https://talk.tiddlywiki.org/t/vim-as-a-static-syntax-highlighter-for-tiddlywiki/5066

PS5: 我的高亮更侧重于非富文本(编程)语法的高亮，比如文本替换语法、系统条目、编译指示、快捷键描述、筛选器后缀，并在样式上更强调筛选器操作符、微件属性（虽然bug很多），以及四种语法在颜色上的区分。（还有导出高亮后的html代码，和无需编辑器打开网页即可使用）

w6iyes

语法高亮方案发现了另外两个插件，一个是编辑器插件unieditor，一个是prismjs代码高亮插件

w6iyes

版本：v4-codemirror5编辑器-实验性语法折叠

更新时间：20250818

更新说明：

界面使用了codemirror5编辑器。
增加了（实验性的）语法折叠功能。bug很多。
修复了一些高亮bug。
提供本地版和cdn版两种版本。

wikitext简单语法高亮v4.zip.txt (613KB)

使用说明：下载附件（或者Alt单击附件链接，或者右键附件链接另存为），重命名附件为.zip后缀，病毒扫描，解压缩附件，双击打开（v4_本地版.html），点击【使用说明】。

PS6:

如果你熟悉codemirror5，你可以：自定义快捷键/extraKeys、添加cm5插件/addon（例如搜索插件）、切换cm5配色主题。
如果你熟悉css，你可以自定义cm5编辑器的高度(.CodeMirror)，这样就能使用浏览器的搜索功能；或者自定义折叠图标(.CodeMirror-foldmarker)。

w6iyes

版本：v4.2-codemirror5编辑器-实验性代码折叠

更新时间：20250822

更新说明：

增加了“兼容浏览器搜索”功能。

wikitext简单语法高亮v4.zip.txt (610KB)

使用说明：同上。

PS7:

如果你熟悉javascript以及tiddlywiki的highlight插件/codemirror5插件的js模组（module-type:highlight/codemirror），你可以尝试自己将语法高亮功能(具体代码)复制(集成)到tiddlywiki中。

w6iyes

语法高亮发现另一个编辑器插件，monaco编辑器（vscode同款编辑器）。

https://smilyorg.github.io/tw5-monaco/
- https://talk.tiddlywiki.org/t/announcing-monaco-vs-code-editor-for-tiddlywiki/2463

w6iyes

版本：v5-codemirror5编辑器-实验性代码折叠-高亮匹配标签并跳转

更新时间：20250915

更新说明：

增加了英文版界面。
增加了高亮匹配标签对/小工具/节点的功能。
增加了跳转匹配标签对/小工具、跳转上下节点的功能。
现在可以折叠“使用说明”中的区块。
增加了一些常见编辑器功能配置（“其他配置”）。
添加了隐藏彩蛋实验性多国语言（仅开发者模式可用）。

wikitext简单语法高亮v5.zip.txt (671KB)

使用说明：下载附件，重命名附件为.zip后缀，病毒扫描，解压附件，双击打开（v5_本地版.html），点击【使用说明】。

wikitext simple syntax highlighting for TiddlyWiki5

Features:

Simple Wikitext syntax highlighting (supports only transclude, filters, macros, variables, and widgets).
Uses the CodeMirror 5 editor as the UI.
Experimental code folding.
Highlight matching paired HTML tags, widgets, and nodes.
Jump to matching paired HTML tags or widgets, or to the next/previous node.

wikitext-simple-syntax-highlight-v5.zip.txt (672KB)

Instructions:

Download the attachment (or Alt-click the attachment link, or right-click the attachment link and save as);
Rename the attachment to .zip extension;
Scan for viruses;
Unzip the attachment;
Double-click to open (v5_EN.html);
Click [Help].

w6iyes

版本：v6-codemirror5编辑器-实验性代码折叠-高亮匹配标签并跳转-自动补全与参数提示-关闭标签括号与查看节点

更新时间：20250927

更新说明：

调整了小工具(widget/微件)的语法高亮颜色。
增加了（实验性）查看语法节点信息(parsetree)功能。
增加了简单的自动补全功能：
- 语法补全（小工具名称和属性、宏名称和参数、筛选器操作符(operator-filter)、编译指示(\pragma)、代码/文本片段(Snippet)），支持缩写搜索；
- 上下文单词补全(anyword-hint)。
增加了（实验性）简单的属性/参数提示功能（只支持小工具和宏）。
增加了关闭小工具/宏/变量/HTML标签括号的快捷键。

wikitext简单语法高亮v6.zip.txt (707KB)

使用说明：同上。双击打开（v6_本地版.html）。

Version: v6-20250927

What's new:

Experimental syntax node information (parsetree) viewer.
Simple auto-completion:
- Syntax completion for widget names and attributes, macro names and parameters, filter operators, \pragmas, and snippets, with support for abbreviation search.
- Word completion (anyword-hint).
Experimental simple widget/macro tooltip (e.g. widget attributes or macro parameters).
Keyboard shortcut for closing brackets around widget, macro, variable, and HTML tag.

wikitext-simple-syntax-highlight-v6.zip.txt (708KB)

Instructions:

Same as above.
Double-click to open (v6_EN.html).

w6iyes

版本：v7-自动补全与提示预览-属性与参数提示-关闭标签括号与查看节点-高亮匹配标签并跳转-实验性代码折叠-codemirror5编辑器

更新时间：20251021

更新说明：

（实验性）提示功能增加了：
- 对筛选器操作符、运行前置码的支持；
- 显示源码注释和源码路径；
- 显示宏的默认值、宏类型、文本长度、源码。
语法补全列表增加了提示预览功能，额外支持编译指示(\pragma)、解析规则(wikirule)和代码片段(snippet)的提示。
（实验性）高亮语法节点功能增加了对宏定义的内容的部分支持（不支持折叠）。

wikitext简单语法高亮v7.zip.txt (731KB)

使用说明：同上。双击打开（v7.html）。

Version: v7-20251012

What's new:

Experimental tooltip added:
- support for filter operators/run-prefixes;
- displays source code comments and source code path;
- displays macro default values, macro type, text length, or source code.
Syntax completion adds tooltip preview, including support for \pragmas, wikirules and snippets.
Experimental [Highlight node] now partially supports macro definition content (folding is not supported).

wikitext-simple-syntax-highlight-v7.zip.txt (732KB)

Instructions:

Same as above.
Double-click to open (v7_EN.html).

w6iyes

版本：v8-在线试用-条目名称补全-自动补全与提示预览-属性与参数提示-关闭标签括号与查看节点-高亮匹配标签并跳转-实验性代码折叠-codemirror5编辑器

更新时间：251103

（实验性）在线试用（只有英文版）：
https://wtsshl.tiddlyhost.com/

更新说明：

改进了补全体验：忽略剪贴操作、空格等字符。输入尖括号会触发补全。
补全功能增加了（实验性）条目名称补全，支持缩写搜索，支持提示预览功能（显示部分条目内容(text)、内容长度、类型(type)、字段(fields)）。
改进了关闭标签功能，重复按下快捷键会在括号前后跳转。
改进了提示预览功能，右侧空间不足则会显示在左侧，底部空间不足则会往上显示。
增加了一些快捷键：解析语法折叠、其他配置、使用说明。
调整了高亮匹配括号的样式。

wikitext简单语法高亮v8.zip.txt (753kb)

使用说明：同上。双击打开（v8.html）。

Version: v8-251030

(Experimental) online demo:
https://wtsshl.tiddlyhost.com/

What's new:

Improve the completion experience: ignores cut and paste operations, spaces or some other characters. Typing angle brackets triggers completion.
Added experimental tiddler title completion, supports abbreviation search, and supports tooltip preview (displaying part of the tiddler text, text length, type, and fields).
Improve the [Close tag/bracket]: repeatedly pressing the hotkey will jump to the end or front of the bracket.
Improve the tooltip preview: if there is insufficient space on the right, it will be displayed on the left; if there is insufficient space at the bottom, it will be displayed upwards.
Added hotkeys: [parse folding], [Other configs], and [Help].
Adjusted the style of [Highligh match-brackets].

wikitext-simple-syntax-highlight-v8.zip.txt (664kb)

Instructions:

Same as above.
Double-click to open (v8_EN.html).

太微中文论坛

简单的语法符号高亮单独工具（只支持嵌入/筛选器/宏/变量/小工具）