前端代码编辑器UI组件开发工具【免费下载链接】aceAce (Ajax.org Cloud9 Editor)项目地址https://gitcode.com/gh_mirrors/ac/ace点击查看免费下载AceAjax.org Cloud9 Editor自带完整的 reStructuredTextRST编辑支持包括语法高亮、代码片段snippets与模式注册。本文以仓库内 demo/kitchen-sink/docs/rst.rst 这篇经典的《ReStructuredText Primer》示例文档为教材系统讲解 RST 的核心语法段落、内联标记、列表、代码块、章节、图片指令并深入 src/mode/rst.js 与 src/mode/rst_highlight_rules.js 的源码剖析 Ace 如何用状态机分词器逐条识别这些语法帮助你既学会写 RST又理解其在编辑器中的着色原理。一、示例文档的定位厨房水槽里的 RST 教材demo/kitchen-sink/是 Ace 的“厨房水槽”演示页demo/kitchen-sink/demo.js它内置了大量语言的示例文档用于在浏览器中直观展示各模式的高亮效果。其中 demo/kitchen-sink/docs/rst.rst 收录的是一份流传甚广的 reStructuredText 入门教程作者 Richard Jones公共领域授权几乎覆盖了 RST 的所有日常语法点段落与缩进规则内联标记斜体、粗体、等宽字面量、转义三种列表枚举、项目符号、定义预格式化代码块::字面块章节标题与文档标题/副标题图片指令及其参数。正因为这份文档语法密度高它也是 Ace 的 RST 高亮规则的天然“验收样本”——仓库内 src/mode/_test/tokens_rst.json 正是对该文档逐行分词后的期望输出用于自动化测试验证。接下来我们逐节学习这份文档的语法并对照其分词结果理解高亮行为。二、段落与缩进RST 的“结构感”从何而来RST 的核心思想是“用一致的排版模式表达结构”。最基本的模式是段落paragraph一段文本用空行分隔一个空行即可段落内各行必须保持相同的缩进即左缘对齐。This is a paragraph. Its quite short. This paragraph will result in an indented block of text, typically used for quoting other text. This is another one.以空格开头的段落会被识别为缩进引用块indented quote block通常用于引用他人文字。空行是段落与块级元素之间的分隔符——这个约定在后续的列表、代码块中会反复出现。从分词测试 src/mode/_test/tokens_rst.json 可以看到这类普通文本行在高亮规则中被映射为text即默认前景色不做特殊强调。三、内联标记斜体、粗体、等宽字面量与转义在段落内部你可以用特殊字符对文字做内联标记inline markup*italics*—— 单个星号包裹为斜体**bold**—— 两个星号包裹为粗体double back-quotes—— 双反引号包裹为等宽字面量inline literal内部不再做任何进一步解析星号等特殊字符原样保留。一个关键特性是 RST 对特殊字符很“聪明”孤立的星号不会触发标记例如5*630中的星号会被正常处理。但如果你确实想让星号不被当作标记起始需要用反斜杠转义\*或者把它包进双反引号字面量里例如*原文档特别强调了一个实用规则内联标记就像圆括号一样必须紧贴在被标记文本的前后如果标记符号两侧有空白、或位于单词中间则不会被识别。这也是理解高亮规则中startStringPrefix与endStringSuffix两个正则的前提后文会详细展开。在分词结果中这类结构对应了三个状态机的目标 tokenmarkup.bold—— 粗体markup.italic—— 斜体support.function—— 双反引号字面量literal。例如对原文*reStructuredText*分词结果依次为[markup.italic,*]、[markup.italic,reStructuredText*]。四、三种列表枚举、项目符号与定义列表必须另起新段即前面要有空行列表项可以包含多个段落和子列表只要后续内容的左缘与列表项首行文字对齐即可。4.1 枚举列表Enumerated以数字、字母或罗马数字开头后跟句点.、右括号)或被括号( )包围所有形式都被识别1. numbers A. upper-case letters and it goes over many lines with two paragraphs and all! a. lower-case letters 3. with a sub-list starting at a different number 4. make sure the numbers are in the correct sequence though! I. upper-case roman numerals i. lower-case roman numerals (1) numbers again 1) and again注意不同枚举样式的浏览器渲染效果未必一致但作为标记语法它们都是合法的。4.2 项目符号列表Bulleted与枚举列表类似用-、或*开头* a bullet point using * - a sub-list using - yet another sub-list - another item4.3 定义列表Definition定义列表由“术语term”和“该术语的定义definition”组成术语为一行短语定义是相对术语缩进的一个或多个段落或块级元素且术语与定义之间不允许空行what Definition lists associate a term with a definition. *how* The term is a one-line phrase, and the definition is one or more paragraphs or body elements, indented relative to the term. Blank lines are not allowed between term and definition.从分词结果看列表项的行首标记如1.、A.、*、-会被高亮为markup.heading这与高亮规则中listtoken 的映射一致。五、预格式化与代码块::字面块要嵌入一段“原样保留、绝不改动”的预格式化文本只需在前一段落末尾加上::随后缩进的文本即为字面块当文本缩进回到字面块之前的段落层级时字面块结束An example:: Whitespace, newlines, blank lines, and all kinds of markup (like *this* or \this) is preserved by literal blocks. Lookie here, Ive dropped an indentation level (but not far enough) no more example若某一段落只有::则该::会从输出中移除仅作为字面块的引导符:: This is preformatted text, and the last :: paragraph is removed字面块是 RST 中呈现代码示例的标准手段也是 Ace 分词器中codeblock状态的典型输入见第七节。六、章节、文档标题与图片指令6.1 章节标题Section Headers章节标题由一行文字加上**装饰线adornment**组成可以只有下划线也可以上下线都有装饰字符可以是-----、、~~~~~~等任意非字母数字字符 -: ~ ^ _ * # 。下划线必须至少与标题文字等长并且同一装饰风格代表同一层级要保持一致Chapter 1 Title Section 1.1 Title ----------------- Subsection 1.1.1 Title ~~~~~~~~~~~~~~~~~~~~~~ Section 1.2 Title ----------------- Chapter 2 Title 渲染后得到的层级结构相当于如下伪 XML缩进表示嵌套无结束标签section title Chapter 1 Title section title Section 1.1 Title section title Subsection 1.1.1 Title section title Section 1.2 Title section title Chapter 2 Title章节标题本身可以直接作为链接目标引用Lists_即链接到名为 Lists 的标题若标题含空格如text styles则需用反引号引用text styles_。6.2 文档标题与副标题Document Title / Subtitle文档标题与章节标题不同通常有独立排版HTML 输出中默认居中。规则是在文档开头使用一种独有的装饰风格表示文档标题紧随其后用另一种独有的装饰风格表示副标题 Document Title ---------- Subtitle ---------- Section Title ...注意“Document Title”与“Section Title”虽然都用等号但它们属于互不相关的独立风格。上下线均有的标题文字可以为了美观做缩进仅下划线的标题不能。6.3 图片指令Image DirectiveRST 用指令directive扩展文档功能图片是最常见的指令之一.. image:: images/biohazard.png.. image::后的部分即图片文件名。如果需要为 HTML 输出补充元信息可以附带指令选项.. image:: images/biohazard.png :height: 100 :width: 200 :scale: 50 :alt: alternate text指令是理解 RST 高亮的重要入口在分词器中指令名如image::、seealso::、Note::会被识别为keyword.operator指令正文则进入codeblock状态高亮为support.function。七、深入源码Ace 的 RST 高亮是如何实现的7.1 模式注册与入口RST 模式在 src/mode/rst.js 中定义它继承自文本模式仅替换高亮规则并声明自身 id 与关联的 snippets 文件var Mode function() { this.HighlightRules RSTHighlightRules; }; oop.inherits(Mode, TextMode); (function() { this.type text; this.$id ace/mode/rst; this.snippetFileId ace/snippets/rst; }).call(Mode.prototype);同时src/ext/modelist.js 中将 RST 注册到扩展名映射中RST: [rst]即.rst文件会自动匹配该模式。7.2 高亮规则的 token 语义映射src/mode/rst_highlight_rules.js 先定义了语义 token 到 Ace 主题样式的映射语义token章节标题装饰线、列表项标记markup.heading表格线constant指令名::、image::等keyword.operator链接/锚点/脚注定义、替换引用string/markup.underline.list粗体markup.bold斜体markup.italic字面量代码块、行内代码support.function注释comment7.3 行首规则标题、指令、列表、表格start状态中的规则按优先级排列典型包括标题装饰线(^)([\\\\-:\.~\^_\\#])(\2{2,}\s$)只高亮标题的装饰线部分。注释里特别说明由于 Ace 分词器不支持回溯标题文字本身无法与装饰线一并着色因此仅突出下划线。指令(^\\s*\\.\\. )([^: ]::)(.*$)将..视为普通文本、指令名标为keyword.operator其余部分进入codeblock状态单独成段的::$也会切入codeblock。链接/锚点定义(^\\.\\. _[^:]:)(.*$)与(^__ )(https?://.*$)分别匹配命名锚点定义与独立的下划线链接。脚注定义^\\.\\. \\[[^\\]]\\]。注释块^\\.\\. .*$匹配后进入comment状态。列表项三条规则分别匹配* -项目符号、A. / 1. / i.等枚举前缀、以及(1)/1)括号形式。表格^{2,}(?: {2,})$匹配简单表格分隔线^\\-{2,}...与^\\{2,}...匹配网格表格的横线行内孤立的|则作为列分隔符优先级最低。7.4 内联标记的前后置约束内联规则复用了两个精心设计的正则var startStringPrefix (^|\\s|[\(\\[{\\-/:]); var endStringSuffix (?:$|(?\\s|[\\\\.,;!?\\-/:\)\\]}]));startStringPrefix要求标记起始符前面必须是行首、空白或开放类标点杜绝“单词中间”误触发endStringSuffix要求结束符后面必须是行尾、空白或闭合类标点。这正是原文档“内联标记像圆括号、必须紧贴文本”这一规则的代码级落地。双反引号进入 code 状态、** 进入 bold 状态、* 进入 italic 状态、 进入link状态、 :role:与_ 进入entity状态各自直到遇到对应的闭合符才返回start。7.5 块级状态机codeblock 与 commentcodeblock与comment两个状态逻辑一致只要行首有缩进^ .$或为空行^$就保持当前状态继续累积一旦遇到非空且不缩进的行就通过空正则规则回到start。这与 RST“字面块/注释块以缩进回退为结束标志”的语义完全吻合。7.6 自动化验证tokens_rst.jsonsrc/mode/_test/tokens_rst.json 记录了本示例文档逐行分词的期望结果是 RST 高亮规则的回归测试样本。例如文档首部的标题装饰线被切分为[markup.heading,].. seealso::被切分为[text,.. ]、[keyword.operator,seealso::]随后 URL 行以support.function身份留在codeblock状态行内*reStructuredText*被识别为markup.italic等。如果你在修改高亮规则后需要验证行为可参考该文件比对输出。八、配套能力RST 代码片段SnippetsAce 还为 RST 提供了一组输入片段定义在 src/snippets/rst.snippets.js 中配合this.snippetFileId ace/snippets/rst自动加载触发:生成字段:\${1:field name}: \${2:field body}触发*生成*\${1:Emphasis}*触发**生成**\${1:Strong emphasis}**触发_生成超链接名及.. _\$1: ${2:link-block} 锚点定义触发或-生成带装饰线的标题模板触发cont:生成.. contents::目录指令。九、在 Ace 中启用 RST 模式在你的页面中只需将编辑器会话的 mode 设为ace/mode/rst即可获得高亮与 snippets 支持div ideditor.. hello world/div script srcace.js/script script var editor ace.edit(editor); editor.session.setMode(ace/mode/rst); /script或通过 modelist 按扩展名自动切换.rst文件将被 src/ext/modelist.js 自动识别为 RST 模式。kitchen-sink 演示页demo/kitchen-sink/demo.js正是加载 demo/kitchen-sink/docs/rst.rst 作为默认输入打开即可直观看到本文所述每种语法在编辑器中的实际着色效果。十、小结reStructuredText 通过“排版即结构”的简洁设计覆盖了从段落、内联样式到列表、代码块、章节与图片指令的完整文档写作需求而 Ace 用一套分层清晰的状态机规则start/codeblock/code/bold/italic/entity/link/comment忠实还原了这些语义并有tokens_rst.json提供逐行验证。学习本文后你既可以用 demo/kitchen-sink/docs/rst.rst 作为语法速查手册也可以基于 src/mode/rst_highlight_rules.js 理解乃至定制自己的 RST 高亮行为。赞分享前端代码编辑器UI组件开发工具【免费下载链接】aceAce (Ajax.org Cloud9 Editor)项目地址https://gitcode.com/gh_mirrors/ac/ace点击查看免费下载相关推荐Ace编辑器终极教程如何实现支持120语言的语法高亮Ace编辑器终极教程如何实现支持120语言的语法高亮 Ace编辑器Ajax.org Cloud9 Editor是一款功能强大的代码编辑器以其高效的语法前端代码编辑器UI组件开发工具终极指南如何用Mayavi快速实现Python 3D科学数据可视化终极指南如何用Mayavi快速实现Python 3D科学数据可视化 Mayavi是一个强大的Python 3D科学数据可视化库专为科研人员和数据分析师设计。Zotero插件突然失效深入分析兼容性问题的根源与应对策略Zotero插件突然失效深入分析兼容性问题的根源与应对策略 当Zotero Style插件突然停止工作时许多研究者都会感到困惑和无助。这不仅仅是插件本身的问桌面应用知识管理科研上一篇如何用 16kpatch 补丁为 IJKPlayer 编译支持 16KB page size 的 so 并验证对齐下一篇Bokeh Movies 示例基于 Bokeh Server 的电影数据交互查询可视化仪表盘创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考