_VLOOK™
让你的 Markdown 有了新看^wán法
──
快速参考手册 (Part.I)
最新版本V27.02024-11-02

MAX°孟兆
COPYRIGHT © 2016-2024. MAX°DESIGN.

打赏

打赏 VLOOK™

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

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

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

预置色号

< 壹 >

以下是 VLOOK™ 的预置色号，其中的两个字符的英文简写为色号标记，如： Ye Aq T1 等

< 贰 >

将在后续的文本颜色、文本渐变色、单元格着色、标签、刮刮卡、引用块着色等文档排版特性中进行使用

< 叁 >

支持「常规」和「强调」两种风格，色号后添加英文的感叹号「!」即为指定为强调风格，如： Ye!

语法

将「色号」设置为以下格式组合：先「斜体」，后「下标」

• 对应的 Markdown 格式语法为：

  • 单色 _~色号~_ ，如： _~Ye~_ _~Aq~_ _~T1~_

  • 渐变色 _~色号1色号2...色号n~_ ，如： _~YeOg~_ _~RdGnBuRo~_

• 在正确设置格式组合后，在编辑时会以特殊的样式作为提示，需要导出 HTML 文件才能最终生效

#魔法

#魔法_CyOgPu ，发音为 /sharp 魔法/

什么是 「#魔法」？

VLOOK™ 在经过多次迭代和用户反馈后，探索出了实用、优雅的图片、视频快速排版方法。

我们可以通过在图片地址、视频地址的末尾添加 URL 锚点的方式激活对应的排版「魔法」～

使用方式是通过在图片路径末尾添加 URL 锚点「#具体魔法」

举例说明：

• 在 Markdown 中图片一般是这样的格式 ![替代文本](图片地址.png)

• 如我们希望将图片设置为图标样式，可以添加 #icon ；进行缩放到 200px 的宽度，可以添加添加 #200w 即可～

对图片的快速排版应用

显示版式、缩放、旋转、翻转、滤镜、网格背景、边缘留白等～

对视频的快速排版应用

流媒体平台的内嵌视频，指定为「竖屏显示」等～

°文本

文本颜色

Markdown 粉Q「文本指定不同的颜色，算是 Markdown 粉除了表格排版外的第 2 高的呼声的特性了！」

VLOOKA_T2 通过简洁的方式就可以轻松实现，一起来看看～

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

如何能让你的 Markdown 文档文本颜色更出彩（B 站）

针对「指定格式」的文本颜色

• 在「加粗、斜体、高亮、下划线、^上标、_下标 等」格式的文本后，添加预置色号，例如：红色 _~Rd~_

• 具体色号语法参考预置色号

针对「整个段落」的文本颜色

语法与左边的「针对指定格式的文本」是保持一致的，区别是在段落的最开始位置添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶_T2」

普通的段落着色示例

_Gd这是一个段落，可以使用预置的 色号 ，对整个段落进行色号。

1. 对段落中 指定的加粗文本内容_Rd 通过色号组合进行标记，也支持特殊符号：●_Rd●_Ye●_Gn；

2. 或是 指定的斜体文本内容_Gn 通过色号组合进行标记；

3. 或是 指定的高亮文本内容_Ro 通过色号组合进行标记；

4. 或是 指定的下划线文本内容_Pu 通过色号组合进行标记。

在引用块内的段落文本颜色示例

1. 对段落中 指定的加粗文本内容_Rd进行色号，也支持特殊符号：●_Rd●_Ye●_Gn；

2. 或是 指定的斜体文本内容_Gn 进行色号；

3. 或是 指定的高亮文本内容_Ro 进行色号；

4. 或是 指定的下划线文本内容_Pu 进行色号。

_T1这是一个段落，可以使用预置的 色号 ，对整个段落进行色号。

文本颜色预置色号及示例

文本渐变色

Markdown 粉Q「现在越来越流行渐变的文本颜色，这要是也能有就完美 💯 了！」

VLOOKA_T2 全新的预置色号支持渐变色的，写法自然直观，绝对能惊艳到你～

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

• 所有规则与「文本颜色」是一样的，色号由 1 个变为多个连续输入就可以了～

• 例如：「红-绿_RdGn」则渐变输入 _~RdGn~_ ，「红-黄-绿_RdYeGn」渐变则输入 _~RdYeGn~_

• 具体色号语法参考预置色号

普通的段落着色示例

_LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。

1. 对段落中 指定的加粗文本内容_RoBuAq 通过色号组合 标记为渐变色_CySe；

2. 或是 指定的斜体文本内容_SeGd 通过色号组合 标记为渐变色_OgRo；

3. 或是 指定的高亮文本内容_AqPu 通过色号组合 标记为渐变色_BuAq；

4. 或是 指定的下划线文本内容_OgBk 通过色号组合 标记为渐变色_SeRo。

在引用块内的段落文本渐变色示例

1. 对段落中 指定的加粗文本内容_RoBuAq 通过色号组合标记为渐变色_CySe；

2. 或是 指定的斜体文本内容_SeGd 通过色号组合标记为渐变色_OgRo；

3. 或是 指定的高亮文本内容_AqPu 通过色号组合标记为渐变色_BuAq；

4. 或是 指定的下划线文本内容_OgBk 通过色号组合标记为渐变色_SeRo。

_LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。

文本高亮

VLOOK™ 对高亮格式的样式、排版进行了多种优化和延伸，主要包括以下：

• 高亮的颜色，可以与主题色、文本颜色、文本渐变色、引用块着色、GitHub Style Alert 进行适配

• 特定位置实现：

  • 「引用块小标题」

• 格式组合实现：

  • 「表格题注、插图题注、代码块题注、多媒体内容题注」

  • 「进度条」

  • 「面包屑」

文本加粗、斜体

VLOOK™ 对「粗体、斜体」格进行了多种延伸，与「高亮、代码、上标」等格式进行组合提供多种个性实用的排版能力，主要包括以下：

• 特定位置实现：

  • 「引用块小标题」

  • 「封面与封底」

• 格式组合实现：

  • 「表格题注、插图题注、代码块题注、多媒体内容题注」

  • 「标签」

  • 「进度条」

  • 「面包屑」

  • 「刮刮卡」

  • 「注音」

一级、六级标题

VLOOK™ 对 Markdown 的一级、六级标题进行了延伸，用于提供了一些实用且独特的排版能力，主要包括如下：

• 特定位置实现：

  • 「详情折叠」

  • 「封面与封底」

• 格式组合实现：

  • 「表格题注、插图题注、代码块题注、多媒体内容题注」

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

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

°按钮

键盘按钮

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

••• 编辑时支持完整_Bu! •••

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

Q W E R T 1 2 3 4 5

ESC Enter

Ctrl Alt Shift 　　　　　　　　　

Ctrl + C 、Ctrl + Shift + V

Ctrl + P

Ctrl + S

按钮链接

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

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

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

文字按钮

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

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

• 对应的 Markdown 内容为： [访问 GitHub](github.com)

• 对应的文字链接效果为：访问 GitHub

「主要按钮」样式

直接用 <kbd> 将文字链接中的「文本内容」进行包裹即可，具体示例如下：

• 对应的 Markdown 内容为： [<kbd>访问</kbd>](github.com) - 转换后的效果为：访问 GitHub

「次要按钮」样式 实验特性

默认为「主要按钮」，在链接中添加 URL 参数 kbd=alt 则选用「次要样式」，具体示例如下：

• 对应的 Markdown 内容为： [<kbd>访问</kbd>](github.com?kbd=alt) - 转换后的效果为：访问 GitHub

图标与文字按钮

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

文字 + 图片/图标

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

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

• 效果如下：

访问 GitHub 访问 GitHub

仅图片/图标

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

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

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

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

°表格

单元格合并

Markdown 粉Q「Markdown 粉呼声最高的是什么？———— 单元格合并！」

VLOOKA_T2 现在可以轻松让你实现 —— Wow! Wow!～Markdown 粉们的欢呼声！！！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

跨列合并（横向合并)

在要被合并的单元格内输入列合并标识 == ，该单元格将会与左侧相邻的单元格进行合并，以此类推。

_T1

跨行合并（纵向合并)

在要被合并的单元格内输入行合并标识 : ，该单元格将会与上方相邻的单元格进行合并，以此类推。

_T2

普通单元格的横向合并与纵向合并示例

表头纵向与横向合并示例-1

表头纵向与横向合并示例-2

表格列格式

基础

Markdown 粉Q「Markdown 表格如何快速设置整列的格式（加粗、高亮、斜体）？」

VLOOKA_T2 SO EASY～ 只须在表头按以标准的 Markdown 或 GFM 的格式设置语法设置对应的格式即可实现这样的格式化。

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

温故一下标准 Markdown 或 GFM 的格式语法：

**加粗** 、 *斜体* 、 ==高亮==

基础列格式示例

更多基础列格式示例

基础列格式嵌套

基础列格式嵌套（多行表头）

数值

Markdown 粉Q「除常规的格式外，还有更高级的格式要求？数字、百分数、货币……一个都不能少！」

VLOOKA_T2 可以支持对这以上数值类内容进行整列的自动格式设置了！方式依然的很优雅，很 VLOOK！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

将表格列的对齐设置为「右对齐」，即可自动识别不同的数值内容进行自动进行格式化！

「普通数字」自动格式化

• 使用数字专用的「DIN」风格字体

• 添加千位符，并以更小字号显示小数部分

• 数字前自动填充「正号 + 」或「负号 - 」，并通过不同的颜色突出显示

_Rd!

普通数字示例

「百分数」自动格式化

• 自动继承「普通数字」的格式

• 以更小字号和视觉弱化来显示百分号 % ，并以进度条比例显示对应的百分数值

_Bu!

百分数列表格式示例

「货币」自动格式

• 自动继承「普通数字」的格式

• 对货币符号（如： ¥ $ ），或货币简写（如： CNY USD HKD 等）进行左侧对齐和视觉弱化

_Bn!

货币列表格式示例

复选框

Markdown 粉Q「表格的列格式，除了排版格式外，如果希望能支持复选框（勾选框）呢？」

VLOOKA_T2 虽然要求有点高了，但也可以实现，将整列自动设置为「复选框」格式了！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

在对应的表格列头内容前，添加 [] （如 []必填项 ），就可以为该列自动设置为 未选择 的状态。

若要独立指定某单元格的复选框不同的状态，可以在单元格内容的最开始位置填写指定符号，如：

• 状态已选择：将单元格内容设置为 Y

• 状态不确定：单元格的内容设置为 ? （中英文问号都支持）

「复选框」列格式示例

单元格着色

Markdown 粉Q「表格列格式够丰富了，但能不能用不同背景色对单个单元格进行标识呢？」

VLOOKA_T2 VLOOK™ 的预置色号又可以派上用途了，同样的配方，同样的超好用！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

对单元格的文本进行着色

与文本颜色中对整个段落进行着色方式一致，就是在单元格的最开始位置_T2添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶_T2」，如：红色 _~Rd~_

对单元格「背景」进行着色

按单元格文本颜色方式一样，区别是使用「强调风格」的预置色号即可（如：蓝色 _~Bu!~_）。

如已指定了「单元格文本」着色，可以将在单元格的最后位置_T2

示例_单元格着色（单色）

💡 想知道以上表格的原始内容吗？

可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可

示例_单元格着色（渐变色）

💡 想知道以上表格的原始内容吗？

可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可

表格题注与自动编号

Markdown 粉Q「文档中的表格很多，怎么才能像 Word 那样添加编号和题注呢？」

VLOOKA_T2 无须任何设置，即可自动对文档内所有「表格」进行统一的自动编号，编号举例： 表 1-1 表 2-5

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

单题注

若希望为表格在自动编号之后，添加指定的题注，如：表 1-1. 2020 年全球经济体 GDP 排名

若没有指定题注，VLOOK™ 会自动以表格文字内容（头尾片断）作为题注。

_T1!

设置表格题注：方式一（推荐）

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

  快捷键操作

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

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

Note

这种方式会在 Typora 编辑时会有可视化的提示。

_Bu

设置表格题注：方式二

• 在表格上一段落中添加题注内容，并设置为 6 级 标题（该方式题注样式在导出 HTML 后生效）

  快捷键操作

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

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

Warning

这种方式会自动启用表格的逐行自动编号特性。

_Bn

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

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

双题注

VLOOK™ 支持双题注，第二个题注显示在表格下方，同时还支持在 Typora 编辑时预览（在导出 HTML 后正式生效）。

设置方式：

• 第1步 参考以上的单题注的设置方式一完成；

• 第2步 在以上题注内容的最后添加第二个题注的内容，并用英文下划线符号 _ 包裹；

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

_T2!

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

表格逐行自动编号

Markdown 粉Q「表格有很多行，能像 Excel 一样有行号的话，那就更方便沟通和定位了……」

VLOOKA_T2 可以一键实现对表格逐行进行自动编号！

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

表格前添加一个 6 级 的标题（快捷键操作：Cmd / Ctrl + 6 ），即可为表格的每一行进行自动编号。

表格前添加六级标题示例（列数不大于 7 列）

表格前添加六级标题示例（列数大于 7 列）

表格行分组折叠

Markdown 粉Q「表格行都是同一分级的数据，但如果表格的数据有层次关系怎么办？」

VLOOKA_T2 支持通过非常简洁的标记对表格内的行进行，指定不同的缩进等级进行分组、分级。

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

对于作为下级的行，在表格行的首列通过以下规则即可实现自动分组和折叠：

• 使用 Markdown 的引用块的语法 >␣ ，即可表示该行缩进一级，其前一行即为上一级的分组

• 多个 > 表示缩进多级，如三级缩进 >>>␣

^{说明：以上的 ␣ 符号为英文空格}

写法如下第 2 列所示

示例 1_表格行分组折叠

表格行分组折叠示例

重复显示表头

Markdown 粉Q「表格太长了，看着看着都分不清哪列是哪列了，希望能在设置重复显示表头，该怎么办？」

VLOOKA_T2 这可算是表格中的高阶应用了，现在 VLOOK™ 也可以轻松实现了～

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

只需要在表头首列的单元格内容的开关输入表头重复标识 ##␣ ，则该表格的表头就会自动根据预置的规则进行重复显示。

^{说明：以上的 ␣ 符号为英文空格}

预置规则：

• 对于没有「行分组」的表格，自动以「表格页」为单位进行重复显示（每表格页为 15 行）

• 对于带「行分组」的表格，默认在行分组展开后在分组行上显示对应的列头（前提是对应的单元格无内容），收起后则自动隐藏

示例_按分组重复表头

按页重复单行表头示例

按页重复多行表头示例

表格换行版式

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

• 表格

  默认为「自动换行」的版式，以下情况会调整为「不换行」：

  • 小屏（一般指屏幕宽度小于 1280px ）

  • 表格含有「行分组折叠」，或表格列数大于 7

• 单元格

  针对不同情况控制单元格样式进行微调：

  • 默认单元格最小宽度为 120px

  • 无内容的单元，且在行或列上是唯一的单元格，则会显示为分隔线样式

  • 对于有行分组的表格，首列最小宽度为 180px

  • 表格为「不换行」版式时，单元格内容过多时，最大宽度为 330px

可去「表格逐行自动编号」看看相关的示例效果～

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

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

°图片

插图题注与自动编号

Markdown 粉Q「文档中的图片很多，怎么才能像 Word 那样添加编号和题注呢？」

VLOOKA_T2 对于独占一行的图片，或强制指定显示版式为插图的，VLOOK™ 会将以其「插图¹」的形式处理，如统一自动编号和题注，编号举例： 图 1-1 图 2-3

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

🖼 为「图片」添加题注

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

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

• 双题注：以上 可选子标题 即为「第 2 题注」的内容，可选

注意_Bn!

若没有指定题注，会自动以图片地址中的文件名作为题注。

_Bn!

为「Mermaid 图表」添加题注

• 与为「表格」添加题注方式一致的 … 了解详情 ❯

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

注意_Ro!

若没有指定题注，会自动以图表中的部分文字作为题注。

_Ro!

图片显示版式

Markdown 粉Q「希望统一图文混排的图标大小，以及指定图片不以「插图」形式被处理，该怎么操作呢？」

VLOOKA_T2 VLOOK™ 对图片默认以「插图」版式展示，通过「#魔法」可以轻松切换更多灵活的显示版式。

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现多种非插图的版式：

• 图片地址 + #版式标识

图片不同显示版式的标识与说明

icon 版式示例

• icon： VLOOK™ 是 开源中国 推荐的国产开源项目，也许是目前最好的 Markdown 增强插件之一

• icon2x： VLOOK™ 是 开源中国 推荐的国产开源项目，也许是目前最好的 Markdown 增强插件之一

logo 版式示例

指定为 logo 模式

指定为 #logo#left 模式

设置为 #logo#left 模式后，实现图片左对齐＋文字环绕的排版效果。我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK。

指定为 #logo#right 模式

设置为 #logo#right 模式后，实现图片右对齐＋文字环绕的排版效果。我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK，我来凑些字数 Hello VLOOK。

图片缩放

Markdown 粉Q「希望可以自由设置图片的缩放大小，以适应不同尺寸图片在文档上的呈现效果」

VLOOKA_T2 Markdown 不支持对图片进行缩放，现在用 VLOOK™ 的「#魔法」就能轻松实现～

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现：

• 图片地址 + #缩放值

图片缩放值的说明

按绝对宽度缩放图片示例

按绝对高度缩放图片示例

图片旋转

Markdown 粉Q「希望可以快速直接将图片进行旋转」

VLOOKA_T2 Markdown 不支持对图片进行旋转，现在用 VLOOK™ 的「#魔法」就能轻松实现～

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现（目前暂时只支持旋转 180 度）：

• 图片地址 + #180deg

图片旋转示例

图片翻转

Markdown 粉Q「希望可以快速直接将图片进行水平方面、垂直方向的翻转」

VLOOKA_T2 Markdown 不支持对图片进行翻转，现在用 VLOOK™ 的「#魔法」就能轻松实现～

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现：

• 水平方向翻转：图片地址 + #fliph

• 垂直方向翻转：图片地址 + #flipv

图片翻转示例

图片滤镜

Markdown 粉Q「希望可以对图片添加一些简单、实用的滤镜（举个栗子：反色、模糊、灰度、复古）」

VLOOKA_T2 Markdown 不支持对图片添加滤镜，现在用 VLOOK™ 的「#魔法」就能轻松实现～

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现：

• 反色：图片地址 + #invert

• 模糊：图片地址 + #blur

• 复古：图片地址 + #aged

• 灰度：图片地址 + #gray

进阶玩法

如果希望这些添加滤镜后的图片，能在鼠标悬停时恢复原图显示，也非常的 Easy～

只需要在左侧提及的「#魔法」后添加英文感叹号 ! 即可～

图片滤镜示例

鼠标悬停时恢复原图显示的示例

图片网格背景

Markdown 粉Q「在使用工程或设计类的图片时，希望能自动添加统一的网格作为背景」

VLOOKA_T2 通过「#魔法」，就可以为透明背景的图片（如 PNG、SVG ）添加指定的网格背景了。

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现：

• 图片地址 + #网格背景标识

该特性会自动适配图片同时应用 Dark Mode 的情况。

图片网格背景的标识与说明

线条网格背景示例

方块网格背景示例

图片边缘留白

Markdown 粉Q「我的插图边缘没有留白，视觉上看得比较挤，可以怎么调整？」

VLOOKA_T2 通过「#魔法」这种小众个性的排版挑战也能轻松拿捏～

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

语法

可在「图片地址」中添加 VLOOK™ 规范的参数来启用这一特性（默认给图片的边缘添加 20px 的留白）：

• 图片地址 + #padding ，示例： ![图片题注](xxx.png#padding)

明信片

Markdown 粉Q「Markdown 生成的 HTML 大多是静态的，在交互性方面能带来一些更现代的设计吗？」

VLOOKA_T2 有了「#魔法」加持，图文自动排版就更上一层楼，单调的图片瞬间灵动了起来～

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的图片「#魔法」实现：

• 单卡模式²：图片地址 + #card

• 双卡模式³：图片地址 + #cardd

当图片底部会出现一条主题色的边框，即意味正确启用了。在导出 HTML 后支持在插图索引中进行浏览和检索。

Tip

若图片的边缘是白底，或是希望图片能突出边缘，可以在以上基础上追加 #border 即可实现

Markdown 标准图片语法为：

![Alt text](xxx.png#card "Title text")

需要注意的是，卡片标题内容来自于图片中的「Title text」，而卡片正文内容来自于图片中的「Alt text」。

Tip

若需要对正文内容内容进行自定义的排版格式，可在图片下方添加一个「引用块」，该引用块的内容将代替「Alt text」。

任意普通的图片添加明信片（单卡）示例

任意普通的图片添加明信片（单卡+边框）示例

任意普通的图片添加明信片（双卡）示例

任意普通的图片添加明信片（双卡+边框）示例

结合引用块着色的明信片（双卡）示例

_Gn

进阶玩法

• 如果希望以分栏_T1T2的方式对明信片进行更整洁的排版，只要将「明信片」放置到引用块着色内即可

• 如果引用块指定了背景颜色_T1T2，会进行适配显示，还是那个熟悉的配方～

• 如果图片的宽度较小，鼠标悬停后显示的卡片希望显示得更宽，可以尝试在图片地址中添加 #fitmax ，查看示例 ❯❯

_Bk!

结合引用块分栏的单卡示例

以「自然、人类、科学、文明」_RdGnSe为主题的一个不以营利为目的的社会公益性事业机构，是为公众提供科普教育的社会科技活动场所，科普旅游休闲的示范景点。

去 百度百科 看看 去 百度百科 看看

---

_{广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成，于 2008 年 9 月 26 日建成开放。}

_T1

_Mn

结合引用块分栏的双卡模式示例

以「自然、人类、科学、文明」_LmOgYe为主题的一个不以营利为目的的社会公益性事业机构。是为公众提供科普教育的社会科技活动场所。科普旅游休闲的示范景点。

去 百度百科 看看 去 百度百科 看看

---

_{广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成，于 2008 年 9 月 26 日建成开放。}

_Bu

鹈^tí鹕^hú（别称塘鹅或河鸟，是鹈形目 鹈鹕 科 鹈鹕 属大型游禽，翅膀宽大，翼展较宽，扇翅有力），在蒙大拿州的药湖国家野生动物保护区上空飞行。前景中的鸟在它的喙上有一个角质的片，它在交配季节生长，当季节结束时就会脱落。

_{—— 摄影：KLAUS NIGGE, NAT GEO IMAGE COLLECTION}

_Gn

图片适配高清屏

Markdown 粉Q「高清屏看到的图片会变得模糊，Markdown 的图片语法又不支持不同分辨率图片集，怎么办？」

VLOOKA_T2 保持 Markdown 图片语法不变的情况下，轻松在高分辨率的屏幕上显示高清分辨率的图片！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的参数来启用这一特性：

方式一

适用标准固定图片文件名：
srcset=@2x,@3x

固定的图片文件名举例

• 标准分辨率的文件名 mypic.jpg

• 2x 分辨率的文件名 mypic@2x.jpg

• 3x 分辨率的文件名 mypic@3x.jpg

方式二

适用第三方图床随机图片文件名：
srcset=<2x图片路径>@2x,<3x图片路径>@3x

随机的图片文件名举例

• 标准分辨率的文件名 2WY6eq.jpg

• 2x 分辨率的文件名 3yEIwd.jpg

• 3x 分辨率的文件名 4sUFDp.jpg

图片不同分辨率的 URL 参数（srcset）的示例说明

图片适配 Dark Mode

Markdown 粉Q「系统开启 Dark Mode 后，图片显示得有点不太和谐，怎么办？」

VLOOKA_T2 支持指定图片在 Dark Mode 时的适配方式，目前支持「反色」和「替换」，满足不同的需求！

适用范围 ••• 编辑时OFF_Gy ON导出 HTML_Gn

以反色适配

特别适合「黑/白/灰」类型的图片

在「图片地址」中添加 VLOOK™ 规范的 URL 参数实现：

• URL 参数： darksrc=invert

---

你现在就可以点击右下角的 / / （快捷键 D )，然后看看下面两个插图的变化～

以替换适配

在「图片地址」中添加 VLOOK™ 规范的 URL 参数实现：

URL 参数：

• 普通分辨率的图片： darksrc=xxx.jpg

• 适配高清屏分辨率的图片（可选）： darksrcset=... ，该参数的用法适配高清屏的 srcset 保持一致，详见「图片适配高清屏」

---

你现在就可以点击右下角的 （快捷键 D )，然后看看下面两个插图的变化～

图片剪影

Markdown 粉Q「希望文档中的图片能自动跟随文档主题本色，或文字颜色，而不用重新制作多个版本的图片资源」

VLOOKA_T2 可以针对透明背景的 png 或 svg 图片，用指定颜色显示其轮廓。

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

在「图片地址」中添加 VLOOK™ 规范的 URL 参数实现：

• URL 参数： fill=颜色标识

图片剪影的 URL 参数（fill）的标识及说明

图片剪影混排示例

1. 不同的内容使用 text 颜色标识会进行自动适配：

   • 适配为 普通文本 的颜色： Markdown 是一种专门针对网络写作的文本标记语言

   • 适配为 链接文本 的颜色：什么是 Markdown ？

   • 适配为 按钮链接 的颜色： Markdown Markdown

   • 适配为 引用块（着色后）、GitHub Style Alert 的颜色

2. 使用指定的预置色号：

图片剪影指定为预置色号示例

颜色	色号	图片剪影效果示例
酒红 Wine	WnWn	Markdown 图标替换为指定颜色
红 Red	RdRd	Markdown 图标替换为指定颜色
橙 Orange	OgOg	Markdown 图标替换为指定颜色
黄 Yellow	YeYe	Markdown 图标替换为指定颜色
柠绿 Lime	LmLm	Markdown 图标替换为指定颜色
绿 Green	GnGn	Markdown 图标替换为指定颜色
矿绿 Mineral	MnMn	Markdown 图标替换为指定颜色
橄榄绿 Olives	OlOl	Markdown 图标替换为指定颜色
水绿 Aqua	AqAq	Markdown 图标替换为指定颜色
青 Cyan	CyCy	Markdown 图标替换为指定颜色
蓝 Blue	BuBu	Markdown 图标替换为指定颜色
海蓝 Sea	SeSe	Markdown 图标替换为指定颜色
薰衣紫 Lavender	LaLa	Markdown 图标替换为指定颜色
藤紫 Vine	VnVn	Markdown 图标替换为指定颜色
紫 Purple	PuPu	Markdown 图标替换为指定颜色
玫红 Rose	RoRo	Markdown 图标替换为指定颜色
粉红 Pink	PkPk	Markdown 图标替换为指定颜色
金 Gold	GdGd	Markdown 图标替换为指定颜色
棕 Brown	BnBn	Markdown 图标替换为指定颜色
灰 Gray	GyGy	Markdown 图标替换为指定颜色
黑 Black	BkBk	Markdown 图标替换为指定颜色
主题主色 Theme1	T1T1	Markdown 图标替换为指定颜色
主题辅助色 Theme2	T2T2	Markdown 图标替换为指定颜色

引用块着色及标题示例

这是 Markdown 的 6 级标题

这里是正文内容。

_Pk

图片对比

COMMING SOON...

---

_Gy!

图片画廊

COMMING SOON...

_Gy!

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

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

°分栏

Markdown 粉Q「Markdown 原生是不支持分栏排版的，有些用户将就着用表格来顶班，仍然也很难受～」

VLOOKA_T2 有了 VLOOK 后，只需要 1 个动作就可以让你的「引用块、列表、GitHub Style Alert」瞬间分栏排列， 嗖嗖～

列表分栏

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

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

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

主要适用于带小标题的分栏需求，排版内容适合通过列表方式进行组织，如：任务看板之类的。 语法：在需要进行分栏排版的「列表」前一段落添加指定数量的「水平分割线」 ---

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

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

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

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

双栏引用块的 Markdown 语法示例

xxxxxxxxxx
7
1
--- 
2

3
- 列表 1
4
  - 列表项 1-1
5
  - 列表项 1-2
6
- 列表 2
7
  - 列表项 2-1

双栏列表示例

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

• 列表 3

  • 这是列表项 3-1

  • 这是列表项 3-2

• 列表 4

  • 这是列表项 4-1

• 列表 5

  • 这是列表项 5-1

四栏列表示例

• 列表 1

  • 这是列表项 1-1

  • 这是列表项 1-2

• 列表 2

  1. 这是列表项 2-1

  2. 这是列表项 2-2

• 列表 3

  • 这是列表项 3-1

  • 这是列表项 3-2

• 列表 4

  • 这是列表项 4-1

  • 这是列表项 4-2

• 列表 5

  • 这是列表项 5-1

• 列表 6

  • 这是列表项 6-1

• 列表 7

  • 这是列表项 7-1

五栏列表示例

• 列表 1

  • 这是列表项 1-1

  • 这是列表项 1-2

• 列表 2

  1. 这是列表项 2-1

  2. 这是列表项 2-2

• 列表 3

  • 这是列表项 3-1

  • 这是列表项 3-2

• 列表 4

  • 这是列表项 4-1

  • 这是列表项 4-2

• 列表 5

  • 这是列表项 5-1

  • 这是列表项 5-2

• 列表 6

  • 这是列表项 6-1

• 列表 7

  • 这是列表项 7-1

• 列表 8

  • 这是列表项 8-1

• 列表 9

  • 这是列表项 9-1

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

---

• 列表 1

  • 这是列表项 1-1

  • 这是列表项 1-2

• 列表 2

  1. 这是列表项 2-1

  2. 这是列表项 2-2

引用块分栏

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

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

适用范围 ••• ON编辑时_Gn ON导出 HTML_Gn

主要适用于对同类内容进行分块组织，且排版内容不适合通过列表方式进行组织的情况。 语法：在需要进行分栏排版的「引用块」前一段落添加指定数量的「水平分割线」 ---

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

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

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

双栏引用块的 Markdown 语法示例

xxxxxxxxxx
7
1
---
2

3
> 分栏 1
4
> 分栏 1 的内容
5

6
> 分栏 2
7
> 分栏 2 的内容

单行双栏引用块示例（无小标题）

分栏 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 栏