ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

VNote Markdown 语法指南:从基础语法到图表与数学公式的完整实战手册

VNote Markdown 语法指南:从基础语法到图表与数学公式的完整实战手册 桌面应用知识管理【免费下载链接】vnoteA pleasant note-taking platform in native C.项目地址https://gitcode.com/gh_mirrors/vn/vnote点击查看免费下载VNote 是一款原生 C 实现的 Markdown 笔记平台本文以 VNote 内置默认笔记本中的 Markdown Guide 为骨架系统讲解 VNote 支持的 Markdown 语法全集标题、强调、列表、表格、图片、代码块、图表Flowchart.js / Mermaid / WaveDrom、UMLPlantUML、Graphviz、数学公式、任务列表、脚注、警告块等。读完本文你将能够直接在 VNote 中写出排版精美的笔记并理解每个语法元素背后的渲染引擎与配置开关遇到渲染异常时也能快速定位原因。指南的由来VNote 内置的默认笔记本示例这份指南并不是随随便便的一篇文档而是 VNote 首次运行First Run时自动为用户创建“默认笔记本”所附带的学习示例。在仓库中它位于Markdown Guide.md英文版markdown指南.md中文版这两个文件与Welcome.md、欢迎使用.md等一起被登记在资源清单 extra.qrc 中打包进vnote_extra.rcc。首次启动时FirstRunController 会从内置资源:/vnotex/data/extra/default-notebook把整个示例笔记本树复制到用户的笔记根目录并自动打开它。也就是说当你第一次打开 VNote 看到这个 Markdown 指南时它其实已经被复制为你真实笔记库中的一个普通文件了——你可以直接在里面试验、修改甚至删掉它。在开始逐条学习语法之前先记住 VNote 对 Markdown 的总体定位并不存在一个标准的 Markdown 语法很多编辑器都会添加自己的扩展语法。为了兼容性VNote 只支持那些被广泛使用的基本语法外加少量自有的实用性扩展如图片尺寸、警告块、公式序号。这意味着你用 VNote 写的文档在其他 Markdown 平台上通常也能正常渲染。如何上手 Markdown官方指南给出的学习路径非常务实逐个语法元素学习。刚开始掌握标题和强调两种语法就足以写出基本文档之后每隔一两天学习一个新语法并不断练习。下面的语法指南就是一份可以按顺序刷完的清单。VNote 的 Markdown 渲染架构源码视角在逐条学习语法前先了解这些语法在 VNote 内部是如何被“翻译”成排版结果的这对理解“为什么 VNote 支持这个语法”“为什么有的语法不生效”非常有帮助。VNote 的 Markdown 解析核心是markdown-it及其一系列插件。在 MarkdownEditorConfig::defaultViewerResource() 中可以看到阅读器默认加载的全部前端资源资源组对应能力关联语法markdown_itmarkdown-it 及插件集合配置清单基础语法 扩展语法prismPrism 代码高亮代码块mermaidmermaid.jsMermaid 图表flowchart.jsflowchart.jsFlowchart 图表wavedromwavedrom.jsWaveDrom 时序图mathjaxmathjax.js数学公式plantumlplantuml.jsPlantUMLgraphvizgraphviz.jsGraphvizmark.jsmark.min.js搜索结果高亮markdown-it 插件与语法的对应关系也很清晰加载清单markdown-it-mark.min.js→标记语法markdown-it-sub.min.js/markdown-it-sup.min.js→~下标~/^上标^语法markdown-it-task-lists.js→[x]任务列表markdown-it-footnote.min.js→[^1]脚注markdown-it-imsize.min.js→ 图片800x600尺寸扩展markdown-it-container.min.js→::: alert-info警告块markdown-it-texmath.js→$...$/$$...$$数学公式在编辑模式侧PreviewHelper 中的checkPreviewSourceLang()负责识别代码块语言并决定是否触发就地预览in-place previewflow/flowchart、mermaid、wavedrom、puml/plantuml、graphviz、mathjax都是被识别的预览语言。默认启用就地预览的图源包括 FlowChart、Mermaid、WaveDrom、PlantUml、Graphviz、MathPreviewHelper 构造函数并且每个图块的异步渲染结果都有 LRU 缓存与防抖发布机制保证编辑长文档时的流畅性。语法指南标题Markdown 用#的个数表示标题层级VNote 支持从h1到h6共六级标题# This is a h1 tag ## This is a h2 tag ###### This is a h6 tag注意#之后需要至少一个空格一个标题应该占一整行。强调用*或_包裹文本实现斜体用双*或双_实现加粗*This text will be italic* _This text will be italic_ **This text will be bold** __This text will be bold__注意VNote 推荐使用*兼容性和视觉一致性更好如果渲染失败请尝试在第一个*之前以及最后一个*之后添加一个空格。当被标记的文本以全角标点如中文句号、括号开始或结尾时一般都需要前后各补一个空格。列表无序列表用*、-或开启无序列表缩进 4 个空格或用 Tab生成嵌套子项* Item 1 This is a text under Item 1. Notice that there are two spaces at the end above. * Item 2 * Item 2a * Item 2b * Item 3 To end a list, there should be one empty line above.注意示例中“Item 1 下面那段文字”的上一行末尾有两个空格——这是 Markdown 的软换行标记用于在列表项内换行而不结束列表。有序列表1. Item 1 1. Item 2 Notice that the sequence number is irrelevant. Markdown will change the sequence automatically when renderring. 3. Item 3 1. Item 3a 2. Item 3b 4. Item 4注意列表前面的序号其实是无关紧要的渲染时 Markdown 会自动重排编号。因此你完全可以全部写成1.让渲染器替你编号。结束一个列表需要在列表结束后插入一个空行。表格用管道符|和分隔行---搭建表格GFM 风格管道表格| col 1 | col 2 | col 3 | | --- | --- | --- | | cell1 | cell2 | cell3 | | cell4 | cell5 | cell6 |VNote 对表格还提供了额外的编辑能力配置项smartTable默认开启默认间隔 1000ms见 markdowneditorconfig.h会在编辑表格源码时自动对齐列alignTableSource可以在直接编辑或表格控件提交后对齐管道表格源码该选项默认关闭属于“参与式”开关不会在加载文档时改动已有源码见 markdowneditorconfig.h。此外表格还支持就地预览inplacePreviewSources中的table标志markdowneditorconfig.h会把表格渲染成可编辑的电子表格样式修改后直接回写 Markdown 源码。图片和链接Image Alt Text Image Alt Text Image Alt Text Image Alt Text Image Alt Text Link Text注意VNote不推荐使用参考式的图片链接即[img]: url定义、![alt][ref]引用的形式因为 VNote 不会预览这类图片800x600是 VNote 基于markdown-it-imsize提供的尺寸扩展宽x高、宽x只限宽、x高只限高三种写法都支持且可以搭配悬停文字与图片尺寸相关的阅读器配置还有constrainImageWidth限制图片宽度默认开启与imageAlignCenter图片居中默认关闭见 markdowneditorconfig.h。块引用用标记引用段落As VNote suggests: VNote is the best Markdown note-taking application ever. THere is two spaces after ever. above to insert a new line. It also suggests: VNote is good. Here is another sentence within the quote.注意标记后面需要至少一个空格连续的多行引用可以只在第一行写一个后续行会自动并入该引用块示例中ever.后面有两个空格这是为了在引用块内部插入一个换行软换行注意“It also suggests:”示例展示的是引用块外的普通文字会按普通段落继续渲染。代码块VNote 支持围栏fenced代码块可以用三个反引号或三个波浪号开启并可指定语言标识符lang This is a fenced code block. ~~~cpp This is another fenced code block. ~~~注意lang用于指定代码语言可选如果不指定VNote 不会尝试高亮代码代码高亮由 Prism 完成VNote 内置 prism.min.js 及按需加载的语言模块一个好习惯在代码块前面加一个空行避免与其他块元素粘连造成解析歧义阅读模式下代码块默认显示行号codeBlockLineNumber默认开启长行是否自动换行由codeBlockLineWrap控制默认关闭见 markdowneditorconfig.h。图表VNote 支持三种轻量图表引擎。用法统一在围栏代码块中声明特定语言然后在代码块内写图表定义。Flowchart.js语言flow或flowchart画流程图Mermaid语言mermaid画时序图、甘特图等WaveDrom语言wavedrom画数字时序波形图。例如一个 Flowchart 流程图flowchart ststart: Start:http://www.google.com[blank] eend:http://www.google.com op1operation: My Operation sub1subroutine: My Subroutine condcondition: Yes or No?:http://www.google.com ioinputoutput: catch something... st-op1-cond cond(yes)-io-e cond(no)-sub1(right)-op1 这三种引擎的 JS 资源随 VNote 一起打包分发mermaid.js、flowchart.js、wavedrom.js阅读器默认全部启用markdowneditorconfig.cpp。在编辑器中PreviewHelper会对这些语言触发就地预览图表直接以图片形式渲染在代码块下方previewhelper.cpp。UMLVNote 支持 PlantUML 绘制 UML 图。使用语言pumlplantuml同样被识别见 previewhelper.cpppuml startuml Bob - Alice : hello enduml PlantUML 的渲染有两条路径对应配置项见 markdowneditorconfig.hWeb 路径webPlantUml默认开启使用 JavaScriptplantuml.js在线渲染可通过plantUmlWebService覆盖默认服务地址本地路径设置plantUmlJarPlantUML JAR 文件路径或plantUmlCommand自定义渲染命令%1为输出格式占位符后走本地渲染输出格式由plantUmlFormat决定仅接受png或svg默认svg。GraphvizVNote 支持 Graphviz 绘制有向图/流程图语言标识符为dotdot digraph G { A - B; B - C; } 同样有两种渲染路径webGraphviz默认开启使用内置 graphviz.js 渲染关闭后则使用graphvizExe指定的本地 Graphviz 可执行文件markdowneditorconfig.h。数学公式VNote 支持数学公式默认的公式块分隔符是$$...$$行内公式分隔符是$...$。使用规则如下行内公式不能跨多行形如3$abc$、$abc$4、$ abc$和$abc $的文本不会被解析为公式$必须紧贴数学内容且首尾不能是空白或数字使用\转义$开始的$$之前以及结束的$$之后只允许出现空格字符在公式块内使用\\换行。VNote 也支持用语言为mathjax的围栏代码块书写公式块mathjax $$ J(\theta) \frac 1 2 \sum_{i1}^m (h_\theta(x^{(i)})-y^{(i)})^2 $$ 公式块支持公式序号——在公式块结束的同一行末尾写上编号即可$$vnote x markdown awesome$$ (1.2.1)从源码看数学渲染由markdown-it-texmath插件完成markdown-it-texmath.js底层引擎在 KaTeX 与 MathJax 之间可切换配置项mathRenderer支持mathjax与katex两个取值默认katex见 markdowneditorconfig.cpp同时mathJaxScript可以覆盖内置的 MathJax 脚本地址markdowneditorconfig.h。数学块同样支持就地预览inplacePreviewSources中的math标志markdowneditorconfig.h。行内代码用单个反引号包裹行内代码Here is a inline code.如果要在行内代码中显示反引号需要增加包裹用的反引号个数想插入一个需要用两个反引号包裹 想插入两个则需要用三个反引号包裹。删除线用双波浪号~~包裹文本实现删除线GFM 风格Here is a ~~text~~ with strikethrough.任务列表任务列表是列表项与复选框的结合。[x]表示已完成[ ]表示未完成* [x] this is a complete item. * [ ] this is an incomplete item.注意[x]或[ ]后要跟一个空格再接任务描述。任务列表由markdown-it-task-lists插件渲染且支持与嵌套列表组合使用。脚注脚注由两部分组成正文中的引用标记[^1]与文末的定义This is a footnote [^1]. [^1]: Here is the detail of the footnote.注意正文标记与定义中的编号需要一致^1、^2……。脚注由markdown-it-footnote插件支持markdowneditorconfig.cpp。本指南自身也使用了该语法——文末的[^1]就是一处脚注示例。上标和下标上标用^...^包裹1^st^下标用~...~包裹H~2~O。This is the 1^st^ superscript. This is the H~2~O subscript.注意下标~...~与删除线~~...~~都使用波浪号注意区分个数——单个~是下标成对~~是删除线。标记用双等号...包裹文本实现荧光笔式的高亮标记Lets mark the word.该语法由markdown-it-mark插件支持markdowneditorconfig.cpp渲染为mark语义。警告块VNote 支持 Bootstrap 风格的警告块alert。语法是:::加变体名作为块的开始与结束内部为普通段落::: alert-info This is an info text. ::: ::: alert-danger This is a danger text. :::可用变体共 8 种alert-primary alert-secondary alert-success alert-info alert-warning alert-danger alert-light alert-dark警告块由markdown-it-container插件解析markdowneditorconfig.cpp同时需要 globalstyles.css 提供对应配色样式。换行和段落换行软换行在当前行末尾添加两个空格再回车。VNote 提供快捷键ShiftEnter自动补上两个空格并换行新段落插入一个空行再输入新段落文本一般来说在一个块元素代码块、列表、块引用等之后应插入一个空行来显式结束该元素否则后续文本可能被“吸进”块元素内。进阶如何让这些语法“按你的方式”工作前面各节提到的渲染行为大部分都可以在 VNote 的 Markdown 编辑器设置中调整。对应的持久化配置定义在 MarkdownEditorConfig配置段名为markdown_editor常用开关汇总如下配置键默认值作用mathRendererkatex数学公式引擎katex或mathjaxwebPlantUml/webGraphviztrue是否用 Web 方式渲染 PlantUML / GraphvizplantUmlJar/plantUmlCommand空本地 PlantUML 渲染路径命令优先级高于 JARplantUmlFormatsvgPlantUML 输出格式仅png/svgconstrainImageWidthtrue阅读模式限制图片宽度imageAlignCenterfalse图片是否居中显示codeBlockLineNumbertrue阅读模式代码块行号codeBlockLineWrapfalse阅读模式代码块长行自动换行smartTable/smartTableIntervaltrue/1000编辑表格源码时的自动对齐与间隔毫秒inplacePreviewSourcesimagelink;codeblock;math;table就地预览源按;分隔headingFoldingtrue标题折叠protectFromXsstrue阅读模式是否防范 XSShtmlTagtrue是否允许 Markdown 源码中的 HTML 标签autoBreaktrue是否把\n视为换行linkifytrue是否自动把 URL 样式的文本转为链接这些开关在设置界面的 Markdown 编辑器页markdowneditorpage.cpp中均有对应 UI修改后即时生效并写入配置文件。小结VNote 的 Markdown 支持可以总结为三条主线通用基础语法标题、强调、列表、表格、引用、代码块、行内代码——这些遵循被广泛使用的 GFM 风格保证跨平台兼容实用性扩展图片尺寸、任务列表、脚注、上下标、标记、警告块、公式序号、ShiftEnter 软换行——提升日常笔记效率图表与公式Flowchart.js、Mermaid、WaveDrom、PlantUML、Graphviz、MathJax/KaTeX——让笔记从纯文本升级为工程文档。当你遇到“语法不生效”的问题时建议按这个顺序排查先检查是否遵循了本文“注意”中的格式约束空格、空行、整行占位再检查对应资源是否被关闭见上表配置项最后确认编辑器/阅读器的就地预览源设置。掌握这份指南就等于掌握了 VNote 书写层的完整能力地图。赞分享桌面应用知识管理【免费下载链接】vnoteA pleasant note-taking platform in native C.项目地址https://gitcode.com/gh_mirrors/vn/vnote点击查看免费下载相关推荐VNote Markdown 语法指南从基础语法到图表、公式的完整实战手册VNote Markdown 语法指南从基础语法到图表、公式的完整实战手册 本文是 VNote原生 C 编写的高效笔记平台内置《Markdown 指南桌面应用知识管理MarkText Markdown 语法完全指南从基础排版到数学公式与图表渲染MarkText Markdown 语法完全指南从基础排版到数学公式与图表渲染 MarkText 是一个面向 Linux、macOS 与 Windows 的桌面应用富文本Gatsby 中的 Markdown 语法完整指南从基础语法、Frontmatter 到 MDX 实战Gatsby 中的 Markdown 语法完整指南从基础语法、Frontmatter 到 MDX 实战 Markdown 是 Gatsby 站点写作内容文章前端静态站点Web框架创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表