打赏°代码复制代码内容复制代码示例复制代码块示例代码块换行版式题注与自动编号°按钮键盘按键按钮链接文字按钮图标与文字按钮°封面与封底最小化的文档封面内容示例本文档的封面内容示例本文档的封底内容示例°分栏列表分栏双栏列表示例三栏列表示例四栏列表示例五栏列表示例引用块分栏内嵌套的列表分栏示例引用块分栏单行双栏引用块示例(无小标题)单行双栏引用块示例单行三栏引用块示例单行四栏引用块示例引用块内嵌套的引用块分栏示例GitHub Style Alert 分栏°题注双题注与交叉引用表格题注与自动编号通过「方式二」生成的题注图片题注与自动编号多媒体题注与自动编号Mermaid 图表题注与自动编号代码块题注与自动编号(方式 3)6 级标题方式添加代码块题注数学公式题注与自动编号°页签组表格页签组表格页签 3插图页签组引用块页签组代码块页签组GitHub Style Alert 页签组多类内容页签组°内容标记GitHub Style Alert以下为内嵌更丰富排版内容的示例标签单级标签多级标签标签链接进度条面包屑刮刮卡刮刮卡示例注音上标式注音注音示例-1注音示例-2代码式注音注音示例-1注音示例-2°MermaidMermaid 样式优化与扩展Mermaid 的流程图Mermaid 的类图Mermaid 的状态图Mermaid 的顺序图题注与自动编号°数学公式更实用美观的公式行内混排的公式独占一行的公式块(```math 语法)表格内的公式题注与自动编号°多媒体流媒体平台B站视频抖音视频西瓜视频腾讯视频YouTube视频常规视频音频标准界面示例Mini 界面示例题注与自动编号

打赏

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

*Z、*川、l*n、*朽、*杰、A*C、W*l、*山、*星、*丽、一*秋、*军、*鹏、李*6、*无、H*t、*二、f*y、*宇、*琛、*辉、*秋、*笑、*豫、l*a、*心、整*9、*国、*拉、*龙、*应、*销、*哦、E*y、……


若喜欢 VLOOK™ 的话,可以贡献一杯咖啡

打赏 VLOOK™

Gn

I like VLOOK™, I donate a cup of coffee

Donate VLOOK™

Se

°代码

复制代码内容

Markdown 粉Q用 Markdown 生成的文档中的代码、代码块,希望可以一键复制内容~

VLOOKAT2 针对 Markdown 的代码块进行自动增强,支持高亮当前行、复制全部代码、适配 Dark Mode

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

复制代码示例

点击 这个代码 即可复制其内容

复制代码块示例

tab

VLOOK™ 的代码块示例程序语言:C++

Tip

建议启用 Typora 中的显示代码块行号配置,以获得更好的体验。

启用方式:「Typora ▸ 偏好设置 ▸ Markdown ▸ 代码块 ▸ 显示行号」

代码块换行版式

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

代码块默认是自动换行,可以根据需要切换为不换行方式。

Tip

在导出 HTML 后,可通过代码块 内容助手 的「换行版式」进行手工切换

题注与自动编号

关于代码块的题注与自动编号

相关内容详见这里 ❯❯

 


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

°按钮

键盘按键

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

VLOOK™ 的主题支持将 <kbd> 标签,VLOOK™ 提供了更接近物理键盘的按钮样式,示例如下:

 


Q W E R T 1 2 3 4 5

ESC Enter

Ctrl Alt Shift          

Ctrl + CCtrl + Shift + V

Ctrl + P

Ctrl + S

Tip

适用于软件操作手册、培训类文档,对快捷键操作说明的排版会显得更直观、清晰。

按钮链接

Markdown 粉Q按钮是网络化文档的交互必备,希望 Markdown 文档也能跟上节奏

VLOOKAT2 通过增强 Typora 已有的 <kbd> 特性,可以让你实现多种风格的按钮链接,一起上车吧~

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

文字按钮

VLOOK™ 除实现「文本链接」转换为「按钮链接」外,还提供了三种按钮样式~

如目前有这样的文字链接:



■ 标准按钮

<kbd> 将文字进行包裹即可~

□ 次要按钮

将「标准按钮」设置为 斜体 即可~

🌈 超级按钮

将「标准按钮」设置为 粗体 即可~

 

一行中只有按钮链接时居中显示

独立一行时居中显示

独立一行时居中显示

独立一行时居中显示

独立一行时居中显示 独立一行时居中显示

独立一行时居中显示 独立一行时居中显示 独立一行时居中显示

Tip

若不希望「居中对齐」,只须在前或后添加一个不带格式的空格即可~

图标与文字按钮

除了纯文本的按钮外,还支持在按钮中添加图片作为按钮图标(任意尺寸),添加后图标会自动适配为 icon 版式 显示。

tab

文字 + 图片/图标

直接在以上「纯文字按钮」的 <kbd> 内插入「图片地址」即可,具体示例如下:

  • 对应 Markdown 内容为( xxx.svg 是图片): [<kbd>访问 ![](xxx.svg)</kbd>]

  • 效果如下:

VLOOK VLOOK VLOOK

仅图片/图标

直接将以上「纯文字按钮」中的文字内容替换为「图片地址」即可,具体示例如下:

  • 对应 Markdown 内容为( xxx.svg 是图片): [<kbd>![](xxx.svg)</kbd>] > - 效果如下:

 

Important

为能实现按钮中的图片颜色能自动适配按钮样式(导出 HTML 后生效),建议图片使用 svg 格式并设置为「图片剪影」。


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

°封面与封底

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

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 


激活「封面」

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

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

快捷键操作

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

Tip

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

T1

激活「封底」

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

如: # 这是封底结语

快捷键操作

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

T2

根据以上操作成功激活封面、封底后,还可以在 Typora 的大纲面板中出现对应封面、封底条目,可进行一键定位到文档对应位置。
以下是「封面」中特定类型信息(如小标题、作者等)的自动排版规则:

tab

标题

默认格式就是标题格式,直接输入就可以了;

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

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

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

文档类型、密级

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

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

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

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

作者

使用 Markdown 的「粗体」格式标记出「作者信息」即可,会自动添加前缀 By ,或通过 定制主题 指定

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

版权信息

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

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

 

Tip

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

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

tab

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

 


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

°分栏

「分栏」与「页签组」是两个非常实用适用广互补的排版特性。
分栏」排版能力满足在同一区域内同时展示多组信息,共享显示空间,适合内容不多的情况;
页签组」排版能力能满足在同一区域轮换展示多组信息,独占显示空间,适合内容较多的情况。

Markdown 粉QMarkdown 原生不支持分栏排版,有些用户将就着用表格来顶班,仍然也很难受~

VLOOKAT2 有了 VLOOK 后,只需要 1 个动作,嗖一下就可以让你的「引用块、列表、GitHub Style Alert」瞬间实现分栏排列!

列表分栏

Markdown 粉Q希望可以对长列表以分栏方式进行显示,但 Markdown 标准中好像没有支持这种实用的排版方式~

VLOOKAT2 通过对特定组合使用的 Markdown 语法进行扩展,就可以满足你的这个灵活的排版需求!

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

主要适用于带小标题的分栏需求,排版内容适合通过列表方式进行组织,如:任务看板之类的。

语法

在需要进行分栏排版的「列表」前一段落添加指定数量的「水平分割线」 ---

  • 添加 1 条水平分割线,启用「⬛︎ ⬛︎ 双栏」模式

  • 添加 2 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ 三栏」模式

  • 添加 3 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ 四栏」模式

  • 添加 4 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎ 五栏」模式

分栏语法示例

Tip

在正常添加后,会自动在水平分割线处显示对应分栏数量的提示,如「⬛︎ ⬛︎ 2 Columns of List ⬛︎ ⬛︎」

双栏列表示例

  1. 列表 1

    • 这是列表项 1-1

    • 这是列表项 1-2

  2. 列表 2

    1. 这是列表项 2-1

    2. 这是列表项 2-2

  3. 列表 3

    • 这是列表项 3-1

    • 这是列表项 3-2

  4. 列表 4

    • 这是列表项 4-1

    • 这是列表项 4-2

三栏列表示例


四栏列表示例



五栏列表示例




引用块分栏内嵌套的列表分栏示例

  • 列表 1

    • 这是列表项 1-1

    • 这是列表项 1-2

  • 列表 2

    1. 这是列表项 2-1

    2. 这是列表项 2-2

引用块分栏

Markdown 粉Q希望可以对引用块以分栏方式显示,但 Markdown 标准中好像没有支持这种实用的排版方式~

VLOOKAT2 通过对特定组合使用的 Markdown 语法进行扩展,就可以满足你的这个灵活的排版需求!

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

主要适用于对同类内容进行分块组织,且排版内容不适合通过列表方式进行组织的情况。

语法

在需要进行分栏排版的「引用块」前一段落添加指定数量的「水平分割线」 ---

  • 添加 1 条水平分割线,启用「⬛︎ ⬛︎ 双栏」模式

  • 添加 2 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ 三栏」模式

  • 添加 3 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ 四栏」模式

分栏引用块语法示例

Tip

在正常添加后,会自动在水平分割线处显示对应分栏数量的提示,如「⬛︎ ⬛︎ 2 Columns of Quote ⬛︎ ⬛︎

单行双栏引用块示例(无小标题)

分栏 1

分栏 1 的内容

分栏 2

分栏 2 的内容

单行双栏引用块示例

双栏小标题 1

分栏 1

双栏小标题 2

分栏 2

引用块分栏内嵌图片

单行三栏引用块示例


三栏小标题 1

第 1 行第 1 栏

三栏小标题 2

第 1 行第 2 栏

三栏小标题 3

第 1 行第 2 栏



三栏小标题 4

第 1 行第 1 栏

三栏小标题 5

第 1 行第 2 栏

三栏小标题 6

第 1 行第 3 栏

单行四栏引用块示例



四栏小标题 1

第 1 行第 1 栏

按钮

Rd!

四栏小标题 2

第 1 行第 2 栏

按钮

Gn!

四栏小标题 3

第 1 行第 3 栏

按钮

Bu!

四栏小标题 4

第 1 行第 4 栏

按钮

Pu!

引用块内嵌套的引用块分栏示例

引用块分栏内嵌套引用块分栏



嵌套的分栏 1(非H6)

第 1 行第 1 栏

按钮

Rd!

嵌套的分栏 2(非H6)

第 1 行第 2 栏

按钮

Gn!

嵌套的分栏 3(非H6)

第 1 行第 3 栏

按钮

Bu!

嵌套的分栏 4

第 1 行第 4 栏

按钮

Pu!

Gy

GitHub Style Alert 分栏

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

支持对 GitHub Style Alert 进行分栏的方式,还是熟悉的配方,与上面的「引用块分栏」方式保持一致~

 


Note

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

Tip

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



Important

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

Warning

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

Caution

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


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

°题注

Markdown 粉Q文档中表格、插图、代码块等,怎么才能像 Word 那样添加题注和自动编号呢?

VLOOKAT2 无须任何设置,即可自动对文档中的表格、图片、代码块等内容进行统一的自动编号,编号举例: 表 1 图 2.3-2 ,还可以指定具体的题注内容并实现交叉引用和跳转~

 

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

 

tab

设置题注:方式一

  • 作为题注的内容需要独占一个段落,并设置为以下格式组合:先「斜体」,后「高亮

  • 对应的 Markdown 格式语法为:*==这是题注内容==*

提示Gn 该方式支持设置「双题注」。

快捷键操作

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

设置题注:方式二

  • 在要添加题注的内容前一段落中添加题注内容,并将其设置为 6 级 标题

  • 对应的 Markdown 格式语法为: ###### 这是题注内容

注意Rd 该方式只支持设置「单题注」。

快捷键操作

选中内容,然后先按下 Cmd / Ctrl + 6 即可

设置题注:方式三(仅图片适用)

  • 对于图片,会优先根据 Markdown 标准语法中「图片标题」「可选子标题」生成题注。

备忘Bu 该方式支持设置「双题注」,「可选子标题」内容即为第 2 题注。

 

Note

  • 在 Typora 编辑时正确设置格式后,会有可视化的提示

  • 默认对表格、插图、代码块等内容自动生成题注与自动编号,支持通过以下方式调整:

    • 对于图片可指定为非插图的版式,如:图标、Logo、画框等,详见 图片显示版式

    • 可通过「插件调校参数capauto 来调整自动编号是否启用;

    • 可通过「插件调校参数capgroup 调整题注的自动编号是否按所属章节进行分组编号;

    • 可通过「插件调校参数caphide 隐藏指定类型的题注。

双题注与交叉引用

 

tab

双题注

第二个题注显示在表格下方,设置方式如下:

  • 第1步 参考以上的单题注的「方式一」完成第一个题注内容;

  • 第2步 在第一个题注内容后添加第二个题注的内容,并用英文下划线符号 _ 包裹;

  • 对应的 Markdown 格式语法为:*==这是第一个题注内容_这是第二个题注_==*

交叉引用

 

表格题注与自动编号

通过「方式一」生成的题注

列 A列 B列 C列 D列 E
单元格内容单元格内容单元格内容单元格内容单元格内容
通过「方式二」生成的题注
列 A列 B列 C列 D列 E
单元格内容单元格内容单元格内容单元格内容单元格内容

 

示例:这是第一个题注内容这是第二个题注内容

列 A列 B列 C列 D列 E
单元格内容单元格内容单元格内容单元格内容单元格内容
单元格内容单元格内容单元格内容单元格内容单元格内容

图片题注与自动编号

按 Markdown 的语法添加图片就可以实现,如: ![图片标题](图片URL "可选子标题")

  • 单题注:以上 图片标题 部分即为「第 1 题注」的内容

  • 双题注:以上 可选子标题 即为「第 2 题注」的内容(可选)

( 也支持以上设置题注的「方式一」「方式二」添加题注 )

 

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

多媒体题注与自动编号

Mermaid 图表题注与自动编号

  • 使用以上设置题注的「方式一」「方式二」添加题注

  • Mermaid 图表题注示例,点这去看一看 ❯

代码块题注与自动编号

  • 除了支持使用以上设置题注的「方式一」「方式二」添加题注外,还支持将代码块的指定的「语言」作为题注;

  • 例如: Java C++ 纯文本

 

(方式 3)6 级标题方式添加代码块题注

(方式 3)斜体+高亮方式添加代码块题注最优秀的程序语言 PASCAL !不接受反驳!

数学公式题注与自动编号

  • 使用以上设置题注的「方式一」「方式二」添加题注

  • 数学公式题注示例,点这去看一看 ❯

 


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

°页签组

「分栏」与「页签组」是两个非常实用适用广互补的排版特性。
分栏」排版能力满足在同一区域内同时展示多组信息,共享显示空间,适合内容不多的情况;
页签组」排版能力能满足在同一区域轮换展示多组信息,独占显示空间,适合内容较多的情况。

Markdown 粉QMarkdown 原生不支持「页签组」排版,无法利用网页的交互特性~

VLOOKAT2 有了 VLOOK 后,随心指定将连续的内容(表格/插图/引用块/代码块/GitHub Style Alert )以页签组形式展示!

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

 

语法

  • 在需要以页签组形式展示的连续内容中的首个内容前,添加一个空行,输入任意内容(如 tab )后,将该内容设置为以下格式组合,并独占一行:先「斜体」,后「上标

  • 对应的 Markdown 格式语法为:_^tab^_*^tab^*

快捷键操作
  • 选中内容,然后先按下 Cmd / Ctrl + i 设置为斜体,再按下 ⇧ Shift + 6 设置为高亮即可;

  • 提示Gn 在导出 HTML 后,支持通过 tab⇧ Shift + tab 切换不同的页签。

Important

  • 在 Typora 编辑时正确设置格式后,会有可视化的提示;

  • 以上提到的「连续内容」是指这些内容之间不能被其他类型内容的段落分隔(如标题、列表、空行、分隔线等);

  • 对于表格、插图、代码块、数学公式等内容,对应的调校参数 capauto 必须均为开启,详见「插件调校参数」;

  • 如果希望在在页签项上显示对应的题注分类及编号信息,可通过调校参数 captab 开启,详见「插件调校参数」;

表格页签组

对于连续的表格,以「页签组」形式进行呈现。

tab

表格页签 1

列 A列 B列 C列 E
    
    

表格页签 2

列 A列 B列 C
   
   
表格页签 3
列 A列 B
  
  

 

插图页签组

对于连续的插图(包括 Mermaid 图表),以「页签组」形式进行呈现。

tab

等比缩放至文档宽度的 20%

等比缩放至文档宽度的 40%

Mermaid 图表

状态集

初始

汇聚

<角色:行为>
Act / 变更处理说明

<角色:行为>
Act / 变更处理说明

<角色:行为>
Act / 变更处理说明

Act / 变更处理说明

横向状态机图

状态 A

状态 B\n多行样式

状态 C

状态 D

 

引用块页签组

对于连续的带小标题的引用块,以「页签组」形式进行呈现。

tab

Markdown Markdown 是什么?

  • 2004 年,John Gruber 创造了 Markdown Markdown,一种专门针对网络写作的 文本标记语言 。使用 Markdown,你只需在写作过程中插入少量的标记符号,就能很轻松地进行排版(例如设置标题、加粗、列表、引用块等);

  • Markdown 文档以 纯文本格式存储 ,这意味着,它们可以用几乎任一种文本编辑器打开。同时,又能通过 Markdown 编辑器导出为带排版的富文本文档、HTML 网页等等。纯粹、简洁、易用、灵活,都是人们喜欢 Markdown 的原因。

Markdown

Markdown 的标准化项目 (CommonMark)

什么是 Github Flavored Markdown ?

  • GitHub Flavored Markdown(GFM)是一种流行的标记语言,它在标准 Markdown 基础上添加了一些额外的功能,以更好地适应 GitHub 平台的需求。这些额外功能包括任务列表(Task Lists)、自动链接、表格等;

  • Typora 目前主要采用该标准 详细 ❯

AsciiDoc 是什么?

  • AsciiDoc 是一种文本格式规范,设计初衷是为了解决写书规模的问题,是一种作为 Markdown 升级或替代的方案;

  • 相对 Markdown 支持更多的格式,包括文档属性、设置作者、版本信息、语法高亮、表格、Include 功能等;

  • AsciiDoc 可以通过 AsciiDoctor 工具链转换为 HTML5、DocBook、EPUB、PDF 等多种格式;

  • AsciiDoctor 还提供了模板引擎和性能提升等功能,适合需要丰富格式和自定义输出的场景‌。

(以上信息由百度AI生成)

AsciiDoc 没有流行起来的原因是什么?

  • 首先,‌学习成本较高‌。虽然 AsciiDoc 相比 Markdown 支持更多的格式,但这些特性也增加了其学习难度。对于简单的文档编写,AsciiDoc 的这些特性并不是必需的,而博 客等简单文档更倾向于使用学习成本较低的Markdown‌ ;

  • 其次,‌功能相对有限‌。尽管它支持更多的格式,但与 Markdown 相比,AsciiDoc 在特定场景下的灵活性稍显不足。Markdown 通过自行扩展语法或使用 HTML 可以实现类似的功能,而 AsciiDoc 则需要更多的自定义块语法和扩展性,这在某些情况下可能会带来不便‌;

  • 最后,‌缺乏广泛的社区支持‌。虽然 AsciiDoc 在特定领域(如电子书制作)中有一定的应用,但其整体社区和用户基础相对较小,这限制了其在更广泛的应用场景中的推广和使用‌。

(以上信息由百度AI生成)

代码块页签组

对于连续的代码块,以「页签组」形式进行呈现。

tab

代码块页签组示例-1

GitHub Style Alert 页签组

对于连续的 GitHub Style Alert ,以「页签组」形式进行呈现。同时页签的样式会突显其对应的类型

tab

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

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

多类内容页签组

将不同类型的内容(表格/插图/引用块/代码块/GitHub Style Alert),以「页签组」形式进行呈现。

tab

题目

给你一个下标从 0 开始的字符串 s ,这个字符串只包含 0 到 9 的数字字符。 如果一个字符串 t 中至多有一对相邻字符是相等的,那么称这个字符串是半重复的。 请你返回 s 中最长 半重复 子字符串的长度。

Inheritance
继承

Composition
组合

Aggregation
聚合

Association
关联

Link (Solid)

Dependency
依赖

Realization
实现

Link (Dashed)

*
*
n
1

«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

列 A列 B列 C列 E
    
    

Note

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

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

°内容标记

GitHub Style Alert

Markdown 粉QVLOOK™ 的主题支持 GitHub Style Alert 吗?(需要 Typora1.8.3+ 或更高版本支持)」

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

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

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

 


VLOOK™ 对 GSA 的优化

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

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


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

语法

在「引用块」内的首行输入以下任一 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 的「行内代码」内容(如 `标签` )设置为「斜体」,即可实现好看、实用的「标签」排的版!

 

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

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

 

例如这样的「多级标签」:这是标题这是内容Bn 化学式H₂O是水💦Se,还可以这样 已开启灯光Gn 灯光已关闭Gy

 

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

单级标签

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

 

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

tab

语法

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

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

快捷键操作

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

Tip

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

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

tab

标签(常规风格)预置色号及示例

预置色号应用场景建议渲染效果
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
Wt黑白Wt 常规风格Wt
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
Wt!黑白Wt 强调风格Wt! WtOg 渐变风格WtOg
Bk!:Bk 强调风格Bk! BkOg 渐变风格BkOg
T1!当前 VLOOK™ 主题的主色T1 强调风格T1! T1T2 渐变风格T1T2
T2!当前 VLOOK™ 主题的辅助色T2 强调风格T2! T2T1 渐变风格T2T1

多级标签

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

 

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

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

tab

语法

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

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

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

扩展玩法

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

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

 

Tip

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

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

tab

多级标签预置色号示例

预置色号应用场景建议渲染效果
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
Wt黑白标题内容 ${变量 4}Wt 标题内容 ${变量 4}渐变色WtOg
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 超链接语法进行设置即可。

 

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

 

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

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

 

Tip

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

 


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

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

进度条

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

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

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

tab

语法

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

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

快捷键操作

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

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

进度值的说明

  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「斜体、高亮」这两个标准格式就可以轻松实现。

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 


语法

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

    快捷键操作

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

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

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

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

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

    • 点击复制其原始的信息

Caution

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

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

 

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

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

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

表格内的面包屑示例

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

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

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

刮刮卡

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

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

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

语法

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

    快捷键操作

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

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

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

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

Tip

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

刮刮卡示例
预置色号渲染效果
(不指定时使用默认色号)这是未指定提示的刮刮卡
:最爱吃竹子的动物?熊猫
RdRdRd
Og"Good night" in Cantonese?早[zou2] 唞[tau5]Og
Ye」的英语 Me???Meter ❌Ye Wa???Water ✅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 上标语法 ^ ^ 进行了扩展,轻松满足实用的「注音」排版需求!

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

语法

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

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

tab

Important

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

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!

代码式注音

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

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

°Mermaid

Note

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

Mermaid 样式优化与扩展

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

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

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

统一和优化样式

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

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

Mermaid 的流程图

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

子图

子图的子图

分支

分支

分支

重要分支

条件1

条件2

条件3

条件4

开始

准备

节点

可选

子流程

存档

A
(同页)

数据

文件

双圈圆
点击可访问
Github

判断?

结束

手工输入

手动操作

B (离页)

A
(同页)

分支流程示例(接续上图)

B (离页)

节点

结束

Mermaid 的类图

类图示例

Inheritance
继承

Composition
组合

Aggregation
聚合

Association
关联

Link (Solid)

Dependency
依赖

Realization
实现

Link (Dashed)

*
*
n
1

«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 / 变更处理说明

横向状态机图

状态 A

状态 B\n多行样式

状态 C

状态 D

Mermaid 的顺序图

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

  • 支持标记不同类型的角色(重要系统、外部系统),以呈现出不同的样

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

  • 更多关于标记扩展的用法说明详见这里 ❯❯

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

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

题注与自动编号

关于 Mermaid 图表的题注与自动编号

 

相关内容详见这里 ❯❯

 


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

°数学公式

更实用美观的公式

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

行内混排的公式

这是行内混排的「数学公式limxexpx=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±b24ac2a
看看以上公式的 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πλx2πvλt)+iAsin(2πλx2πvλt)(My Math - 3)=Acos2πλ(xvt)+iAsin2πλ(xvt)

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

 

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

 

表格内的公式
标题公式说明
欧拉公式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)

题注与自动编号

关于数学公式的题注与自动编号

 

相关内容详见这里 ❯❯

 


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

°多媒体

流媒体平台

Markdown 粉Q希望 Markdown 可以嵌入主流流媒体平台的视频~

VLOOKAT2 为更好发挥主流流媒体平台(如:Bilibili西瓜YouTube)上丰富的视频资源,提供了主题样式适配和优化支持~

适用范围 ••• 编辑时✓ 适用Gn 导出 HTML✓ 适用Gn

 

Tip

流媒体平台的嵌入视频也支持「题注、自动编号」,方式与为「表格」进行题注与自动编号一致 … 了解详情 ❯

B站视频

内嵌 B 站视频(横屏)

如何获取 B 站视频的「嵌入代码」?

获取B站视频嵌入代码

( 如发现导出 HTML 后无法播放,请检查嵌入代码中的 src 内容是否没有 https: 前缀,添加后再进行尝试 )

建议设置为不启用自动播放

由于B站视频默认是自动播放的,如果希望调整,可以在添加「嵌入代码」中 src 字段末尾添加 autoplay=0 ,示例如下:

添加「不自动播放」标识的示例

抖音视频

内嵌抖音视频(竖屏)

如何获取抖音视频的「嵌入代码」?

由于抖音官方没有提供像B站的「嵌入代码」的分享方式,但可以以B站嵌入代码为模板,将里面的 src 替换为抖音视频流播放链接即可。

抖音视频流播放链接中通过 vid 指定具体的视频标识,该标识可通过电脑的浏览器通过抖音首页搜索打开视频后,从地址栏复制 modal_id= 后的内容。示例如下:

浏览器打开抖音视频后地址栏内容

抖音视频「嵌入代码」示例模板

Tip

对所有流媒体平台的视频默认都以「横屏」进行显示,如希望以「竖屏」显示,只需要在视频嵌入代码中 src 内容末尾添加 #pt 即可~

西瓜视频

内嵌西瓜视频

如何获取西瓜视频的「嵌入代码」?

获取西瓜视频嵌入代码

腾讯视频

内嵌腾讯视频

如何获取腾讯视频的「嵌入代码」?

获取腾讯视频嵌入代码

YouTube视频

内嵌 YouTube 视频(横屏)

内嵌 YouTube 视频(竖屏)

如何获取 YouTube 视频的「嵌入代码」?

获取 YouTube 视频嵌入代码

常规视频

Markdown 粉Q希望 Markdown 可以支持视频,这样我就可以制作多媒体的文档了~

VLOOKAT2 目前 Markdown 工具都还没有针对视频的支持,现在可以几乎「零」成本实现了!

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

 

语法与 Mardown 的插入图片完全一致!

  • 语法:![视频的上题注](视频 URL "视频的下题注")

  • 语法示例:![这是视频](video.m4a)

  • 支持的音频格式:Ogg (.ogv)、MPEG4 (.mp4)、WebM (.webm)

视频示例

除视频基本的控制外,同样支持 W3C 标准的控制功能!

通过在「视频 URL」中添加 VLOOK™ 规范的参数实现,具体如下:

视频控制高级应用说明

可定制特性URL 参数示例
开启自动播放autoplay=true 
开启循环播放loop=true 
开启预加载preload=true预加载视频示例
指定视频宽度width=像素数值指定视频的宽度(单位:px)
指定视频高度height=像素数值指定视频的高度(单位:px)

Tip

因为是与图片的语法一样,所以在视频也支持「题注、自动编号」 … 了解详情 ❯

Note

如果对「URL 参数、URL 锚点」的使用有疑问,可以去「图片地址扩展应用说明」那深入再了解了解~

音频

Markdown 粉Q希望 Markdown 可以支持音频,这样我就可以制作电子有声书了~

VLOOKAT2 目前 Markdown 工具都还没有针对音频的支持,但现在可以几乎「零」成本实现了!

适用范围 ••• 编辑时× 不适用Gy 导出 HTML✓ 适用Gn

 

语法与 Mardown 的插入图片完全一致!

  • 语法:![音频的上题注](音频URL "音频的下题注")

  • 语法示例:![这是音频](audio.mp3)

  • 支持的音频格式:MP3 (.mp3)、Ogg (.ogg)、Wav (.wav)、M4a (.m4a)

想试试更换音频默认的界面吗?

音频默认显示为浏览器的「标准界面」,在 VLOOK™ 中还可以支持定制的「Mini 界面」,AMAZING!

通过在「音频 URL」中添加 VLOOK™ 规范的参数实现:

  • URL 参数: controls=mini

  • 参数示例: media/whistle.mp3?controls=mini

标准界面示例

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

Mini 界面示例

◄ 点击播放

除音频基本的控制外,同样支持 W3C 标准的控制功能!

通过在「音频 URL」中添加 VLOOK™ 规范的参数实现,具体如下:

音频控制高级应用说明

可定制特性VLOOK™ 规范的 URL 参数示例
启用 Mini 模式的播放控件controls=mini
启用 播放/暂时 模式
(默认为 播放/结束)
pause=true
⚠️注意Rd! 仅 Mini 模式下有效
显示音频时长duration=true
⚠️注意Rd! 仅 Mini 模式下有效
开启自动播放autoplay=true
开启循环播放loop=true循环播放音频示例
开启预加载preload=true预加载音频示例

Tip

因为是与图片的语法一样,所以在音频以「标准模式」显示时,也支持「题注、自动编号」 … 了解详情 ❯

Note

如果对「URL 参数、URL 锚点」的使用有疑问,可以去「图片地址扩展应用说明」那深入再了解了解~

题注与自动编号

关于多媒体的题注与自动编号

 

相关内容详见这里 ❯❯

 


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