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

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).

太微中文论坛

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