打赏°内容标记°备忘与警示GitHub Style Alert以下为内嵌更丰富排版内容的示例标签单级标签多级标签标签链接进度条面包屑刮刮卡刮刮卡示例注音上标式注音注音示例-1注音示例-2代码式注音注音示例-1注音示例-2°内容导航章节自动编号这是三级章节示例这是四级章节示例这是五级章节示例这是六级章节示例继续上次的阅读导航中心逐章导航逐段导航插图导航长图片与双题注示例文库导航脚注导航°演示与出版°内容助手复制内容插图全屏显示表格阅读模式试试点击表格的任意单元格，或让鼠标光标在以下表格行间进行移动换行版式画中画°演示辅助聚光灯激光笔Mermaid 图表元素高亮正文宽度适配°出版辅助标记不发布的内容社交分享Open Graph Protocol链接地图长内容自动折叠自定义欢迎页内容链接失效与规范检查链接内容识别链接内容转换°外观模板主题预置的模板主题定制模板主题字体风格封面与封底最小化的文档封面内容示例本文档的封面内容示例本文档的封底内容示例Dark ModeGray Mode更美观的 MermaidMermaid 图表题注与自动编号Mermaid 样式优化与扩展Mermaid 的流程图Mermaid 的类图Mermaid 的状态图Mermaid 的顺序图更实用美观的公式行内混排的公式独占一行的公式块（```math 语法）独占一行的公式块（$$ 语法）表格内的公式°不杂项插件预置选项插件调校参数快捷键操作汇总跨平台与动效支持延伸内容章节标题内容注意事项图片地址扩展应用说明基于色轮的配色方案

打赏

打赏 VLOOK™

若喜欢 VLOOK™ 的话，可以贡献一杯咖啡 :-)If you like VLOOK™, you can contribute a cup of coffee :-)
打赏 VLOOK™Donate VLOOK™

感谢打赏支持 VLOOK™ 的客官（部分名单）/ Thanks for donate VLOOK™ (partial donors)

＊山、＊星、＊丽、一＊秋、＊军、＊鹏、李＊6、＊无、H＊t、＊二、f＊y、＊宇、＊琛、＊辉、＊秋、＊笑、＊豫、l＊a、＊心、整＊9、＊国、＊拉、＊龙、＊应、＊销、＊哦、E＊y、……

°内容标记

°备忘与警示

GitHub Style Alert

Markdown 粉Q「VLOOK™ 的主题支持 GitHub Style Alert 吗？（需要 Typora1.8.3+ 或更高版本支持）」

VLOOKAT2 在排版样式等方面进行适配和优化，同时支持「信息分类名称」自动匹配多语言环境。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

「GitHub Style Alert」在文档中主要用于提示、备忘或强调关键信息时使用的排版样式，由对应信息分类的图标、名称、内容等组成。

 

VLOOK™ 对 GSA 的优化

  • 提供了「常规、扁平、强调」多种样式风格，可通过定制主题方式进行任意指定风格；

  • 对其内的「文本链接、按钮、高亮」的样式都适配为对应的信息分类的配色（蓝/红/紫/棕/红）。

以下为「扁平」样式示例，更多样式的示例请通过 VLOOK™ 预置的 Hope、Joint 主题进行预览。

语法

在「引用块」内的首行输入以下任一 GitHub Style Alert 的分类信息标识即可自动识别并渲染：

[!NOTE] [!TIP] [!IMPORTANT] [!WARNING] [!CAUTION]

参考示例

更多 GitHub Style Alert 信详见 Typora 更新说明

 

Note

  • Highlights information that users should take into account, even when skimming. Learn more

（备忘。突出用户在浏览时也应考虑的信息） 了解更多 了解更多

 

Tip

  1. Optional information to help a user be more successful. Learn more

（提示。可选信息，帮助用户取得更大成功） 了解更多 了解更多

 

Important

Crucial information necessary for users to succeed. Learn more

（重要的。对用户成功至关重要的信息） 了解更多 了解更多

 

Warning

Critical content demanding immediate user attention due to potential risks. Learn more

（注意。由于潜在风险，需要用户立即关注的关键内容） 了解更多 了解更多

 

Caution

Negative potential consequences of an action. Learn more

（警告/禁止。行动的潜在负面后果） 了解更多 了解更多

 

以下为内嵌更丰富排版内容的示例

 

Note

备忘。突出用户在浏览时也应考虑的信息。

这是引用块小标题 1

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是详情折叠分栏 1

Note 代码块

这是文本链接 ，这是 按钮链接 ❯

Tip

提示。可选信息，帮助用户取得更大成功。

这是引用块小标题 2

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是详情折叠分栏 2

Tip 代码块

这是 文本链接 ，这是 按钮链接 ❯

Important

重要的。对用户成功至关重要的信息。

这是引用块小标题 3

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是详情折叠分栏 3

Important 代码块

这是 文本链接 ，这是 按钮链接 ❯

Warning

注意。由于潜在风险，需要用户立即关注的关键内容。

这是引用块小标题 4

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是详情折叠分栏 4

Warning 代码块

这是 文本链接 ，这是 按钮链接 ❯

Caution

警告/禁止。行动的潜在负面后果。

这是引用块小标题 5

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是详情折叠分栏 5

Caution 代码块

这是 文本链接 ，这是 按钮链接 ❯

 

VLOOK™ 还支持对 GitHub Style Alert 进行分栏排版，详见「GitHub Style Alert 分栏」

 

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

标签

Markdown 粉Q「用 Markdown 写文档，怎样才能通过「标签」这种比较现代的视觉元素来突出关键内容？」

VLOOKAT2 对 Markdown 的「行内代码」内容（如 `标签` ）设置为「斜体」，即可实现好看、实用的「标签」排的版！

 

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

例如这样的「单级标签」：这样的标签Rd 或 那样的标签Bu! 还可以是 渐变的标签T1T2

 

例如这样的「多级标签」：这是标题这是内容Bn 化学式H₂O是水💦Se，还可以这样 ON灯光Gn 灯光OFFGy

 

继续往下看看就知道这是怎么做到的～

单级标签

单级标签是最基础的标签形式，没有进一步的分类或结构化，简单、易于使用，通常用来标识特定常用的信息。

 

例如 VIPBnGd 待处理Rd 需要跟进Bu 重要Pu!

 

语法

  • 将需要设置为标签的文本，先设置用代码符号 ` 包裹 ，并设置为「斜体」

    快捷键操作

    选中文本，然后先按下 Cmd / Control + i 设置为斜体，再按下 ` 则会自动包裹

  • 对应的 Markdown 格式语法为：*`这是标签`*

Tip

  • 支持在标签后添加预置色号来指定颜色（支持常规/强调风格），或渐变色，不指定则默认为 T2 ；

  • 若须修改默认色号，可通过「插件调校参数」 tag 指定。

标签（常规风格）预置色号及示例

预置色号应用场景建议渲染效果
Wn警告、危险、关键事项、删除Wn 常规风格Wn
Rd:Rd 常规风格Rd
Og提醒、注意、修复Og 常规风格Og
Ye关注、优化、备忘、说明Ye 常规风格Ye
Lm提示、参考、新增Lm 常规风格Lm
Gn:Gn 常规风格Gn
Mn:Mn 常规风格Mn
Ol:Ol 常规风格Ol
Aq引用块、公告Aq 常规风格Aq
Cy:Cy 常规风格Cy
Bu信息、资讯Bu 常规风格Bu
Se:Se 常规风格Se
La:La 常规风格La
Vn:Vn 常规风格Vn
Pu延伸、扩展、保留、备用Pu 常规风格Pu
Ro年轻、个性、女性Ro 常规风格Ro
Pk:Pk 常规风格Pk
GdVIP、金融、工程Gd 常规风格Gd
Bn:Bn 常规风格Bn
Gy无效、暂缓、停用、结束Gy 常规风格Gy
Bk黑白、高对比Bk 常规风格Bk
T1当前 VLOOK™ 主题的主色T1 常规风格T1
T2当前 VLOOK™ 主题的辅助色T2 常规风格T2

 

标签（强调风格）预置色号及示例

预置色号应用场景建议渲染效果
Wn!警告、危险、关键事项、删除Wn 强调风格Wn! WnMn 渐变风格WnMn
Rd!:Rd 强调风格Rd! RdGn 渐变风格RdGn
Og!提醒、注意、修复Og 强调风格Og! OgCy 渐变风格OgBu
Ye!关注、优化、备忘、说明Ye 强调风格Ye! YeGd 渐变风格YeAq
Lm!提示、参考、新增Lm 强调风格Lm! LmAq 渐变风格LmYe
Gn!:Gn 强调风格Gn! GnRd 渐变风格GnRd
Mn!:Mn 强调风格Mn! MnWn 渐变风格MnAq
Ol!:Ol 强调风格Ol! OlCy 渐变风格OlOg
Aq!引用块、公告Aq 强调风格Aq! AqLm 渐变风格AqLm
Cy!:Cy 强调风格Cy! CyYe 渐变风格CyYe
Bu!信息、资讯Bu 强调风格Bu! BuOl 渐变风格BuOl
Se!:Se 强调风格Se! SeBn 渐变风格SeOg
La!:La 强调风格La! LaYe 渐变风格LaYe
Vn!:Vn 强调风格Vn! VnPu 渐变风格VnRo
Pu!延伸、扩展、保留、备用Pu 强调风格Pu! PuVn 渐变风格PuYe
Ro!年轻、个性、女性Ro 强调风格Ro! RoRd 渐变风格RoRd
Pk!:Pk 强调风格Pk! PkGd 渐变风格PkLm
Gd!VIP、金融、工程Gd 强调风格Gd! GdYe 渐变风格GdYe
Bn!:Bn 强调风格Bn! BnSe 渐变风格BnGd
Gy!无效、暂缓、停用、结束Gy 强调风格Gy! GyCy 渐变风格GyCy
Bk!黑白、高对比Bk 强调风格Bk! BkOg 渐变风格BkOg
T1!当前 VLOOK™ 主题的主色T1 强调风格T1! T1T2 渐变风格T1T2
T2!当前 VLOOK™ 主题的辅助色T2 强调风格T2! T2T1 渐变风格T2T1

多级标签

多级标签用于更复杂标签场景，一般可以将标签分为二级或三级结构。不同于单级标签的单一信息，多级标签可以体现多维度的信息。

 

二级结构举例 客户等级VIPBnGd 客户等级普通客户Gy 文档密级公开Bu 文档密级机密RoRd 互动类型邮件

三级结构举例 项目阶段需求分析可行性报告 最新版本V2.3betaBuOg

 

语法

  1. 先按「标签」完成设置后；

  2. 在代码符号 ` 包裹的内容前面，或后面添加对应的内容即可

  • 对应的 Markdown 格式语法为：*第1段内容`第2段内容`第3段内容*

扩展玩法

  • 只在单级标签的后面添加内容，则样式相当于二级多级标签的左右样式反转，举例： 前标签-A 标签-A后

  • 突出变量样式：对于「第 2 段内容」，支持的识别变量格式： {{变量}} %变量% $变量$ ${变量} #{变量} var(变量)

Tip

  • 支持在多级标签后添加预置色号来指定颜色（默认为强调风格），或渐变色，不指定则默认色号为 T1

  • 若须修改默认色号，可通过「插件调校参数」 badge 指定。

多级标签预置色号示例

预置色号应用场景建议渲染效果
Wn警告、危险、关键、删除标题内容 {{变量 1}}Wn 标题内容 {{变量 1}}渐变色WnMn
Rd:标题内容 %变量 2%Rd 标题内容 %变量 2%渐变色RdGn
Og提醒、注意、活力、修复标题内容 $变量 3$Og 标题内容 $变量 3$渐变色OgBu
Ye关注、优化、备忘、说明标题内容 ${变量 4}Ye 标题内容 ${变量 4}渐变色YeAq
Lm提示、备忘、参考、新增标题内容 #{变量 5}Lm 标题内容 #{变量 5}渐变色LmYe
Gn:标题内容 var(变量 6)Gn 标题内容 var(变量 6)渐变色GnRd
Mn:标题标签内容Mn 标题标签内容渐变色MnAq
Ol:标题标签内容Ol 标题标签内容渐变色OlOg
Aq引用块、冰凉、公告标题标签内容Aq 标题标签内容渐变色AqLm
Cy:标题Value 1Cy 标题Value 1渐变色CyYe
Bu信息、资讯、海洋标题Value 2Bu 标题Value 2渐变色BuOl
Se:标题Value 3Se 标题Value 3渐变色SeOg
La:标题Value 4La 标题Value 4渐变色LaYe
Vn:标题Value 5Vn 标题Value 5渐变色VnRo
Pu延伸、扩展、重要、保留标题标签内容Pu 标题标签内容渐变色PuYe
Ro年轻、个性、女性标题标签内容Ro 标题标签内容渐变色RoRd
Pk:标题标签内容Pk 标题标签内容渐变色PkLm
GdVIP、金融、工程、奖励标题内容 {{变量 1}}Gd 标题内容 {{变量 1}}渐变色GdYe
Bn:标题内容 %变量 2%Bn 标题内容 %变量 2%渐变色BnGd
Gy常规、无效、暂缓、停用标题内容 $变量 3$Gy 标题内容 $变量 3$渐变色GyCy
Bk黑白、高对比标题内容 ${变量 4}Bk 标题内容 ${变量 4}渐变色BkOg
T1所选用主题的「主色」标题内容 #{变量 5}T1 标题内容 #{变量 5}渐变色T1T2
T2所选用主题的「辅助色」标题内容 var(变量 6)T2 标题内容 var(变量 6)渐变色T2T1

多级标签更多示例

格式渲染效果更多渲染示例
三段式标题内容 1内容 2T1H₂+O=H₂OBu 圆周率3.141592653T2
::化学式H₂O是水💦Se 圆的内角和180度Ye
无标题（第1段）内容 1内容 2Gy灯光OFFGy 国庆节10月1日Rd

 

标签链接

Markdown 粉Q「希望能给标签添加超链接，方便关联与标签相关的其他文档或外部信息」

VLOOKAT2 支持为标签添加超链接，只要选中标签后，直接按 Markdown 超链接语法进行设置即可。

 

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

以下是添加了超链接的标签，来试试看吧～

VIP 定制主题BnGd VLOOK@GitHub VLOOKGitHub@MadMaxChowT1T2 🎁 VIP提交我的定制需求BnGdBnGdBn

 

Tip

因点击「标签」是复制标签内容，所以在导出 HTML 文件后，鼠标悬停在标签后会显示独立的打开链接的入口。

 

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

进度条

Markdown 粉Q「用 Markdown 制作文档时，希望可以将涉及进度的信息更直观体现出来」

VLOOKAT2 这个对于 VLOOK™ 来说真的非常 Easy，组合 Markdown「粗体、高亮」这两个标准格式就可以轻松实现

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

语法

  • 将作为进度的数值内容，设置为以下格式组合：先「粗体」，后「高亮」

    快捷键操作

    选中文本，然后先按下 Cmd / Control + b 设置为粗体，再按下 Cmd / Control + ⇧ Shift + h 设置为高亮即可

  • 对应的 Markdown 格式语法为：**==进度数值==**

支持在进度条后添加预置色号来指定颜色，不指定则默认以具体数值自动适配颜色，如下表所示：

「进度值」说明

  1. 为具体数值时，直接指定固定数值，示例如下：

    • 常规：80.5

    • 溢出：120 -35

  2. 为 ? 时，自动计算紧跟其后任务清单中所有子任务项完成进度。

（编辑时的进度为示意，实际进度以导出 HTML 后的渲染为准）

示例_进度条

默认自适配色号支持指定预置色号==
-25Wn5.5Wn
0Rd10Rd
5Og15Og
19Ye20Ye
20Lm25Lm
39Gn30Gn
40Mn35Mn
59Ol40Ol
60Aq45Aq
79Cy50Cy
80Bu55Bu
99Se60Se
100La65La
125Vn70Vn
-Gy75Gy
:Bk80Bk
:Pu85Pu
:Ro90Ro
:Pk95Pk
:Gd100Gd
:Bn120Bn
:T1-35T1
:T20T2

Gy

自动计算任务项的完成进度示例

任务整体进度 ?

  • 一、分析目标市场需求 ?

    • 调查目标客户群体 ?

      • 制定问卷调查或面对面访谈计划

      • 收集客户对产品或服务的需求和偏好信息

    • 研究竞争对手 ?

      • 分析竞争对手的产品、定价策略和市场占有率

      • 挖掘竞争对手的优势和劣势，并与自身进行比较

  • 二、收集市场数据 ?

    • 查阅行业报告和数据 ?

      • 查阅行业协会发布的行业报告和统计数据

      • 收集行业趋势和发展预测的相关信息

    • 分析市场趋势 ?

      • 通过数据分析工具或软件处理市场数据

      • 发现并解释市场趋势，以指导项目决策

Gy

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

面包屑

Markdown 粉Q「写教程或指引类文档时，对于菜单顺序、分步操作、目录层级等内容，希望可以简单高效地进行排版」

VLOOKAT2 这个对于 VLOOK™ 来说真的非常 Easy，组合 Markdown「斜体、高亮」这两个标准格式就可以轻松实现。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

语法

  • 将作为面包屑的内容，设置为以下格式组合：先「斜体」，后「高亮」

    快捷键操作

    选中内容，然后先按下 Cmd / Control + i 设置为斜体，再按下 Cmd / Control + ⇧ Shift + h 设置为高亮即可

  • 对应的 Markdown 格式语法为：*==这是面包屑内容==*

  • 支持对面包屑内容进行分段的符号： > / \ -> → ▸ ▶︎

  • 在编辑时预览主要样式，并在导出为 HTML 后支持：

    • 自动将「分段符号」进行样式优化

    • 点击复制其原始的信息

Caution

  • 整个段落内容只有面包屑的内容，则会优先被识别为「表格/插图/代码块/多媒体」等内容的题注格式；

  • 面包屑的起始内容不能包含格式（如粗体、斜体）、文字链接。

 

  1. 这是描述菜单顺序的示例：菜单 > 文件 > 导出 > 导出配置，也可以根据需要为某个操作添加文字链接

  2. 这是描述分步操作的示例：登录帐号 ▸ 偏好设置 ▶︎ 修改个人信息，可以用于展示目标操作的入口引导

  3. 这是描述目录层级的示例：/根目录/子目录 1/子目录 1.1、C:\Program Files\Applications

表格内的面包屑示例

表格内的目录层级示例（非独占）表格内的菜单序列（独占）
目录：/根目录/子目录 1/子目录 1.1菜单 -> 文件 → 导出 > 导出配置

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

刮刮卡

Markdown 粉Q「用 Markdown 制作培训类文档时，希望像刮刮卡那样将『答案』先隐藏，点击才显示」

VLOOKAT2 这个对于 VLOOK™ 来说真的非常 Easy，组合 Markdown「斜体、粗体」这两个标准格式就可以轻松实现。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

语法

  1. 将需要设置为隐藏的内容，设置为以下格式组合：先「斜体」，后「粗体」

    快捷键操作

    选中内容，然后先按下 Cmd / Control + i 设置为斜体，再按下 Cmd / Control + b 设置为粗体即可

  2. 提示说明默认为 ••••Bk! ，若要指定只需在粗体前直接添加即可

  • 对应的 Markdown 格式语法为：*提示说明**被隐藏的内容***

（支持在刮刮卡后添加预置色号来指定颜色，不指定则默认为 Gy ）

Tip

若须修改默认色号，可通过「插件调校参数」 coating 指定。

刮刮卡示例
预置色号渲染效果
（不指定时使用默认色号）这是未指定提示的刮刮卡
:最爱吃竹子的动物？熊猫
Rd坚 ␣持Rd 不 ␣懈Rd
Og「水」的英语 MeterMeter ❌Og WaterWater ✅Og
Ye"Good night" in Cantonese?早[zou2] 唞[tau5]Ye
Lm“谢谢”在英语中怎么说？Thank youLm
GnAppSecret 应用密钥cf67c3839f0214dcGn
Aq太阳系第三颗行星？地球Aq
Cy地球上最大洋？太平洋Cy
Bu7 大洲最大的？亚洲Bu
Se世界最高峰？珠穆朗玛Se
Vn人体最大器官？皮肤Vn
Pu最小的行星？水星Pu
Ro最多岛屿的国家？瑙鲁Ro
Pk哪座城市以其斜塔而闻名？比萨Pk
Gd最长的河流是？尼罗河Gd
Bn太阳系中最大的行星？木星Bn
Gy世界上最深的海沟？马里亚纳Gy
T1地球上最大的淡水湖是？贝加尔湖T1
T2世界上最大的陆地哺乳动物是？非洲象T2

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

注音

上标式注音

Markdown 粉Q「希望 Markdown 文档能方便添加注音（如：拼音、外文对照），这样我语言培训文档和电子书就可以更出彩了」

VLOOKAT2 通过对 Markdown 上标语法 ^ ^ 进行了扩展，轻松满足实用的「注音」排版需求！

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

语法

  • 在需要添加注音的任意一个字符后面进行添加对应的注音，并将该「注音」设置为以下格式组合： 先「斜体」，后「上标」

  • 对应的 Markdown 格式语法为：_^注音^_

Important

为区分 Typora 默认使用单星号 *斜体* 标记的斜体，色号中的斜体建议用 Markdown 的另一个斜体的标记语法：下划线 _斜体_

Note

导出 HTML 后的效果等价于 HTML 5 中 ruby、rp、rt 标签，并支持点击注音后进行在线释义或翻译。

注音示例-1

「道dào生一，一生二，二生shēng三，三生万wàn物wùBuRoGn」── 道德经•老子

注音示例-2

多语种的注音应用中/日/韩/英

分类以下为 Markdown 格式的内容渲染效果
注音道_^ㄉㄠ^_ 德_^ㄉㄜ^_ 经_^ㄐㄧㄥˉ^_道ㄉㄠ德ㄉㄜ经ㄐㄧㄥˉ
普通话道_^dào^_ 德_^dé^_ 经_^jīng^_道dào德dé经jīng
粤语道_^dou^_ 德_^däk^_ 经_^gïng^_道dou德däk经gïng
日文鳥_^とり^_山_^やま^_ 明_^あきら^_鳥とり山やま明あきら
韩文대_^Dae^_ 한_^Han^_ 민_^Min^_ 국_^Gug^_대Dae한Han민Min국Gug
中文注音线上释义服务

被注音的文字内容为中文，由 汉典 提供服务

  • 点击注音后打开「汉典」官网，显示对应的「文字」释义

Rd!

非中文注音线上翻译服务

被注音的文字内容不是中文，由 Bing 提供服务

  • 点击注音后打开「Bing 翻译」官网，自动对注音为日文「假名」部分进行翻译

  • 其他情况，则是对被注音的「文字」进行翻译

Bu!

代码式注音

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

Caution

代码式注音为旧注音语法，新建的文档不建议使用！

该特性只作为对旧有文档，或需要同时对多个字添加同一注音的支持。后续版本可能会移除对该语法的支持。

 

语法：`{text}(symbol)`

  • text ：要添加「注音、拼音、注释」的文字

  • symbol ：text 对应的注音、拼音符号，或注释内容

导出 HTML 后的效果等价于 HTML 5 中 ruby、rp、rt 标签，并支持点击注音后进行在线释义或翻译。

Gy

注音示例-1

「{道}(dào)生一，一生二，二{生}(shēng)三，三生{万物}(wàn wù)」── 道德经•老子

注音示例-2

多语种的注音应用中/日/韩/英

分类以为 Markdown 格式的内容渲染效果
注音`{道}(ㄉㄠˋ)` `{德}(ㄉㄜˊ)` `{经}(ㄐㄧㄥˉ)`{道}(ㄉㄠˋ) {德}(ㄉㄜˊ) {经}(ㄐㄧㄥˉ)
普通话`{道}(dào)` `{德}(dé)` `{经}(jīng)`{道}(dào) {德}(dé) {经}(jīng)
粤语`{道德经}(dou däk gïng)`{道德经}(dou däk gïng)
日文`{鳥山}(とりやま)` `{明}(あきら)`{鳥山}(とりやま) {明}(あきら)
韩文`{대 한 민 국}(Dae Han Min Gug)`{대 한 민 국}(Dae Han Min Gug)
中英`{道德经}(The Scripture of Ethics)`{道德经}(The Scripture of Ethics)
英中 1`{The Scripture}(经)` of `{Ethics}(道德)`{The Scripture}(经) of {Ethics}(道德)
英中 2`{The Scripture of Ethics}(道德经)`{The Scripture of Ethics}(道德经)

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容标记

°内容导航

章节自动编号

Markdown 粉Q「希望对文档中章节自动编号根据进行自定义，以适应具体文档的风格、标题内容的组织方式」

VLOOKAT2 VLOOK™ 提供了非常实用个性的章节编号格式选项，可以轻松满足不同文档对章节编号格式的个性要求。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

使用 VLOOK™ 插件后，默认支持对文档内的章节标题进行自动编号，默认的自动编号格式均为阿拉伯数字，如 1. 章节标题3.2.5 章节标题` 。

  • 所有 VLOOK™ 的主题都会自动对 1 ~ 5级 标题进行自动的分级编号；

  • 因为 6 级 标题在 VLOOK™ 中应用于封面与封底、段落小标题的排版等，所以不在自动编号范围内。

可通过「插件预置选项」 vlook-chp-autonum 来指定，在导出 HTML 后生效，具体的格式化示例如下：

自定义章节自动编号格式示例

Tip

若使用的 VLOOK 主题不包括自动编号样式，也可以通过该参数强制指定在导出 HTML 后启用自动编号及对应格式。

Note

更多关于通过 YAML Front Matter 设置插件预置选项的说明，详见：插件预置选项

自定义章节自动编号格式的选项说明

编号选项取值说明选项参考效果预览
层级h1 ～ h5表示 1 级 ～ 5 级目录h3{{###}}1.2.3 xxxxx
前缀任意内容文本如：第、Chapterh1{{Chapter ###.}}Chapter 5. xxxxx
格式none不进行自动编号h2{{#none#}}xxxxx
:#阿拉伯数字。如：1、2、3、4、5h2{{Chapter ###}}Chapter 3.2 xxxxx
:zh中文。如：一、二、三、四、五
注意Rd 对 h1 生效		h1{{第#zh#章}}第一章 xxxxx
:ZH中文大写。如：壹、贰、叁、肆、伍
注意Rd 对 h1 生效		h1{{第 #ZH# 回}}第 伍 回 xxxxx
:alpha英文小写。如：a、b、c、d、E
注意Rd 对 h1 或 -min 生效		h2{{#alpha#}}a xxxxx
:ALPHA英文大写。如：A、B、C、D、E
注意Rd 对 h1 或 -min 生效		h2{{#ALPHA#}}A xxxxx
:roman罗马数字小写。如：i、ii、iii、 iv、v
注意Rd 对 h1 或 -min 生效		h3{{#roman# •}}i • xxxxx
:ROMAN罗马数字大写。如：I、 II、III、IV、V
注意Rd 对 h1 或 -min 生效		h3{{#ROMAN#}IV • xxxxx
扩展选项00
000
...		固定长度占位，不足则左侧补 0h1{{Chapter #00## /}}Chapter 002 / xxxxx
:-min以单级方式显示编号
注意Rd 与 -sup 互斥		h3{{步骤 #0#-min# -}}步骤 01 - xxxxx
:-sup以双级方式显示编号
注意Rd 与 -min 互斥		h2{{附录 #ALPHA-min#.}},h3{{#00#-sup# -}}二级：附录 A - xxx
三级：附录 A.01 - xxx
后缀任意内容文本如：章、.h2{{##-min#}}1）xxxxx

这是三级章节示例

 

这是四级章节示例

 

这是五级章节示例

 

这是六级章节示例

 

继续上次的阅读

Markdown 粉Q「一般发布的静态 HTML 文档，都无法记住上次阅读的位置～」

VLOOKAT2 VLOOK™ 对导出的每一个静态 HTML ，都可以快速定位到上次阅读的位置。

打开之前阅读过的 HTML 文档后，会在右上角侧显示「继续上次的阅读」的按钮，点击回到上次阅读的位置。

稍后该入口会自动隐藏，可通过右上角的 导航历史 导航历史按钮继续上次的阅读（快捷键 H）。

导航中心

Markdown 粉Q「按目录大纲进行导航是文档中很常用的导航方式，适用于内容层次明确，全文档跨章节的快速定位」

VLOOKAT2 VLOOK™ 对导出的 HTML 除自动生成目录大纲外，还支持自动按内容生成分类索引。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

VLOOK™ 通过「导航中心」提供目录大纲与内容索引：

通过工具栏左侧的的 导航中心 导航中心按钮收起/打开导航中心（快捷键 N )

 

导航中心主要特性

  • 除分级目录大纲外，还支持多种「文库」入口

  • 自动对文档的内容进行分类索引，分类包括：插图、表格、代码块、公式、多媒体

  • 目录大纲、文库、分类索引条目均支持按关键字进行分词搜索（不同关键字之间以空格分隔）

  • 自动记录导航历史，可以随时通过可通过右上角的 导航历史 导航历史按钮快速回跳（快捷键 H )

Important

  • 基于 Typora 生成的目录大纲，请在文档中「VLOOK™ 的封面」后添加目录标记 [TOC] ；

  • 若文档无目录大纲和内容索引时，导航中心会默认收起。

逐章导航

Markdown 粉Q「除了大纲外，希望可以按章节顺序一章一章进行浏览。」

VLOOKAT2 由 VLOOK™ 接管后，会自动扩展提供「逐章导航栏」，正如你现在看到顶部的导航栏那样。

当滚动至文档正文区后，会自动在顶部显示逐章导航条，在封面时会自动收起隐藏，支持对 1~5 级章节进行逐章浏览。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

逐章导航快捷键

逐章导航的快捷键功能（逐章导航模式激活后生效）
◀ 或 , 前一个章节
▶ 或 . 后一个章节

逐段导航

Markdown 粉Q「希望在进行文档评审或演示时，按段落一段一段地突出，进行聚焦式浏览。」

VLOOKAT2 直接用鼠标「三击」文档任意段落就可以进入「段落导航」模式了。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

逐段导航快捷键段落导航快捷键（致敬 VI）

快捷键功能
J跳到下一个段落
K跳到上一个段落

插图导航

Markdown 粉Q「希望能按图索骥，快速浏览文档中的所有插图，以及快速定位到文档中对应的位置。」

VLOOKAT2 文档中的所有图片、Mermaid1 图表都支持快速浏览，一键跳转到对应位置。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

  • 所有插图可支持通过在插图浏览器中打开，并进行前后插图的导航；

  • 鼠标悬停在插图后，通过右上角内容助手上的 全屏显示 按钮打开，点击插图浏览器中的插图，也能直接跳转到文档中对应的位置。

支持的插图类型

  • 浏览器支持的所有图片（如：jpg / png / gif / bmp 等）

  • 脚本化图表（如：Mermaid1）

插图导航快捷键

插图导航快捷键功能（打开插图导航后生效）
◀ 或 , 前一张插图
▶ 或 . 后一张插图
长图片与双题注示例

普通的图片示例（长图会自动折叠）

文库导航

Markdown 粉Q「同一类话题或项目有很多 Markdown 文档，希望发布 HTML 后还能方便统一进行组织和访问。」

VLOOKAT2 为每个文档指定作为「文库」索引页的 HTML，这样就可以随时一键直达你「文档宇宙」中的任意文档了。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

  • 文档中配置了「文库」，或在文档中含有文库链接时，在工具栏、目录大纲下方都会显示「文库」入口 字体风格 ；

  • 指定的文库文件默认是会在当前文档的「文库视图」中显示，也可以指定在新标签中显示；

  • 点击任意文库入口即可打开对应的文档，也支持直接通过快捷键 L 打开。

作为「文库」的 HTML 文档，可以是任意一篇使用「Typora＋VLOOK™」生成并导出的 HTML（也可以是任意可访问的网页链接），能直接延用 VLOOK™ 绝大部分排版特性。

 

如何让文档支持「文库导航」？

  1. 首先先确认已按《安装与使用》中的 Step 3•配置导出选项 完成了「元标签」的安装；

  2. 然后在文档的 YAML Front Matter 区域内添加 vlook-doc-lib 配置项及对应的内容，根据需要选择以下任意一种方式进行使用：

方式一：最简化用法

方式二：自定义标题、搜索关键字

方式三：在新标签中打开

若文档需要配置多个文库，可以参考以下分段的配置方式：

Note

  1. 以上「支持搜索的关键字」，不建议添加英文逗号 , ，若要添加，其后不能添加空格；

  2. 更多关于通过 YAML Front Matter 设置插件预置选项的说明，详见：插件预置选项

 

如何让文档中的普通文本链接也能在「文库」中打开？

只须设置文本链接是添加 URL 参数 target=vdl 即可，示例如下：

更多示例效果，详见：链接内容识别

 

如何隐藏已发布文档中指定的「文库导航」入口？

在 HTML 文档访问路径后添加 URL 参数 vdl=off 即关闭对当前文档的文库导航功能，示例如下：

脚注导航

VLOOK™ 可以直接在当前页面位置弹层的方式进行显示，避免在文档中来回跳转。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

点击文末右上角的链接查看效果2

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°内容导航

°演示与出版

°内容助手

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

针对不同形式的内容，提供自适应的快捷辅助功能。目前支持的内容形式包括：表格、插图、标签、刮刮卡、代码与代码块、公式、面包屑

Note

其中，鼠标悬停在以上所支持的内容上就会激活显示匹配的内容助手选项。

复制内容

以上除「刮刮卡」外都支持「复制为 Markdown 格式T1T2」，可通过以下两种方式触发：

组合键触发

先按下 Alt 或 ⌥ option ，并点击 复制 按钮即可

二次点击触发

直接点击 复制 按钮后，会自动激活「复制为 Markdown」复制 ，在 2 秒内再点击一次即可（主要满足在移动设备上访问时使用)

插图全屏显示

支持通过内容助手对插图（图片、Mermaid 图片）一键全屏显示，并可进行前/后浏览翻阅，点这里试试看 ❯

表格阅读模式

Markdown 粉Q「表格行、列很多时，希望能快速显示任意单元格相关的行、列都有哪些？」

VLOOKAT2 无须高大上的设备或方式，VLOOK™ 激活后开箱即用～

  • 鼠标悬停在表格后，通过右上角内容助手上的 表格阅读模式 按钮打开、关闭；

  • 鼠标点击表格上的任意单元格后，会自动聚焦当前单元格及所在的行和列（类似于十字光标）；

  • 支持通过方向键（ ▲ ▼ ◀ ▶ ）进行移动，对于表格行分组折叠的单元格，还可通过 Enter ⏎ 进行展开和收起；

  • 点击文档空白位置，或按下 ESC 临时取消显示。

试试点击表格的任意单元格，或让鼠标光标在以下表格行间进行移动
列 A列 B列 C列 D
第一行左对齐（长内容）居中对齐右对齐（长内容）
第二行（长内容）左对齐居中对齐（长内容）右对齐

换行版式

Markdown 粉Q「在实际文档中会有各种「表格、代码块」，希望在阅读时可以根据需要指定不同换行、不行换行版式便于更好阅读浏览」

VLOOKAT2 安排！VLOOK™ 激活后开箱即用～

鼠标悬停在「表格、代码块」后，通过右上角内容助手上的 换行版式 手工切换为「自动换行」或「不换行」

Note

VLOOK™ 会根据根据表格内容和屏幕宽度，自动适配认换行版式，具体详见这里 ❯❯

 

画中画

Markdown 粉Q「希望插图、表格、代码块、公式也能像视频那样，可以设置为「画中画」的浮动显示模式，方便在文档相关内容间对比」

VLOOKAT2 这个可以有，VLOOK™ 激活后开箱即用～

  • 鼠标悬停在插图、表格、代码块、公式后，通过右上角内容助手上的 画中画 按钮一键开启；

  • 开启后默认缩小为 75% 大小进行显示，也可通过缩放按钮调整为原始大小进行显示。

快去文档中的任意插图、表格、代码块、公式上试试吧～

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°演示与出版

°演示辅助

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

聚光灯

Markdown 粉Q「在进行文档评审或演示时，可以通过 聚光灯 来让观众聚焦于文档的特定区域和内容。」

VLOOKAT2 无须高大上的设备或方式，VLOOK™ 激活后开箱即用～

  • 通过工具栏上的 聚光灯 按钮打开、关闭（快捷键操作：S )；

  • 打开聚光灯后，可支持按通过 ⇧ Shift 键调节聚光灯的大小。

激光笔

Markdown 粉Q「在进行文档评审或演示时，可以通过 激光笔 来让观众注意力精确跟随演讲者指向的内容。」

VLOOKAT2 无须高大上的设备或方式，VLOOK™ 激活后开箱即用～

通过工具栏上的 激光笔 按钮打开「聚光灯」（快捷键操作：P）。

Mermaid 图表元素高亮

支持通过鼠标悬停的方式，对 Mermaid 图表中的关键元素（节点、子图、文本等）高亮显示，方便在演示场景下更聚焦说明的内容，点这里去找个 Mermaid 的图表试试 ❯

正文宽度适配

为保障阅读体验，默认情况下正文区域会与自动适应浏览器窗口的宽度，当宽度过大时：

Note

在 Typora 编辑时，以下情况下也会自动适配 Typora 的窗口宽度：

不显示左边的侧边栏（大纲/文件）

  • ⇧ Shift + Cmd / Control + L

启用专注模式（Focus Mode）

  • F8

启用打字机模式（Typewriter Mode）

  • F9

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°演示与出版

 

°出版辅助

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

标记不发布的内容

Markdown 粉Q「在进行文档发布时，有些内容还未完成，或暂时不想显示，怎么优雅地处理？」

VLOOKAT2 Markdown 的「删除线」和「标题」一拍即合，优雅地轻松驾驭文档发布的内容范围～

通过 Markdown 的「删除线」格式标记哪些内容暂不发布，支持以下内容：

指定的章节

1 级 ～ 6级章节标题，包括其下的子章节。

标记方式：只需将章节标题内容设置为删除线格式即可

指定的引用块

带小标题、折叠的引用块

标记方式：只需将引用块的小标题、折叠标题内容设置为删除线格式即可

指定的表格列

指定的 1 列或多列

标记方式：参考表格列格式，将列头设置为删除线格式即可

不发布的带小标题的引用块

这是不发布的带小标题的引用块

不发布的带小标题的引用块

这是不发布的带小标题的引用块

不发布的折叠引用引用块

这是不发布的详情折叠

 

社交分享

Open Graph Protocol

Open Graph Protocol（OGP）是一个网络协议，用于在网页元数据中丰富内容的表示，尤其是在社交媒体上分享时。使用 OGP，你可以控制网页分享到社交平台时的外观和描述。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

Important

  1. OGP 的标签与 VLOOK™ 的插件调校参数一样，都是通过文档中的 YAML Front Matter 来指定；

  2. 由于 OGP 的标签都含有冒号 : ，所以在 YAML Front Matter 中指定时须用英文的双引号进行包裹，如： "og:image": https://xxxxx.png 。

 

目前 VLOOK™ 导出配置已内置常见的 OGP 标签（详见下表），未在预置范围的标签可以自行在导出配置中添加。

支持以下常见的 Open Graph 标签

OGP 标签YAML 中的名称说明
og:title"og:title"网页的标题，这是分享时显示的主要标题
og:type"og:type"网页类型，如网站、视频、文章等
og:image"og:image"与网页相关联的图像，这是分享时显示的主要图片
og:url"og:url"网页的规范链接
其他常用标签====
> og:description"og:description"网页的简短描述，这通常在分享时显示
> og:site_name"og:site_name"网站的名称
> og:locale"og:locale"网页内容的区域设置或语言
> og:video"og:video"如果网页包含视频，这是视频的链接
> og:audio"og:audio"如果网页包含音频内容，这是音频的链接

在 YAML Front Matter 的应用举例

Note

更多关于通过 YAML Front Matter 设置插件预置选项的说明，详见：插件预置选项

Tip

若需要验证发布到网络的 HTML 的 OGP 配置内容，除直接分享到社交工具外，也可通过 Meta for Developers 的 Sharing Debugger 工具进行预览

链接地图

外链清单及锚点数量

支持在当前文档中直接查看所有的外部链接清单，以及引用了这些链接的锚点数量（即链接中以 # 开头的内容）

外链锚点有效性检查

当维护的文档越来越多后，会存在未及时更新文档中外链锚点的情况，通过链接地图可快速对外链的锚点进行有效性检查

注意 外部链接的文档也需要由 VLOOK™ 插件生成

Tip

点击文档的右下角的 图标查看链接地图（快捷键操作： M )，并在链接地图中点击带有锚点条目后的「检查锚点」进行有效性检查

长内容自动折叠

VLOOK™ 会自动对文档中的长插图、长表格、长代码进行自动折叠，节省文档的屏幕显示空间～

Important

在引用块、详情折叠内的图片、Mermaid 图表、表格、代码块等均不在长内容自动折叠范围内。

自定义欢迎页内容

Markdown 粉Q 「应用了 VLOOK™ 插件的文档在加载处理过程中会显示欢迎页，提示插件加载过程。但我希望能修改默认的欢迎信息。」

VLOOKAT2 完成加载处理后会自动关闭并显示文档，若希望自定义欢迎页的显示行为也可以支持。

通过「插件预置选项」 vlook-welcome 来指定，在文档的 YAML Front Matter 区域添加以下内容：

自定义欢迎页内容示例

Note

更多关于通过 YAML Front Matter 设置插件预置选项的说明，详见：插件预置选项

链接失效与规范检查

图片源失效

自动识别无法加载的图片，并进行提示，示例：

Rd

音频、视频源失效

自动识别无法加载的音频、视频，并进行提示，示例：

音频播放控件默认为标准模式

Rd

页内链接（锚点）不存在

自动检查当前页的页内跳转锚点，是否存在无效的情况，例如这条无效的页内链接

如何对外链锚点进行检查？详见链接地图 ❯❯

Rd

存在重复的章节标题

为避免无法跳转到该章节处

（可通过插件预置选项 vlook-chp-dup 指定允许可重复的标题）

Ye

链接锚点规范检查与修正

检查文字链接的锚点是否使用了标点符号，并进行自动修正处理

Gy

Tip

存在需要关注或处理建议的异常结果时，会在文档的右下角显示 图标提示，点击可查看具体的异常信息。

链接内容识别

VLOOK™ 主题会自动识别文档中的超链接内容类型，显示不同的鼠标光标（鼠标光标样式同样适配 Light / Dark Mode）

VLOOK™ 主题专属鼠标光标

VLOOK™ 文库专属链接

T1!

识别主流超链接资源

#页内链接 / 非安全链接 / 安全链接 / 邮件

Gy!

高风险资源

.exe 文件 / .sh 文件

Rd!

链接内容转换

自动转换 md 链接

在 Typora 支持在编辑时指定为任意 md 文档（或带锚点的 md 文件），方便在多文档维护时随时跳转，但导出 HTML 后不会自动转为 html，这对不适用于基于 HTML 发布的场景。

默认支持将文档中的 *.md 链接转换为 html ，也可以指定为任意的扩展名。

若希望关闭该自动转换，或指定转换的扩展名，可通过「插件调校参数」 xmd 进行调整。

Bu!

外部链接强制在新标签打开

为提高文档阅读与交互体验，对于外链（如：http、https等），自动强制设置为在新标签页中打开。

Vn!

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°演示与出版

°外观

模板主题

Markdown 粉Q「你的 Markdown 文档能一键换肤吗？！」

VLOOKAT2 内置了多套原创、独具气质的模板主题，能满足多种应用场景需要，完全超越你对 Markdown 主题的印象！

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

主题会应用到 Typora 的应用程序 UI，以及文档内各类可编辑的元素，尽可能达到从整体到细节的视觉一致性！

预置的模板主题

以下是 VLOOK™ 内置的 6 套免费主题（点击预览效果）～

灵感来自于电影《Titanic 泰尼克号》，字体风格默认为「文艺范」

Bu

灵感来自于中国的古建筑与现代化工业风的融合

Ye

极客改变世界，VLOOK 也改变了 Markdown 排版自动化的玩法

Gy

灵活来自我喜欢的咖啡时光，字体风格默认为「小清新」

Og

灵活来自冥想与禅思

Cy

致敬由 Sun Microsystems 研发的计算机操作系统 Solaris，字体风格默认为「Book」

Vn

若你使用在线版本插件，可通过「插件调校参数」 theme 来动态指定任意 VLOOK 主题。

定制模板主题

目前现已开放主题的「定制服务」，以上为部分定制案例参考 •• 点击这里去探索更多定制主题

定制服务请微信联系： MaxChow ，或电子邮箱 (maxchow@qq.com)

 

提交我的定制需求

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

字体风格

Markdown 粉Q「模板主题让文档颜值倍增，而字体则是文档气质担当！」

VLOOKAT2 提供了五套独特个性的字体风格，可根据个人喜好进行选用。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

通过右下角状态栏上的 字体风格 按钮进行选择（快捷键操作：A )

Note

  • 设置后同一域名下的所有文档都会应用该配置，也可通过「插件调校参数」 font 来强制指定使用的字体风格（只对指定的文档生效）；

  • 除「书香里、公文风、活力派」，都会强制对「数字、标点符号」使用等宽字体，以使得内容更易于识别。

 

使用系统的 UI 字体，在不同的系统或终端上会效果会稍有不同

Gy

用系统内置的宋体、黑体进行「混搭」，在不同的系统或终端上会效果会稍有不同

Gy

用系统内置的楷体、仿宋、黑体进行「混搭」，在不同的系统或终端上会效果会稍有不同

Gy

整体表现为「活力、开放」（需要浏览器加载网络字体或下载安装）

Gy

整体表现为「优雅、韵动」（需要浏览器加载网络字体或下载安装）

Gy

整体表现为「清新、简约」（需要浏览器加载网络字体或下载安装）

Gy

 

Warning

若加载网络字体字体较慢，或无法访问互联网的情况，建议直接下载字体包并安装到本地，以获得更好的体验。

从百度网盘下载 提取码 11ta

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

封面与封底

Markdown 粉Q「如何让 Markdown 的文档支持封面、封底（例如像本文档的封面、封底）？」 VLOOKAT2 在应用了 VLOOK™ 的「模板主题」后，使用 Markdown 的标准语法也能让文档支持封面、封底，通过遵从 VLOOK™ 约定的使用规范即可激活。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

激活「封面」

在文档的最开始位置输入一个 6 级 标题

快捷键操作

选中作为封面内容的文字，然后按下 Cmd / Control + 6

如： ###### 这是封面标题

Tip

若有 YAML 、[TOC] 等内容，则在其后添加。

T1

激活「封底」

在文档的最后 1 行输入一个 1 级 标题

快捷键操作

选中作为封底内容的文字，然后按下 Cmd / Control + 1

如： # 这是封底结语

T2

根据以上操作成功激活封面、封底后，还可以在 Typora 的大纲面板中出现对应封面、封底条目，可进行一键定位到文档对应位置。

以下是「封面」中特定类型信息（如小标题、作者等）的自动排版规则：

标题

默认格式就是标题格式，直接输入就可以了；

可结合下标和下划线格式延伸出「小标题、副标题」：

  • 小标题：<sub>带 空格 的小标题</sub> 或 ~不带空格的小标题~

  • 副标题： <u>这是对应大标题的副标题</u>

文档类型、密级

可使用 VLOOK™ 的多级标签写法来实现，举例如下：

  • *文档密级`对外公开`*_~Gn~_

  • *文档密级`内部公开`*_~Og~_

  • *文档密级`机密资料`*_~Rd~_

作者

使用 Markdown 的「粗体」格式标记出「作者信息」即可（会自动添加前缀 By 、加粗）

  • 举例：**我是作者**

版权信息

使用 Markdown 的「斜体」格式标记出「版权信息」即可（会自动缩小字号、加粗）

  • 举例：*(C)2020. 版权所有*

Tip

在封面、封底中如何换行？

直接输入 HTML 的换行标签 <br> 即可。

最小化的文档封面内容示例
本文档的封面内容示例
本文档的封底内容示例

 

如何将封面中旧的上标格式语法替换为新的下划线格式语法？

主要针对在封面中使用了上标语法 <sup>...</sup> 的情况。

使用 Typora 的查找替换功能，或任意支持正则表达式进行查找替换的工具（如：VS Code / UltraEdit 等）进行操作。

  1. 在查找内容中输入 (###### .+)<sup>(.+)<sup>(.+)<\/sup><\/sup>(.+) ，并指定查找选项为 正则表达式

  2. 在替换内容中输入 $1<u>$2$3</u>$4

  3. 进行全部替换，或查找到要替换的进行部分替换即可。

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

Dark Mode

Markdown 粉Q「希望 Markdown 的文档能适配系统的深色模式，保持良好、一致的体验～」

VLOOKAT2 所有 VLOOK™ 的主题都会自动根据浏览器或系统的 Dark Mode（深色模式）的设置进行自动适配。

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

 

可通过右下角状态栏上的 Auto Mode / Light Mode / Dark Mode 按钮进行手动切换（快捷键操作：D )

Note

设置后同一域名下的所有文档都会应用该配置，也可通过「插件调校参数」 cs 来强制指定使用的字体风格（只对指定的文档生效）。

Tip

如果你的图片在 Dark Mode 下显得不够和谐，可以尝试选择让图片适配 Dark Mode 。

Light / Dark 效果预览

Gray Mode

Markdown 粉Q「希望在国家公祭日，或其它指定的日期进行浏览时，能自动变为灰色显示～」

VLOOKAT2 所有 VLOOK™ 的主题都内置了在国家公祭日（12 月 13 日）以灰色显示，也可以添加指定的日期。

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

 

通过「插件预置选项」 vlook-gray-mode 来指定启用 Gray Mode 的日期，在文档的 YAML Front Matter 区域添加以下内容：

增补以 Gray Mode 显示的日期

月 表示月份， 日 表示日期。如： 1-27 或 01-27

若指定多个日期，每个日期间以英文分号 ; 进行分隔，如： 1-27;12-14

Important

「内置了国家公祭日」主要指浏览器中的语言设置为「中文」的情况。

Note

更多关于通过 YAML Front Matter 设置插件预置选项的说明，详见：插件预置选项

更美观的 Mermaid

Note

更多脚本化图表样式，以及结合 VLOOK™ 相关的脚本编写规范内容详见《脚本化图表 for Markdown》。

Mermaid 图表题注与自动编号

Markdown 粉Q「文档中的 Mermaid 图表，也希望可以像插图那样添加编号和题注」

VLOOKAT2 无须任何设置，即可自动对文档内所有「Mermaid 图表」进行统一的自动编号，编号内容举例： 插图 1 插图 2 ，命名和编号与插图一致。同时，还增强了在演示时的辅助特性 … 了解详情 ❯

适用范围 ••• 编辑时OFFGy ON导出 HTMLGn

给「Mermaid 图表」添加题注的方式，与给「表格」添加题注的方式是一致的 … 了解详情 ❯

若没有指定题注，VLOOK™ 会自动创建带有以 Mermaid 图表内文字内容为关键信息的自动题

Mermaid 样式优化与扩展

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

Markdown 粉Q「如果不喜欢 Mermaid 默认的样式，还希望自动适配 Dark Mode，怎么办？」

VLOOKAT2 自动提供了深度的样式优化。

••• 编辑时支持部分支持Og! •••

统一和优化样式

  • 自动针对 Mermaid 的各类图表进行样式优化，并支持 Dark Mode

  • 以下为部分示例，更多的脚本化图表示例详见这里 ❯❯

Mermaid 的流程图

流程图示例（以上的「分支流程」内容由下图进行接续）

子图
子图的子图
分支
分支
分支
重要分支
条件1
条件2
条件3
条件4
数据
节点
文件
双圈圆
点击可访问
Github
可选
子流程
存档
A
(同页)
开始
准备
判断？
结束
手工输入
手动操作
B (离页)
A
(同页)

分支流程示例（接续上图）

B (离页)
节点
结束
Mermaid 的类图

类图示例

Inheritance
继承
Composition
组合
Aggregation
聚合
Association
关联
*
1
Link (Solid)
*
Dependency
依赖
n
Realization
实现
Link (Dashed)
«interface»
classA
+public attribute
-private attribute
#protected attribute
~package attribute
+public method()
-private method()
#protected method()
~package method()
classB
«enumeration»
classC
Rd
Bu
Gn
WHITE
BLACK
classD
classE
classF
classG
classH
classI
classJ
classK
classL
classM
classN
classO
classP
Mermaid 的状态图

针对「流程图」标记扩展：通过特定命名规范衍生出「状态机图」（PS：因为官方的状态机图还不够成熟）

由 Mermaid 流程图语法衍生的状态图

状态集
初始
汇聚
<角色：行为>
Act / 变更处理说明
<角色：行为>
Act / 变更处理说明
<角色：行为>
Act / 变更处理说明
Act / 变更处理说明
状态 C
状态 B
多行样式
横向状态机图
状态 A
状态 D
Mermaid 的顺序图

针对「顺序图」的标记扩展

  • 支持标记不同类型的角色（人、重要系统、外部系统），以呈现出不同的样式；

  • 将 optPu alt / elseRd loopCy parOg 标签优化不同的外观样式，并根据当前浏览器的语言进行自动翻译。

多种不同角色的顺序图，更清晰、更友好

--外部系统角色**重要系统角色普通系统--外部系统角色**重要系统角色普通系统par[平行消息]显示在外部系统左侧备注说明显示在外部系统右侧备注说明跨对象备注说明alt[抉择1][抉择2]opt[可选]loop[循环]人物角色前端触点平行发送消息11平行发送消息22平行发送消息33发送消息4内部动作5发送消息A6同步返回消息A17异步返回消息A28发送消息X9人物角色前端触点

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°文档排版

更实用美观的公式

适用范围 ••• ON编辑时Gn ON导出 HTMLGn

行内混排的公式

这是行内混排的「数学公式」limx→∞exp⁡−x=0，也可以是「化学公式」CHA4+2(OA2+7921NA2)

看看以上行内公式的 LaTeX 代码

数学公式的代码：$\lim_{x \to \infty} \exp{-x} = 0$

化学公式的代码：$\ce{CH4 + 2 $\left( \ce{O2 + 79/21 N2} \right)$}$

独占一行的公式块（```math 语法）
(1)x=−b±b2−4ac2a
看看以上公式的 Gitlab / GitHub 风格代码

 

独占一行的公式块（$$ 语法）

独占一行的公式块（$$ 语法）

y=y(x,t)=Aeiθ(My Math - 1)=A(cos⁡θ+isin⁡θ)=A(cos⁡(kx−ωt)+isin⁡(kx−ωt))=Acos⁡(kx−ωt)+iAsin⁡(kx−ωt)(My Math - 2)=Acos⁡(2πλx−2πvλt)+iAsin⁡(2πλx−2πvλt)(My Math - 3)=Acos⁡2πλ(x−vt)+iAsin⁡2πλ(x−vt)

还可以引用块公式序号实现跳转，例如参考公式：My Math - 1

 

看看以上独占一行公式块的 LaTeX 代码

 

表格内的公式
标题公式说明
欧拉公式eiθ=cosθ+isinθ 
勾股定理
（毕达哥拉斯定理）		a2+b2=c2在平面上的一个直角三角形中，两个直角边边长的平方加起来等于斜边长的平方。
如果设直角三角形的两条直角边长度分别是 a 和 b，斜边长度是 c
质能方程E=mc2其中，
E 是能量，单位是焦耳（J）
m 是质量，单位是千克（Kg）
c 是真空中光速（m/s），c=299792458m/s
爱因斯坦场方程Rμν−12gμνR=8πGTμν−Λgμν吸引你的，不是引力，而是扭曲的时空
麦克斯韦方程组∇⋅E=ρε0
∇⋅B=0
∇×E=−∂B∂t
∇⋅B=μ0J+μ0ε0∂E∂t		麦克斯韦方程组（Maxwell's equations）

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

°不杂项

插件预置选项

通过 YAML Front Matter 对 VLOOK™ 预置选项进行设置：

  1. 首先，为文档添加 YAML 内容（菜单：Typora ▸ 段落 ▸ YAML Front Matter）；

  2. 然后对指定预置选项进行设置，格式举例如下：

通过 YAML 设置 VLOOK™ 插件预置选项

插件预置选项[]预置到
定制主题		简介内容取值及说明
YAML 标准选项 YAML Front Matter 的标准选项 
> title 标题 
> author 作者 
> keywords 关键字 
vlook-chp-autonumY章节自动编号的格式、前缀、后缀等内容详见：章节自动编号
所有分级的章节都不进行自动编号，可通过定制主题关闭该特性
vlook-chp-dup 指定允许重复的章节标题内容• 在对文档章节标题查重时指定的内容
• 支持正则表达式，需以 / 符号进行包裹
多个内容间以英文分号 ; 进行分隔
vlook-doc-lib 启用并指定当前文档的文库 URL支持指定多个，详见：文库导航
vlook-gray-mode 设置启用 Gray Mode 的日期详见：Gray Mode
vlook-image-host 默认图床地址目前主要针对 Safari 打开本地 HTML 的文件，且指定图片剪影时使用
如： https://xxx.abc.com/images
vlook-welcome 自定义文档在加载时欢迎页信息详见：自定义欢迎页内容
vlook-queryY预置 VLOOK™ 规范的插件调校参数详见以下章节：插件调校参数

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

插件调校参数

通过 VLOOK™ 的「插件调校参数」可以对插件功能或文档的样式、交互方式进行开关和调整，支持以下方式进行调校（若同时存在则以 URL 参数指定的为优先）：

VLOOK™ 插件调校参数说明

调校参数说明默认值取值及说明
badge调整多级标签未指定色号时默认使用的色号T1色号 - 对应的预置色号，详见这里
capauto指定在内容索引无题注内容时，是否以索引对象的内容自动生成onoff - 不开启
on - 开启
capgroup题注的自动编号是否按所属章节（一级标题）进行分组编号onoff - 不开启
on - 开启
coating调整刮刮卡未指定色号时默认使用的色号Gy色号 - 对应的预置色号，详见这里
cs指定使用固定的颜色方案autolight - 强制显示为 Light Mode
dark - 强制显示为 Dark Mode
auto - 自动跟随系统配置
effect调整文档的动效级别20 - 关闭动效
1 - 标准动效
2 - 增强动效（毛玻璃等）
font强制指定使用的字体风格
指定该参数后则忽略 VLOOK 主题配套的字体风格		themetheme 指定使用主题配套
local - 指定使用「系统默认」
sans - 指定使用「小清新」
serif - 指定使用「文艺范」
fold控制使用长内容自动折叠的开关
若有多个指定范围要开启，可用英文逗号「,」进行分隔		onoff - 全不开启
on - 全开启

指定范围开启：
table - 指定「表格」
figure - 指定「插图」
codeblock - 指定「代码块」
list - 指定「列表」(未实现)
gray临时关闭 Gray Modeonoff - 关闭
nav指定导航中心初始的运行模式autoauto - 在封面时自动关闭、在正文时自动展开
hide - 始终关闭，手动打开
quote调整普通的「引用块」默认自动转换为指定色号的引用块着色offoff - 关闭，不自动转换
色号 - 对应的预置色号，详见这里
radius强制使用指定的圆角样式，忽略 VLOOK 主题自带的样式 none - 不使用圆角
small - 使用小号圆角
big - 使用大号圆角
reset强制重置浏览器存储的 VLOOK 相关数据 true
srcset对于没有高清分辨率的图片，在高清屏上强制以高清形式显示offauto - 对未指定 srcset 的图片强制以高清形式显示
off - 关闭
tag调整标签未指定色号时默认使用的色号T2对应的预置色号，详见这里
target配合文库导航使用：
应用-1：在插件预置选项 vlook-doc-lib 内指定链接在新标签中打开
应用-2：文档内指定链接在「文库」中打开		 针对「应用-1」：_blank
针对「应用-2」： vdl
toc指定目录大纲初始自动折叠的层级10 - 不折叠，全部展开
1~5 - 折叠指定的层级
tr指定表格阅读模式（十字光标）默认开关offoff - 不开启
on - 开启
unpub对标记为不发布内容进行处理的开关onoff - 不开启
on - 开启
vdl控制文库功能的开关onoff - 不开启
on - 开启
ws指定文档的「欢迎页」显示模式autoauto - 页面加载完成后延时关闭，时长由主题指定
wait - 文档和插件加载完成后，手动关闭欢迎页
off - 不显示欢迎页
1~60 - 指定延时的秒数（优先级最高）
xmd指定将扩展名为「*.md」的链接转换为指定的新扩展名
（默认对全局生效，也支持在广西链接中单独指定）		htmloff - 关闭，不转换
{扩展名} - 指定的扩展名，如 php htm 等

方式一

通过 URL 参数指定（多个参数间用「&」进行分隔）

示例_指定插件调校参数方式一

方式二

通过 YAML Front Matter 指定（多个参数间用「&」进行分隔）

示例_指定插件调校参数方式二

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

快捷键操作汇总

VLOOK™ 的功能和特性支持快捷键操作，效率再上一个台阶。

快捷键操作汇总

分类功能快捷键
常用开启、关闭 Dark ModeD
:显示、隐藏「导航中心」面板N
:搜索导航中心的内容/
:打开「文库」，或显示入口L
:打开「链接地图」M
:打开「导航历史」H
表格阅读模式移动当前聚焦单元格▲ ▼ ◀ ▶
:展开/收起行分组Enter ⏎
字体风格选择字体风格A
:退出「字体风格」选择ESC
逐章导航前一个章节◀ 或 ,
:后一个章节▶ 或 .
段落导航跳到下一个段落J
:跳到上一个段落K
插图导航显示「插图导航」I
:前一张插图◀ 或 ,
:后一张插图▶ 或 .
:退出「插图导航」模式ESC
聚光灯打开「聚光灯」S
:调节聚光灯的大小⇧ Shift
:退出「聚光灯」模式ESC
激光笔打开「激活笔」P
:退出「激光笔」模式ESC

跨平台与动效支持

跨平台

  • 应用 VLOOK™ 插件的文档能自适应在 PC、平板、手机端访问；

  • 推荐使用以下浏览器及最新版本：

  • Chrome Chrome　　Edge Edge　　Firefox Firefox

动效

默认会启增强动效（包括毛玻璃），可以根据实际降低动效级别，可通过「插件调校参数」 effect 来进行调整

Firefox 如何启用毛玻璃效果？

  • 在地址栏输入： about:config

  • 搜索配置项： layout.css.backdrop-filter.enabled ，并设置为 true

 

如果你对以上内容有更多需求或建议，欢迎随时反馈～ Freeback via QQ Freeback via Telegram

我要回到 快速入坑°外观与不杂项

延伸内容

章节标题内容注意事项

  1. 标题内容原则上不要带有标点符号（如： ， 、 ？ _ 等）

    1. 如果必须保留，在设置文字链接跳转至该标题时忽略这些标点符号

    2. 如标题内容为「标题、标题？」，则文字链接跳转应写成： 标题标题

  2. 标题内容原则上不要带有空格，如果有请替换为连字符 -

图片地址扩展应用说明

图片地址无 Query 参数时

  • 先在 URL 后添加英文问号 ? 后，再添加需要的 URL Query 参数；

  • 当图片地址已有 Query 参数时，多个参数间用英文特殊符号 & 进行分隔。

示例-1：![图片题注](xxx.png?darksrc=invert)

示例-2：![图片题注](xxx.png?darksrc=invert#icon)

Important

若图片地址中含有锚点内容，如 xxx.png#icon ，URL Query 参数须在锚点前添加。

图片地址锚点

  • 图片地址支持添加锚点「#魔法」实现快速图片排版，目前支持通过锚点排版的特性详见：°图片

  • 当需要同时应用以上多个排版，可添加多个锚点，如： #card#fixmax

基于色轮的配色方案

配色示例说明
单色方案单色方案
由一个颜色的暗/中/明色调组成（如：暗绿、绿、粉绿）

单色搭配上并没有形成颜色的层次，但形成了明暗的层次。
这种搭配在设计中应用时，出来的效果永远不错，其重要性也可见一斑。
类比色方案类比色方案
色轮上某个颜色的相邻的颜色（如：橙黄色、黄色、橙色）

类比色都拥有共同的三原色颜色（在上图中，是黄色及红色）。
这种颜色搭配产生了一种令人悦目、低对比度的和谐美感。
类比色非常丰富，在设计时应用这种搭配同样让你轻易产生不错的视觉效果。
补色方案补色方案
色轮上直线相对的两种颜色（如：红、绿）

补色形成强列的对比效果，传达出活力、能量、兴奋等意义。
补色要达到最佳的效果，最好是其中一种面积比较小，另一种比较大。
比如在一个蓝色的区域里搭配橙色的小圆点。
分裂补色方案分裂补色方案
色轮上某颜色（如：红色）及其补色的类比色（如：绿、青）

这种颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感。
形成了一种既和谐又有重点的颜色关系。
如在上面三种颜色中，红色就显得更加突出。
二次色方案二次色方案
二次色容易构成协调的搭配（如：绿、橙、紫）

任意两个二次色之间都拥有一种共同的颜色，所以它们轻易能够形成协调的搭配。
如果三种二次色同时使用，则显得很舒适、吸引，具有丰富的色调，以及深度和广度。
原色方案原色方案
三原色同时使用是比较少

红黄搭配较受欢迎。从快餐店到加油站，我们都可以看见这两种颜色同时在一起。
蓝红搭配也很常见，但只有当两者的区域是分离时，才会显得吸引人。
注意：如果是紧邻在一起，则会产生冲突感，需进行分离。
1 Mermaid 是一个用于画流程图、状态图、顺序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。详见 Mermaid 官网，或 VLOOK™ 的示例文档《脚本化图表 for Markdown》 ↩ ↩
2 这是 VLOOK™ 优化后的脚的信息 ↩