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

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

太微中文论坛

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