Zettlr 样式语言语法高亮指南CSS、Less 与 SCSS 代码块的解析与主题定制【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/ZettlrZettlr 作为一款面向学术写作的 Markdown 编辑器其内置编辑器基于 CodeMirror 6为 Markdown 文档中的围栏代码块Fenced Code Block提供多语言语法高亮。本文以仓库内 GUI 测试文档 CSS.md 为核心完整讲解 Zettlr 对 CSS、Less、SCSS 三类样式语言的高亮支持、语言注册机制、Lezer 语法树到 CSS 类的映射原理以及基于 CSS 变量的主题定制方法读完即可在 Zettlr 中正确书写三类样式代码块并理解其高亮配色的底层来源。测试文档的背景一份可运行的语法高亮验收样例CSS.md位于仓库的 GUI 测试目录scripts/test-gui/test-files/Syntax Highlighting/下与Start.md、Config.md、Enterprise.md等文件共同构成一套语法高亮测试集。根据 Start.md 的说明这些测试文件按 highlight.js 的语言分组组织大部分示例取自该平台其余来自维基百科或由 Zettlr 开发者自行编写其用途是每当 Zettlr 新增一种高亮语言时都要同时在该测试集中补充对应的测试文件用于在本地开发环境中人工验收高亮效果。这些文件会在执行yarn test-gui时被复制到测试工作区。按照 scripts/test-gui/test-files/README.md 的说明测试目录位于resources子目录下、不进入 Git 版本控制使用yarn test-gui --clean可以随时将测试目录重置回初始状态。因此CSS.md中的每一段代码示例都是可以直接粘贴进 Zettlr 编辑器中验证高亮效果的真实样例。CSS 代码块基础层叠样式表的高亮CSS.md 给出的第一组示例是标准 CSS位于css围栏代码块内font-face { font-family: Chunkfive; src: url(Chunkfive.otf); } body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; --heading-1: 30px/32px Helvetica, sans-serif; } import url(print.css); media print { a[href^http]::after { content: attr(href) } }这段样例覆盖了 CSS 语法中的典型结构也是高亮验收的观察重点规则at-rulesfont-face、import、media等关键字会被识别为独立的语法标记在编辑器中以控制关键字配色呈现选择器元素选择器body、类选择器.usertext、属性选择器a[href^http]、伪元素::after各自对应不同的高亮类属性与取值font-family、color、background等属性名以及十六进制颜色值#F0F0F0、#600、字符串Chunkfive.otf、URL 地址url(print.css)等值类型均会被区分着色自定义属性--heading-1这类 CSS 变量声明同样属于属性名范畴。在源码层面CSS 语言的注册位于 markdown-parser.ts 的codeLanguages数组中{ mode: css().language, selectors: [css] }。css()来自codemirror/lang-css这意味着围栏代码块的信息字符串info string只要以css开头就会启用该语言的 Lezer 解析器。解析器的匹配逻辑使用正则/^{?([a-z.#-])/提取信息字符串因此css、{.css}等写法均可命中。Less 代码块预处理器特性的高亮覆盖第二组示例是 Less位于less围栏代码块内import fruits; rhythm: 1.5em; media screen and (min-resolution: 2dppx) { body {font-size: 125%} } section .foo #bar:hover [href*less] { margin: rhythm 0 0 rhythm; padding: calc(5% 20px); background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat; background-image: linear-gradient(-135deg, wheat, fuchsia) !important ; background-blend-mode: multiply; } font-face { font-family: /* ? */ Omega; src: url(../fonts/omega-webfont.woff?v2.0.2); } .icon-baz::before { display: inline-block; font-family: Omega, Alpha, sans-serif; content: \f085; color: rgba(98, 76 /* or 54 */, 231, .75); }这段样例着重检验 Less 相对 CSS 的扩展语法能否被正确高亮变量定义与引用rhythm: 1.5em;定义变量margin: rhythm 0 0 rhythm;引用变量嵌套注释/* ? */、/* or 54 */等块注释出现在字体族、函数参数等位置检验注释解析与上下文恢复能力复杂选择器section .foo #bar:hover [href*less]综合了子代、相邻兄弟、ID、伪类、属性选择器现代 CSS 函数calc()、linear-gradient()、rgba()以及!important标记转义字符与 URL 查询串content: \f085中的转义序列、url(../fonts/...woff?v2.0.2)中的查询参数。在源码中Less 的注册条目为{ mode: less().language, selectors: [less] }解析器来自codemirror/lang-less。需要注意的是Less 的变量以开头与media、import等 at-rule 共用同一个起始字符这恰好是 Less 模式解析器需要区分处理的难点也是测试样例特意同时包含变量与 at-rule 的原因。SCSS 代码块Sass 缩进与嵌套语法的完整检验第三组示例是 SCSS位于scss围栏代码块内篇幅最长、特性最全import compass/reset; // variables $colorGreen: #008000; $colorGreenDark: darken($colorGreen, 10); mixin container { max-width: 980px; } // mixins with parameters mixin button($color:green) { if ($color green) { background-color: #008000; } else if ($color red) { background-color: #B22222; } } button { include button(red); } div, .navbar, #header, input[typeinput] { font-family: Helvetica Neue, Arial, sans-serif; width: auto; margin: 0 auto; display: block; } .row-12 [class*spans] { border-left: 1px solid #B5C583; } // nested definitions ul { width: 100%; padding: { left: 5px; right: 5px; } li { float: left; margin-right: 10px; .home { background: url(http://placehold.it/20) scroll no-repeat 0 0; } } } .banner { extend .container; } a { color: $colorGreen; :hover { color: $colorGreenDark; } :visited { color: #c458cb; } } for $i from 1 through 5 { .span#{$i} { width: 20px*$i; } } mixin mobile { media screen and (max-width : 600px) { content; } }这段样例系统性地覆盖了 SCSS 的预处理器特性是高亮测试中覆盖最密集的部分$变量与函数$colorGreen变量定义、darken($colorGreen, 10)内建函数调用、$i循环变量指令族mixin、include、if/else if、extend、for ... from ... through、media、content等 Sass 专属指令嵌套规则ul内嵌套lili内再嵌套.homepadding属性块的left/right子属性嵌套父选择器引用:hover、:visited使用引用外层选择器插值语法#{...}插值出现在类名.span#{$i}与计算表达式20px*$i中属性选择器与类型选择器input[typeinput]、[class*spans]。SCSS 的注册条目为{ mode: sass({ indented: false }).language, selectors: [scss] }解析器来自codemirror/lang-sass。注意indented: false这一参数它表示采用带花括号与分号的 SCSS 语法而非不带括号的缩进式 Sass 语法因此信息字符串必须写作scss才能命中该模式。语言注册机制信息字符串如何映射到 Lezer 解析器三个测试代码块展示的高亮能力其根源是 markdown-parser.ts 中的codeLanguages注册表。该表是一个{ mode, selectors }数组selectors列出所有能触发该语言解析的信息字符串别名。与样式语言相关的注册条目如下语言解析器来源selectorsCSScodemirror/lang-css的css().languagecssLesscodemirror/lang-less的less().languagelessSCSScodemirror/lang-sass的sass({ indented: false }).languagescssMarkdown 解析器通过codeLanguages回调将信息字符串解析为语言模式具体流程为用正则/^{?([a-z.#-])/提取信息字符串开头的语言名支持{.css}这类带花括号的写法若语言名以.开头对应 Pandoc 的围栏代码属性语法则去掉点号后再匹配遍历codeLanguages表命中selectors即返回对应的 Lezer 语言模式未命中任何条目则返回null代码块退化为无高亮的纯文本。从源码结构看这套注册机制是 Zettlr 扩展高亮语言的核心入口新增语言只需向该表追加条目。此外注册表还包含一个特殊条目Mermaid 通过一个空的StreamLanguage占位解析器保证其落入FencedCode语法节点以便渲染器识别——这解释了为什么 Mermaid 没有真正的语法高亮却能与其他语言一样被代码块渲染器处理。高亮实现原理Lezer 语法树到 CSS 类的映射语言解析器产出的是一棵 Lezer 语法树真正把语法节点变成颜色的是 theme/syntax.ts 中的HighlightStyle。该文件定义了tagHighlight与customTagHighlight两个样式表。其中tagHighlight将 Lezer 的通用语法标签tags逐一映射为cm-*前缀的 CSS 类例如tags.tagName→.cm-tag-nametags.attributeName→.cm-attribute-nametags.string→.cm-stringtags.comment→.cm-commenttags.number→.cm-numbertags.color→.cm-colortags.keyword→.cm-keywordtags.propertyName→.cm-property-nametags.className→.cm-class-namecustomTagHighlight则负责 Zettlr 自有的 Markdown 扩展语法YAML frontmatter、脚注、Zettelkasten 链接、引文、Pandoc 属性等。两个样式表分别通过markdownSyntaxHighlighter()与codeSyntaxHighlighter()两个函数暴露前者应用于 Markdown 编辑器含 Markdown 专属标签后者应用于纯代码编辑器只含通用标签。在 editor-extension-sets.ts 中getMarkdownExtensions()调用markdownSyntaxHighlighter()而getGenericCodeExtensions()服务于 LaTeX、YAML、JSON 等代码文件调用codeSyntaxHighlighter()。关键设计在于HighlightStyle.define只分配类名不内联任何颜色样式。这正是注释里写明的意图——Instead of utilizing JS styling, we simply apply class names, in order to retain our users ability to apply custom CSS不采用 JS 内联样式而是仅应用类名以保留用户应用自定义 CSS 的能力。用户因此可以直接编写自定义 CSS 覆盖任意cm-*类而不必受限于内置主题。此外render-code.ts 中的代码渲染插件会遍历语法树中的CodeText/InlineCode节点为其添加code装饰类用于代码背景与等宽字体等整体样式与具体语言的颜色高亮相互独立。配色主题基于 Solarized 的 CSS 变量体系cm-*类最终的颜色值由 theme/code.ts 定义。Zettlr 的代码配色基于著名的 Solarized 配色方案文件注释中明确标注了出处并以 CSS 变量的形式组织CSS 变量默认值用途--zettlr-editor-code-base-0#839496基础前景--zettlr-editor-code-base-1#93a1a1深色模式前景--zettlr-editor-code-base-2#eee8d5浅色模式代码前景--zettlr-editor-code-base-3#fdf6e3浅色背景--zettlr-editor-code-base-00#657b83注释色--zettlr-editor-code-base-01#586e75辅助色--zettlr-editor-code-base-02#073642代码底色--zettlr-editor-code-base-03#002b36深色背景--zettlr-editor-code-yellow#b58900名称/类名/类型名--zettlr-editor-code-orange#cb4b16属性名/正则--zettlr-editor-code-red#dc322f删除/无效内容--zettlr-editor-code-magenta#d33682属性/运算符--zettlr-editor-code-violet#6c71c4控制关键字/数字/布尔--zettlr-editor-code-blue#268bd2运算符关键字/元信息--zettlr-editor-code-cyan#2aa198标签名/变量名--zettlr-editor-code-green#859900字符串/关键字文件开头的注释还给出了完整的变量维护流程新增变量需要在CodeThemeVars接口声明、在defaultCodeVars中设默认值、在codeTheme中应用样式最后可选地在各主题文件中覆盖。这套变量体系与 CodeEditor.vue 组件使用的配色保持一致代码注释中同样注明。变量--zettlr-editor-code-font则控制代码字体。实用操作如何验证、启用与定制样式语言高亮1. 验证高亮效果在 Zettlr 编辑器中新建 Markdown 文档直接复制CSS.md中的三段代码块注意保留css、less、scss三个信息字符串即可实时看到三种语言的高亮差异。这也是该 GUI 测试文件的原始用途。2. 通过自动补全快速插入代码块code-blocks.ts 是代码块的自动补全插件。当光标位于以或~~~开头的行尾时插件会弹出语言列表其中包含CSS、LESS、SCSS条目分别对应css、less、scss信息字符串。该补全会在插入信息字符串后自动补齐结束分隔符并把光标置于代码块中间。匹配逻辑使用正则/^\s{0,3}[~]{3,}\s*{?(.*)/并支持欧洲键盘死键场景下的容错处理。3. 自定义高亮配色由于所有颜色均通过cm-*类与 CSS 变量暴露用户可在 Zettlr 的自定义 CSS 面板中按需覆盖。例如将 Less/SCSS 注释改为更醒目的颜色只需覆写.cm-comment或直接修改--zettlr-editor-code-base-00变量想要整体换肤则可覆写codeTheme中任意一个--zettlr-editor-code-*变量。深色模式下的代码前景由dark .code规则--zettlr-editor-code-base-1单独控制浅色/深色可分别定制。4. 语言分组参考如需扩展测试覆盖可参照 Start.md 的目录结构配置语言Config.md、CSS 风格语言CSS.md、企业语言Enterprise.md、函数式语言Functional.md、Lisp 系语言Lisp.md、标记语言Markup.md、杂项语言Miscellaneous.md、协议与数据格式Protocols.md、科学计算语言Scientific.md、脚本语言Scripting.md、系统编程语言System.md。CSS.md承担的是其中CSS 风格语言CSS、Less、SCSS这一分组的高亮验收职责。小结Zettlr 对 CSS、Less、SCSS 的语法高亮是一条信息字符串 →codeLanguages注册表 → Lezer 语言解析器 → 语法树标签 →cm-*CSS 类 → Solarized CSS 变量的完整链路。理解这条链路既能让你在写作 Markdown 时正确选择代码块信息字符串也能让你通过自定义 CSS 精准控制三类样式语言的最终呈现而scripts/test-gui/test-files/Syntax Highlighting/CSS.md这份测试文档正是验证这一链路是否完好的标准化样例。【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Zettlr 样式语言语法高亮指南：CSS、Less 与 SCSS 代码块的解析与主题定制
Zettlr 样式语言语法高亮指南CSS、Less 与 SCSS 代码块的解析与主题定制【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/ZettlrZettlr 作为一款面向学术写作的 Markdown 编辑器其内置编辑器基于 CodeMirror 6为 Markdown 文档中的围栏代码块Fenced Code Block提供多语言语法高亮。本文以仓库内 GUI 测试文档 CSS.md 为核心完整讲解 Zettlr 对 CSS、Less、SCSS 三类样式语言的高亮支持、语言注册机制、Lezer 语法树到 CSS 类的映射原理以及基于 CSS 变量的主题定制方法读完即可在 Zettlr 中正确书写三类样式代码块并理解其高亮配色的底层来源。测试文档的背景一份可运行的语法高亮验收样例CSS.md位于仓库的 GUI 测试目录scripts/test-gui/test-files/Syntax Highlighting/下与Start.md、Config.md、Enterprise.md等文件共同构成一套语法高亮测试集。根据 Start.md 的说明这些测试文件按 highlight.js 的语言分组组织大部分示例取自该平台其余来自维基百科或由 Zettlr 开发者自行编写其用途是每当 Zettlr 新增一种高亮语言时都要同时在该测试集中补充对应的测试文件用于在本地开发环境中人工验收高亮效果。这些文件会在执行yarn test-gui时被复制到测试工作区。按照 scripts/test-gui/test-files/README.md 的说明测试目录位于resources子目录下、不进入 Git 版本控制使用yarn test-gui --clean可以随时将测试目录重置回初始状态。因此CSS.md中的每一段代码示例都是可以直接粘贴进 Zettlr 编辑器中验证高亮效果的真实样例。CSS 代码块基础层叠样式表的高亮CSS.md 给出的第一组示例是标准 CSS位于css围栏代码块内font-face { font-family: Chunkfive; src: url(Chunkfive.otf); } body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans; --heading-1: 30px/32px Helvetica, sans-serif; } import url(print.css); media print { a[href^http]::after { content: attr(href) } }这段样例覆盖了 CSS 语法中的典型结构也是高亮验收的观察重点规则at-rulesfont-face、import、media等关键字会被识别为独立的语法标记在编辑器中以控制关键字配色呈现选择器元素选择器body、类选择器.usertext、属性选择器a[href^http]、伪元素::after各自对应不同的高亮类属性与取值font-family、color、background等属性名以及十六进制颜色值#F0F0F0、#600、字符串Chunkfive.otf、URL 地址url(print.css)等值类型均会被区分着色自定义属性--heading-1这类 CSS 变量声明同样属于属性名范畴。在源码层面CSS 语言的注册位于 markdown-parser.ts 的codeLanguages数组中{ mode: css().language, selectors: [css] }。css()来自codemirror/lang-css这意味着围栏代码块的信息字符串info string只要以css开头就会启用该语言的 Lezer 解析器。解析器的匹配逻辑使用正则/^{?([a-z.#-])/提取信息字符串因此css、{.css}等写法均可命中。Less 代码块预处理器特性的高亮覆盖第二组示例是 Less位于less围栏代码块内import fruits; rhythm: 1.5em; media screen and (min-resolution: 2dppx) { body {font-size: 125%} } section .foo #bar:hover [href*less] { margin: rhythm 0 0 rhythm; padding: calc(5% 20px); background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat; background-image: linear-gradient(-135deg, wheat, fuchsia) !important ; background-blend-mode: multiply; } font-face { font-family: /* ? */ Omega; src: url(../fonts/omega-webfont.woff?v2.0.2); } .icon-baz::before { display: inline-block; font-family: Omega, Alpha, sans-serif; content: \f085; color: rgba(98, 76 /* or 54 */, 231, .75); }这段样例着重检验 Less 相对 CSS 的扩展语法能否被正确高亮变量定义与引用rhythm: 1.5em;定义变量margin: rhythm 0 0 rhythm;引用变量嵌套注释/* ? */、/* or 54 */等块注释出现在字体族、函数参数等位置检验注释解析与上下文恢复能力复杂选择器section .foo #bar:hover [href*less]综合了子代、相邻兄弟、ID、伪类、属性选择器现代 CSS 函数calc()、linear-gradient()、rgba()以及!important标记转义字符与 URL 查询串content: \f085中的转义序列、url(../fonts/...woff?v2.0.2)中的查询参数。在源码中Less 的注册条目为{ mode: less().language, selectors: [less] }解析器来自codemirror/lang-less。需要注意的是Less 的变量以开头与media、import等 at-rule 共用同一个起始字符这恰好是 Less 模式解析器需要区分处理的难点也是测试样例特意同时包含变量与 at-rule 的原因。SCSS 代码块Sass 缩进与嵌套语法的完整检验第三组示例是 SCSS位于scss围栏代码块内篇幅最长、特性最全import compass/reset; // variables $colorGreen: #008000; $colorGreenDark: darken($colorGreen, 10); mixin container { max-width: 980px; } // mixins with parameters mixin button($color:green) { if ($color green) { background-color: #008000; } else if ($color red) { background-color: #B22222; } } button { include button(red); } div, .navbar, #header, input[typeinput] { font-family: Helvetica Neue, Arial, sans-serif; width: auto; margin: 0 auto; display: block; } .row-12 [class*spans] { border-left: 1px solid #B5C583; } // nested definitions ul { width: 100%; padding: { left: 5px; right: 5px; } li { float: left; margin-right: 10px; .home { background: url(http://placehold.it/20) scroll no-repeat 0 0; } } } .banner { extend .container; } a { color: $colorGreen; :hover { color: $colorGreenDark; } :visited { color: #c458cb; } } for $i from 1 through 5 { .span#{$i} { width: 20px*$i; } } mixin mobile { media screen and (max-width : 600px) { content; } }这段样例系统性地覆盖了 SCSS 的预处理器特性是高亮测试中覆盖最密集的部分$变量与函数$colorGreen变量定义、darken($colorGreen, 10)内建函数调用、$i循环变量指令族mixin、include、if/else if、extend、for ... from ... through、media、content等 Sass 专属指令嵌套规则ul内嵌套lili内再嵌套.homepadding属性块的left/right子属性嵌套父选择器引用:hover、:visited使用引用外层选择器插值语法#{...}插值出现在类名.span#{$i}与计算表达式20px*$i中属性选择器与类型选择器input[typeinput]、[class*spans]。SCSS 的注册条目为{ mode: sass({ indented: false }).language, selectors: [scss] }解析器来自codemirror/lang-sass。注意indented: false这一参数它表示采用带花括号与分号的 SCSS 语法而非不带括号的缩进式 Sass 语法因此信息字符串必须写作scss才能命中该模式。语言注册机制信息字符串如何映射到 Lezer 解析器三个测试代码块展示的高亮能力其根源是 markdown-parser.ts 中的codeLanguages注册表。该表是一个{ mode, selectors }数组selectors列出所有能触发该语言解析的信息字符串别名。与样式语言相关的注册条目如下语言解析器来源selectorsCSScodemirror/lang-css的css().languagecssLesscodemirror/lang-less的less().languagelessSCSScodemirror/lang-sass的sass({ indented: false }).languagescssMarkdown 解析器通过codeLanguages回调将信息字符串解析为语言模式具体流程为用正则/^{?([a-z.#-])/提取信息字符串开头的语言名支持{.css}这类带花括号的写法若语言名以.开头对应 Pandoc 的围栏代码属性语法则去掉点号后再匹配遍历codeLanguages表命中selectors即返回对应的 Lezer 语言模式未命中任何条目则返回null代码块退化为无高亮的纯文本。从源码结构看这套注册机制是 Zettlr 扩展高亮语言的核心入口新增语言只需向该表追加条目。此外注册表还包含一个特殊条目Mermaid 通过一个空的StreamLanguage占位解析器保证其落入FencedCode语法节点以便渲染器识别——这解释了为什么 Mermaid 没有真正的语法高亮却能与其他语言一样被代码块渲染器处理。高亮实现原理Lezer 语法树到 CSS 类的映射语言解析器产出的是一棵 Lezer 语法树真正把语法节点变成颜色的是 theme/syntax.ts 中的HighlightStyle。该文件定义了tagHighlight与customTagHighlight两个样式表。其中tagHighlight将 Lezer 的通用语法标签tags逐一映射为cm-*前缀的 CSS 类例如tags.tagName→.cm-tag-nametags.attributeName→.cm-attribute-nametags.string→.cm-stringtags.comment→.cm-commenttags.number→.cm-numbertags.color→.cm-colortags.keyword→.cm-keywordtags.propertyName→.cm-property-nametags.className→.cm-class-namecustomTagHighlight则负责 Zettlr 自有的 Markdown 扩展语法YAML frontmatter、脚注、Zettelkasten 链接、引文、Pandoc 属性等。两个样式表分别通过markdownSyntaxHighlighter()与codeSyntaxHighlighter()两个函数暴露前者应用于 Markdown 编辑器含 Markdown 专属标签后者应用于纯代码编辑器只含通用标签。在 editor-extension-sets.ts 中getMarkdownExtensions()调用markdownSyntaxHighlighter()而getGenericCodeExtensions()服务于 LaTeX、YAML、JSON 等代码文件调用codeSyntaxHighlighter()。关键设计在于HighlightStyle.define只分配类名不内联任何颜色样式。这正是注释里写明的意图——Instead of utilizing JS styling, we simply apply class names, in order to retain our users ability to apply custom CSS不采用 JS 内联样式而是仅应用类名以保留用户应用自定义 CSS 的能力。用户因此可以直接编写自定义 CSS 覆盖任意cm-*类而不必受限于内置主题。此外render-code.ts 中的代码渲染插件会遍历语法树中的CodeText/InlineCode节点为其添加code装饰类用于代码背景与等宽字体等整体样式与具体语言的颜色高亮相互独立。配色主题基于 Solarized 的 CSS 变量体系cm-*类最终的颜色值由 theme/code.ts 定义。Zettlr 的代码配色基于著名的 Solarized 配色方案文件注释中明确标注了出处并以 CSS 变量的形式组织CSS 变量默认值用途--zettlr-editor-code-base-0#839496基础前景--zettlr-editor-code-base-1#93a1a1深色模式前景--zettlr-editor-code-base-2#eee8d5浅色模式代码前景--zettlr-editor-code-base-3#fdf6e3浅色背景--zettlr-editor-code-base-00#657b83注释色--zettlr-editor-code-base-01#586e75辅助色--zettlr-editor-code-base-02#073642代码底色--zettlr-editor-code-base-03#002b36深色背景--zettlr-editor-code-yellow#b58900名称/类名/类型名--zettlr-editor-code-orange#cb4b16属性名/正则--zettlr-editor-code-red#dc322f删除/无效内容--zettlr-editor-code-magenta#d33682属性/运算符--zettlr-editor-code-violet#6c71c4控制关键字/数字/布尔--zettlr-editor-code-blue#268bd2运算符关键字/元信息--zettlr-editor-code-cyan#2aa198标签名/变量名--zettlr-editor-code-green#859900字符串/关键字文件开头的注释还给出了完整的变量维护流程新增变量需要在CodeThemeVars接口声明、在defaultCodeVars中设默认值、在codeTheme中应用样式最后可选地在各主题文件中覆盖。这套变量体系与 CodeEditor.vue 组件使用的配色保持一致代码注释中同样注明。变量--zettlr-editor-code-font则控制代码字体。实用操作如何验证、启用与定制样式语言高亮1. 验证高亮效果在 Zettlr 编辑器中新建 Markdown 文档直接复制CSS.md中的三段代码块注意保留css、less、scss三个信息字符串即可实时看到三种语言的高亮差异。这也是该 GUI 测试文件的原始用途。2. 通过自动补全快速插入代码块code-blocks.ts 是代码块的自动补全插件。当光标位于以或~~~开头的行尾时插件会弹出语言列表其中包含CSS、LESS、SCSS条目分别对应css、less、scss信息字符串。该补全会在插入信息字符串后自动补齐结束分隔符并把光标置于代码块中间。匹配逻辑使用正则/^\s{0,3}[~]{3,}\s*{?(.*)/并支持欧洲键盘死键场景下的容错处理。3. 自定义高亮配色由于所有颜色均通过cm-*类与 CSS 变量暴露用户可在 Zettlr 的自定义 CSS 面板中按需覆盖。例如将 Less/SCSS 注释改为更醒目的颜色只需覆写.cm-comment或直接修改--zettlr-editor-code-base-00变量想要整体换肤则可覆写codeTheme中任意一个--zettlr-editor-code-*变量。深色模式下的代码前景由dark .code规则--zettlr-editor-code-base-1单独控制浅色/深色可分别定制。4. 语言分组参考如需扩展测试覆盖可参照 Start.md 的目录结构配置语言Config.md、CSS 风格语言CSS.md、企业语言Enterprise.md、函数式语言Functional.md、Lisp 系语言Lisp.md、标记语言Markup.md、杂项语言Miscellaneous.md、协议与数据格式Protocols.md、科学计算语言Scientific.md、脚本语言Scripting.md、系统编程语言System.md。CSS.md承担的是其中CSS 风格语言CSS、Less、SCSS这一分组的高亮验收职责。小结Zettlr 对 CSS、Less、SCSS 的语法高亮是一条信息字符串 →codeLanguages注册表 → Lezer 语言解析器 → 语法树标签 →cm-*CSS 类 → Solarized CSS 变量的完整链路。理解这条链路既能让你在写作 Markdown 时正确选择代码块信息字符串也能让你通过自定义 CSS 精准控制三类样式语言的最终呈现而scripts/test-gui/test-files/Syntax Highlighting/CSS.md这份测试文档正是验证这一链路是否完好的标准化样例。【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考