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

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代码，和无需编辑器打开网页即可使用）

太微中文论坛

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