打赏°内容标记标签徽章进度条面包屑刮刮卡刮刮卡示例注音上标式注音注音示例-1注音示例-2代码式注音注音示例-1注音示例-2°内容导航章节自动编号这是三级章节示例这是四级章节示例这是五级章节示例这是六级章节示例继续上次的阅读大纲与索引导航逐章导航逐段导航插图导航长图片与双题注示例文库导航脚注导航°演示与出版°内容助手复制内容插图放大显示表格阅读模式试试点击表格的任意单元格,或让鼠标光标在以下表格行间进行移动表格换行版式画中画°演示辅助聚光灯激光笔Mermaid 图表元素高亮正文宽度适配°出版辅助标记不发布的内容链接地图长内容自动折叠自定义欢迎页内容链接失效与规范检查链接内容识别链接内容转换°主题模板主题预置模板主题私人定制模板主题字体主题小清新_选用的字体及应用文艺范_选用的字体及应用封面与封底最小化的文档封面内容示例本文档的封面内容示例本文档的封底内容示例Dark ModeGray Mode°第三方集成的适配更美观的 MermaidMermaid 图表自动编号与题注Mermaid 样式优化与扩展Mermaid 的流程图Mermaid 的类图Mermaid 的状态图Mermaid 的顺序图更美观的公式段落内混排的公式独占一行的公式块(```math 语法)独占一行的公式块($$ 语法)表格内的公式Open Graph Protocol°不杂项Typora 编辑时特性增强插件预置选项插件调校参数快捷键操作汇总跨平台与动效支持国际化支持延伸内容章节标题内容注意事项图片 URL 扩展应用说明基于色轮的配色方案

打赏

打赏 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、……

°内容标记

标签

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

VLOOK👀T2 对 Markdown 的「行内代码」内容(如 `标签` )设置为「斜体」,即可实现好看、实用的「标签」排的版!

例如:可以 这样的标签Rd那样的标签Bu! 还可以是 渐变的标签T1T2! ,继续往下看看就知道这是怎么做到的~


新语法

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

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

(支持在标签后添加预置色号来指定颜色,不指定则默认为 T2

旧语法

语法:`#标签#`

标签:标签内容,前后由 # 符号包裹

支持在标签后添加预置色号来指定标签颜色,不指定则默认为 T2

如何将「旧语法」批量更新为「新语法」?

使用 Typora 的「查找与替换」,若涉及文件较多则推荐 UltraEdit 这类支持从文件中替换功能的工具:

  1. 查找的内容中输入 `#(.*?)#` ,并启用 正则表达式 选项

  2. 替换的内容中输入 *`$1`*

  3. 执行查找并替换的操作即可。

Gy

Tip

若须修改默认色号,可通过「插件调校参数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 强调渐变OgCy!
Ye!关注、优化、备忘、说明Ye 强调风格Ye! YeGd 强调渐变YeGd!
Lm!提示、参考、新增Lm 强调风格Lm! LmAq 强调渐变LmAq!
Gn!:Gn 强调风格Gn! GnRd 强调渐变GnRd!
Mn!:Mn 强调风格Mn! MnWn 强调渐变MnWn!
Ol!:Ol 强调风格Ol! OlCy 强调渐变OlCy!
Aq!引用块、公告Aq 强调风格Aq! AqLm 强调渐变AqLm!
Cy!:Cy 强调风格Cy! CyYe 强调渐变CyYe!
Bu!信息、资讯Bu 强调风格Bu! BuOl 强调渐变BuOl!
Se!:Se 强调风格Se! SeBn 强调渐变SeBn!
La!:La 强调风格La! LaYe 强调渐变LaYe!
Vn!:Vn 强调风格Vn! VnPu 强调渐变VnPu!
Pu!延伸、扩展、保留、备用Pu 强调风格Pu! PuVn 强调渐变PuVn!
Ro!年轻、个性、女性Ro 强调风格Ro! RoRd 强调渐变RoRd!
Pk!:Pk 强调风格Pk! PkGd 强调渐变PkGd!
Gd!VIP、金融、工程Gd 强调风格Gd! GdYe 强调渐变GdYe!
Bn!:Bn 强调风格Bn! BnSe 强调渐变BnSe!
Gy!无效、暂缓、停用、结束Gy 强调风格Gy! GyCy 强调渐变GyCy!
Bk!黑白、高对比Bk 强调风格Bk! BkOg 强调渐变BkOg!
T1!当前 VLOOK™ 主题的主色T1 强调风格T1! T1T2 强调渐变T1T2!
T2!当前 VLOOK™ 主题的辅助色T2 强调风格T2! T2T1 强调渐变T2T1!

徽章

Markdown 粉⬇️用 Markdown 写文档,怎样才能以分段式的结构组织或呈现相关性较强的内容?

VLOOK👀T2 在前面提到标签的基础上,在标签的前或后添加需要分段的内容就可以了,AMAZING!

例如:可以这样 这是徽章标题这是徽章内容Bn! 化学式H₂O是水💦Se,还可以这样 🌞显示Rd 显示🌒Gy ,继续往下看看就知道这是怎么做到的~


新语法

  1. 将需要设置为「徽章内容」的文本用代码符号 ` 包裹 ,在徽章内容前面添加标题,或在后面添加第 2 项徽章内容

  2. 最后将以上所有内容设置为「斜体

  • 对应的 Markdown 格式语法为:*标题`徽章内容`徽章内容2*

  • 其中,徽章内容支持对变量格式的突出显示:

    • 支持的变量格式:{{变量}} %变量% $变量$ ${变量} #{变量} var(变量)

(支持在徽章后添加预置色号来指定颜色,不指定则默认为 T1

旧语法

语法:`#标题|徽章内容#`

标签区别在于:将标题与内容用英文竖线符号 | 进行分隔,支持三段式(即两项徽章内容),两项徽章内容同样以英文竖线符号 | 进行分隔。其中,

  • 徽章内容支持识别变量格式 {{变量}} %变量% $变量$ ${变量} #{变量} var(变量) ,对这些内容以 突出的样式显示;

  • 支持在徽章后添加预置色号来指定徽章颜色,不指定则默认为 Gy

如何将「旧语法」批量更新为「新语法」?

前置动作:先按标签的旧语法批量更新方式完成第 1 步处理!

然后再进行以下处理:

  1. 查找的内容中输入 \*`([^`]*?)\|([^`]*?)(\|([^`]*?))?`\* ,并启用 正则表达式 选项

  2. 替换的内容中输入 *$1`$2`$4*

  3. 执行查找并替换的操作即可。

Gy

Tip

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

徽章预置色号(常规风格)示例

预置色号应用场景建议渲染效果
Wn警告、危险、关键事项、删除标题徽章内容 {{变量 1}}Wn
Rd:标题徽章内容 {{变量 1}}Rd
Og提醒、注意、修复标题徽章内容 %变量 2%Og
Ye关注、优化、备忘、说明标题徽章内容 $变量 3$Ye
Lm提示、备忘、参考、新增标题徽章内容 ${变量 4}Lm
Gn:标题徽章内容 #{变量 5}Gn
Mn:标题徽章内容 #{变量 5}Mn
Ol:标题徽章内容 #{变量 5}Ol
Aq引用块、公告标题徽章内容 var(变量 6)Aq
Cy:标题Badge ValueCy
Bu信息、资讯标题Badge ValueBu
Se:标题Badge ValueSe
La:标题Badge ValueLa
Vn:标题Badge ValueVn
Pu延伸、扩展、保留、备用标题徽章内容 {{变量 1}}Pu
Ro年轻、个性、女性标题徽章内容 {{变量 1}}Ro
Pk:标题徽章内容 {{变量 1}}Pk
GdVIP、金融、工程标题徽章内容 {{变量 1}}Gd
Bn:标题徽章内容 {{变量 1}}Bn
Gy常规、无效、暂缓、停用标题徽章内容 {{变量 1}}Gy
Bk黑白、高对比标题徽章内容 {{变量 1}}Bk
T1当前 VLOOK™ 主题的主色标题徽章内容 {{变量 1}}T1
T2当前 VLOOK™ 主题的辅助色标题徽章内容 {{变量 1}}T2

 

徽章预置色号(强调风格)示例

预置色号应用场景建议渲染效果
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!
Gd!VIP、金融、工程标题Gd 强调样式Gd!
Bn!:标题Bn 强调样式Bn!
Gy!常规、无效、暂缓、停用标题Gy 强调样式Gy!
Bk!黑白、高对比标题Bk 强调样式Bk!
T1!当前 VLOOK™ 主题的主色标题T1 强调样式T1!
T2!当前 VLOOK™ 主题的辅助色标题T2 强调样式T2!

 

徽章预置色号(三段式)示例

预置色号渲染效果更多渲染示例
T1标题内容1内容2T1H₂+O=H₂OBu 圆周率3.141592653T2
Ye标题内容1内容2Ye圆的内角和180度Ye
Bu!标题强调样式内容2Se!化学式H₂O是水💦Se!
Rd!标题强调样式内容2Rd!法定节假日国庆10月1日Rd!

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

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

进度条

Markdown 粉⬇️用 Markdown 制作文档时,希望可以将涉及进度的信息更直观体现出来

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


语法

  • 将作为进度的数值内容,设置为以下格式组合:

    先「粗体」,后「高亮

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

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

「进度值」说明

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

    • 常规:80.5

    • 溢出:120 -35

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

(编辑时的进度为示意,实际进度以导出 HTML 后的渲染为准)


示例_进度条

默认根据数值适配颜色预置色号渲染效果==
-35Wn5.5Wn
0Rd10Rd
5Og15Og
15Ye20Ye
25Lm25Lm
35Gn30Gn
45Mn35Mn
55Ol40Ol
65Aq45Aq
75Cy50Cy
85Bu55Bu
95Se60Se
100La65La
120Vn70Vn
 Gy75Gy
 Bk80Bk
 Pu85Pu
 Ro90Ro
 Pk95Pk
 Gd100Gd
 Bn120Bn
 T1-35T1
 T20T2

Gy

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

任务整体进度 ?

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

    • 调查目标客户群体 ?

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

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

    • 研究竞争对手 ?

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

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

  • 二、收集市场数据 ?

    • 查阅行业报告和数据 ?

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

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

    • 分析市场趋势 ?

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

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

Gy


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

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

面包屑

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

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


语法

  • 将作为面包屑的内容,设置为以下格式组合:

    先「斜体」,后「高亮

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

  • 支持将面包屑内容进行分段的符号: > / \ ▶︎

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

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

    • 点击复制其原始的信息

Caution

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

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

 

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

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

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

表格内的面包屑示例

表格内的目录层级示例(非独占)表格内的菜单序列(独占)
目录:/根目录/子目录 1/子目录 1.1菜单 > 文件 > 导出 > 导出配置

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

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

刮刮卡

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

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


新语法

  1. 将需要设置为隐藏的内容,设置为以下格式组合:

    先「斜体」,后「粗体

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

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

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

旧语法

语法:`/提示说明|被隐藏的信息/`~(色号)~

  • 提示说明:刮刮卡打开前显示的提示信息。可以不指定,默认为 ••••Gy

  • 被隐藏的内容:被刮刮卡遮盖的原始信息

  • 色号:可选。~ ~ 为 Typora 的下标格式。通过该方式指定刮刮卡使用的预置色号,不指定则默认为 (Gy) 。预置色号与「标签」的色号基本保持一致(无 Bk ,且不支持强调风格标识 )

如何将「旧语法」批量更新为「新语法」?

使用 Typora 的「查找与替换」,若涉及文件较多则推荐 UltraEdit 这类支持从文件中替换功能的工具:

  1. 查找的内容中输入 `\/([^`]*?)\|([^`]*?)\/` ,并启用 正则表达式 选项

  2. 替换的内容中输入 *$1**$2***

  3. 执行查找并替换的操作即可。

Gy

Tip

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

刮刮卡示例
预置色号渲染效果
(不指定时使用默认色号)这是未指定提示的刮刮卡
:最爱吃竹子的动物?熊猫
RdRdRd
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 粉⬇️希望 Markdown 文档能方便添加注音(如:拼音、外文对照),这样我语言培训文档和电子书就可以更出彩了

VLOOK👀T2 通过对 Markdown 上标语法 ^ ^ 进行了扩展,轻松满足实用的「注音」排版需求!


新语法

  • 在需要添加注音的任意一个字符后面进行添加对应的注音,并将该「注音」设置为以下格式组合:

    先「斜体」,后「上标

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

Important

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

旧语法

语法:^[注音]^

  • 其中 注音 为具体的注音、拼音符号,或注释内容

该语法内容前的 1 个中文字或英文单词会自动将该内容作为注音显示

如何将「旧语法」批量更新为「新语法」?

使用 Typora 的「查找与替换」,若涉及文件较多则推荐 UltraEdit 这类支持从文件中替换功能的工具:

  1. 查找的内容中输入 \^\[([^\[]+)\]\^ ,并启用 正则表达式 选项

  2. 替换的内容中输入 _^$1^_

  3. 执行查找并替换的操作即可。

Gy

Note

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

注音示例-1

dào生一,一生二,二生shēng三,三生万wànBuRoGn」── 道德经•老子

注音示例-2

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

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

中文注音线上释义服务

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

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

Rd!

非中文注音线上翻译服务

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

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

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

Bu!

代码式注音

Caution

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

该特性只作为对旧有文档,或需要同时对多个字添加同一注音的支持。

后续版本可能会移除对该语法的支持。


语法:`{text}(symbol)`

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

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

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

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

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

°内容导航

章节自动编号

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

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

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

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

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

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

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

Tip

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

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

编号选项取值说明选项参考效果预览
层级h1h5表示 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.01 - xxx
后缀任意内容文本如:章、.h2{{##-min#)}}1)xxxxx

Note

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

这是三级章节示例

 

这是四级章节示例

 

这是五级章节示例

 

这是六级章节示例

 


继续上次的阅读

Markdown 粉⬇️一般发布的静态 HTML 文档,都无法记住上次阅读的位置~

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

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

大纲与索引导航

Markdown 粉⬇️按大纲 / 索引进行导航是文档中最常用的导航方式,适用于内容层次明确,全文档跨章节的快速定位

VLOOK👀T2 VLOOK™ 对导出的 HTML 自动根据其内容生成目录大纲、分类内容索引。

VLOOK™ 提供以下大纲与索引的特性:

(若文档无目录大纲和索引,则大纲与索引导航会默认收起,须手动打开)

Important

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

逐章导航

Markdown 粉⬇️除了大纲外,希望可以按章节顺序一章一章进行浏览。

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

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

逐章导航快捷键

逐章导航的快捷键功能(逐章导航模式激活后生效)
, 前一个章节
. 后一个章节

逐段导航

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

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

逐段导航快捷键

段落导航快捷键(致敬 VI)

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

插图导航

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

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


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

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

支持的插图类型
  • 浏览器支持的所有图片(如:jpg / png / gif / bmp 等)

  • 脚本化图表(如:Mermaid1

插图导航快捷键

插图导航快捷键功能(打开插图导航后生效)
前一张插图
. 后一张插图
长图片与双题注示例

普通的图片示例(长图会自动折叠)

文库导航

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

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

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

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

  • 点击任意文库入口即可打开对应的文档,也支持直接通过快捷键 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=none 即关闭对当前文档的文库导航功能,示例如下:

脚注导航

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

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


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

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

°演示与出版

°内容助手

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

Note

其中,鼠标悬停在「表格、插图、代码块」上后,会激活显示匹配的内容助手选项。

复制内容



以上部分内容支持「复制为 Markdown 格式T1T2」,可通过以下两种方式触发:


方式一

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

方式二

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

插图放大显示

支持通过内容助手,直接将当前图片插图、Mermaid 图表放大显示,点这里试试看 ❯

表格阅读模式

Markdown 粉⬇️表格行、列很多时,希望能快速显示任意单元格相关的行、列都有哪些?

VLOOK👀T2 无须高大上的设备或方式,VLOOK™ 激活后开箱即用~

  • 鼠标悬停在表格后,通过右上角内容助手上的 表格阅读模式 按钮打开、关闭(快捷键操作:X );

  • 鼠标点击表格上的任意单元格后,会自动高亮其同一行、同一列的相关信息(类似于十字光标);

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

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

表格换行版式

Markdown 粉⬇️在实际文档中会有不同宽度和内容的表格,希望在阅读时可以根据需要指定不同表格换行版式便于阅读表格内容

VLOOK👀T2 安排!VLOOK™ 激活后开箱即用~

  • 不同的表格,根据其内容和当前屏幕宽度,其默认的换行版式会有不同,具体详见这里 ❯❯

  • 可单独对不同的表格指定不同的换行版式,通过右上角内容助手上的 画中画 手工切换为「自动换行」或「不换行」。

 

画中画

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

VLOOK👀T2 这个可以有,VLOOK™ 激活后开箱即用~

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

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

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


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

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

°演示辅助

聚光灯

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

VLOOK👀T2 无须高大上的设备或方式,VLOOK™ 激活后开箱即用~

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

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

激光笔

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

VLOOK👀T2 无须高大上的设备或方式,VLOOK™ 激活后开箱即用~

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

Mermaid 图表元素高亮

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

正文宽度适配

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

Note

对于大屏显示,在 Typora 编辑时,以下情况下也会自动适配 Typora 的窗口宽度:



收起了左侧的面板(大纲/文件)

启用了专注模式(Focus Mode)

启用了打字机模式(Typewriter Moder)


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

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

 

°出版辅助

标记不发布的内容

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

VLOOK👀T2 无须高??????开箱即用~

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



指定的章节

  • 1 级 ~ 6级章节标题,包括其下的子章节

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

指定的引用块

  • 小标题折叠的引用块

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

指定的表格列

  • 指定的 1 列或多列

  • 只需将列头内容设置为删除线格式即可


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

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

不发布的折叠引用引用块

这是不发布的折叠引用块

 

链接地图


外链清单及锚点数量

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

外链锚点有效性检查

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

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

Tip

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

长内容自动折叠

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

Important

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

自定义欢迎页内容

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

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

通过「插件预置选项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 粉⬇️你的 Markdown 文档能一键换肤吗?!

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

主题会应用到 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 粉⬇️模板主题让文档颜值倍增,而字体则是文档气质担当!

VLOOK👀T2 提供了两套自定义的字体主题,可根据个人喜好进行选用。

通过右下角状态栏上的 字体主题 按钮进行选择(快捷键操作:A )

Note

设置后同一域名下的所有文档都会应用该配置,也可通过「插件调校参数font 来强制指定使用的字体主题(只对指定的文档生效)。


系统默认

直接使用系统本地的默认字体(非衬线、等宽字体等),在不同的系统(Windows、macOS 等)上会有不同的表现效果

Gy!

Book

直接使用系统本地的默认字体(黑体、宋体、等宽字体等)进行地混搭

Bn!


整体表现为「清新、简约、明快AqYe」,主要采用无衬线的东亚和拉丁字体

Cy

整体表现为「优雅、韵动、个性GdOg」,主要采用衬线+无衬线的东亚和拉丁字体组合进行混搭

Vn

ℹ️ 「小清新、文艺范」配套的字体下载

因为 Windows / MacOS 系统默认不预装部分字体主题配套的字体包,VLOOK™ 目前可同时支持在线和本地两种使用方式。 若你的工作环境无法访问互联网,建议直接下载字体包并安装到本地,以获得最佳的视觉体验。


蓝奏云下载字体▾     百度网盘下载字体▾(提取码11ta)

Gy


小清新_选用的字体及应用
字体的应用字体名称风格==字重======
::[]正常[]斜体[]Regular[]Medium[]Bold[]Black
封面、标题、正文(CJK)、
链接、表头、题注、标签等
Noto Sans CJK SC
(思源黑体)
Y Y YY
正文(非CJK)、链接、代码等Noto Sans MonoY YYYY
表格列格式(数字/百分数/货币) ❯❯Altinn DINYYY Y 
文艺范_选用的字体及应用
字体的应用字体名称风格==字重======
::[]正常[]斜体[]Regular[]Medium[]Bold[]Black
封面大标题、章节标题、
正文(CJK)等
Noto Serif CJK SC
(思源宋体)
Y  Y Y
封面小标题、表头、题注、
标签、加粗文本等
Noto Sans CJK SC
(思源黑体)
Y Y YY
正文(非CJK)Luxi MonoYYY Y 
链接、代码等Noto Sans MonoY YYYY
表格列格式(数字/百分数/货币) ❯❯Altinn DINYYY Y 

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

我要回到 快速入坑°主题与不杂项

封面与封底

Markdown 粉⬇️如何让 Markdown 的文档支持封面、封底(例如像本文档的封面、封底)?」 VLOOK👀T2 在应用了 VLOOK™ 的「模板主题」后,使用 Markdown 的标准语法也能让文档支持封面、封底,通过遵从 VLOOK™ 约定的使用规范即可激活。


激活「封面」

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

(快捷键操作:⌃ Ctrl6 ,或 ⌘ command6

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

Tip

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

T1

激活「封底」

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

(快捷键操作:⌃ Ctrl1 ,或 ⌘ command1

如:# 这是封底结语

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 粉⬇️希望 Markdown 的文档能适配系统的深色模式,保持良好、一致的体验~

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

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

Note

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

Tip

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

Light / Dark 效果预览

Gray Mode

Markdown 粉⬇️希望在国家公祭日,或其它指定的日期进行浏览时,能自动变为灰色显示~

VLOOK👀T2 所有 VLOOK™ 的主题都内置了在国家公祭日(12 月 13 日)以灰色显示,也可以添加指定的日期。

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

增补以 Gray Mode 显示的日期

表示月份, 表示日期。如:1-2701-27

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

Important

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

Note

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

°第三方集成的适配

更美观的 Mermaid

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

Mermaid 图表自动编号与题注

Markdown 粉⬇️文档中的 Mermaid 图表,也希望可以像插图那样添加编号和题注

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

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

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


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

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

Mermaid 样式优化与扩展

Markdown 粉⬇️如果不喜欢 Mermaid 默认的样式,还希望自动适配 Dark Mode,怎么办?

VLOOK👀T2 自动提供了深度的样式优化。

统一和优化样式

  • 自动针对 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

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

更美观的公式

段落内混排的公式

这是行内混排的「数学公式limxexpx=0,也可以是「化学公式CHA4+2(OA2+7921NA2)

看看以上公式的代码

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

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

独占一行的公式块(```math 语法)
(1)x=b±b24ac2a
独占一行的公式块($$ 语法)
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πλx2πvλt)+iAsin(2πλx2πvλt)(My Math - 3)=Acos2πλ(xvt)+iAsin2πλ(xvt)

还可以引用块公式序号,例如参考公式:My Math - 1

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

Open Graph Protocol

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

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

Important

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

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

支持以下常见的 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 工具进行预览


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

我要回到 快速入坑°主题与不杂项

°不杂项

Typora 编辑时特性增强

VLOOK™ 主题包针对 Typora 编辑时,让不同的主题的样式与 Typora 的 UI 有更好的兼容和一致性,并提供尽可能多的交互特性。

目前涉及比较主要的特性具体如下:

📖 侧边栏



左侧、浮动大纲

不同显示模式(自动收起 / 全部展开 / 无大纲)的样式优化

大纲封面、封底

大纲面板中标识中符合 VLOOK™ 标准的「封面、封底」条目

侧边栏标题

大纲面板、文件面板标题栏支持显示当前 VLOOK™ 主题名称

Cy!

✏️ 编辑时交互



输入态提示

标识出段落、表格行的当前行,以及链接 / code / kbd 内嵌图片 / YAML

图片资源异常

通过不同样式,明显地标识出无效、无法加载的图片资源,便于及时进行修正

表格行增强

鼠标在表格上悬停时,能标识出对应悬停的表格行

Bu!

🖥 全局 UI 交互



全局 UI • 1

统一将编辑器关键的 UI、字体、图标样式与当前 VLOOK™ 主题保持一致

全局 UI • 2

在「源代码模式」下统一显示同一等宽字体,并提供了更宽阔的可视空间

融合菜单、快速打开

针对「融合菜单 ( Win 版 )」、「快速打开」适配主题,并提供好友的样式

Se!

对于 Windows 版本,建议启用一体化窗口样式(启用方式:偏好设置 ▸ 外观 ▸ 窗口样式:一体化)。


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

我要回到 快速入坑°主题与不杂项

插件预置选项

通过 YAML Front MatterVLOOK™ 预置选项进行设置:

  1. 首先,为文档添加 YAML 内容(菜单:Typora ▸ 段落 ▸ YAML Front Matter);

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

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

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

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

我要回到 快速入坑°主题与不杂项

插件调校参数

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

VLOOK™ 插件调校参数说明

调校参数说明默认值取值及说明
badge调整徽章未指定色号时默认使用的色号T1色号 - 对应的预置色号,详见这里
capauto指定在内容索引无题注内容时,是否以索引对象的内容自动生成
(如:表格、图片、代码块等)
onoff - 不开启
on - 开启
coating调整刮刮卡未指定色号时默认使用的色号Gy色号 - 对应的预置色号,详见这里
cs指定使用固定的颜色方案autolight - 强制显示为 Light Mode
dark - 强制显示为 Dark Mode
auto - 自动跟随系统配置
effect调整文档的动效级别20 - 关闭动效
1 - 标准动效
2 - 增强动效(毛玻璃等)
font强制指定使用的字体主题
指定该参数后则忽略 VLOOK 主题配套的字体主题
主题配套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对于没有高清分辨率的图片,在高清屏上强制以高清形式显示不开启auto - 对未指定 srcset 的图片强制以高清形式显示
stsbar指定文档底部状态栏内不要启用的内容项
(多项内容间可用英文逗号分隔)
全部doc-info - 阅读时长、字数
font-theme - 字体主题
color-scheme - 颜色主题
link-checker - 错误链接检查
tag调整标签未指定色号时默认使用的色号T2对应的预置色号,详见这里
target配合文库导航使用:
应用-1:在插件预置选项 vlook-doc-lib 内指定链接在新标签中打开
应用-2:文档内指定链接在「文库」中打开
 针对「应用-1」:_blank
针对「应用-2」:vdl
toc指定目录大纲初始自动折叠的层级10 - 不折叠,全部展开
1~5 - 折叠指定的层级
tr指定表格阅读模式(十字光标)默认开关offoff - 不开启
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
:显示、隐藏「大纲与索引导航」面板O
:搜索大纲与索引导航的内容/
:打开、关闭「表格阅读模式X
:打开「文库」,或显示入口L
字体主题选择字体风格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

国际化支持

VLOOK™ 插件的界面语言,自动适配浏览器的语言设置。


CJK(中日韩)

🇨🇳 简体中文 (Simplified Chinese)

以下语言可根据需求个性进行定制:

○ 🇭🇰 繁体中文 (Traditional Chinese)

○ 🇯🇵 日文 (Japanese)

○ 🇰🇷 韩文 (Korean)

非 CJK(拉丁语系)

🇬🇧 英文 (English)

以下语言可根据需求个性进行定制:

○ 🇫🇷 法文 (French

○ 🇩🇪 德文 (German)

○ 🇪🇸 西班牙文 (Spanish)

○ 🇷🇺 俄文 (Russian)


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

我要回到 快速入坑°主题与不杂项

延伸内容

章节标题内容注意事项

  1. 标题内容原则上不要带有标点符号(如: _ 等)

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

    2. 如标题内容为「标题、标题?」,则文字链接跳转应写成:标题标题

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

图片 URL 扩展应用说明

图片 URL 无 Query 参数时

先在 URL 后添加英文问号 ? 后,再添加需要的 URL Query 参数。

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

Tip

若图片 URL 中含有锚点内容,如 xxx.png#icon2x ,请在锚点前添加 URL Query 参数。

 

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

图片 URL 锚点

图片 URL 支持添加锚点实现快速图片排版,目前支持通过锚点排版的特性包括:

当需要同时应用以上多个排版,可添加多个锚点,如:#center#padding#icon2x

图片 URL 已有 Query 参数时

多个参数间用英文特殊符号 & 进行分隔。

示例:![图片题注](xxx.png?darksrc=invert#padding)

基于色轮的配色方案

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

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

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

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

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

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

红黄搭配较受欢迎。从快餐店到加油站,我们都可以看见这两种颜色同时在一起。
蓝红搭配也很常见,但只有当两者的区域是分离时,才会显得吸引人。
注意:如果是紧邻在一起,则会产生冲突感,需进行分离。

1 Mermaid 是一个用于画流程图、状态图、顺序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。详见 Mermaid 官网,或 VLOOK™ 的示例文档《脚本化图表 for Markdown
2 这是 VLOOK™ 优化后的脚的信息