一些约定

#魔法

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

什么是 「#魔法」？

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

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

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

举例说明：

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

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

对图片的快速排版应用

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

对视频的快速排版应用

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

格式组合与特例

VLOOK™ 对 Markdown 的常规格式进行组合和在特例使用，创新地实现多种个性实用的排版能力。

^tab

高亮

高亮的颜色，会根据 主题色、文本颜色、文本渐变色、引用块着色、GitHub Style Alert 进行适配。

一级标题、六级标题

在文档中特定的位置使用 Markdown 的一级标题 # 标题 、六级标题 ###### 标题 实现：

• 「封面与封底」

• 「引用块小标题」

Markdown 常规格式组合

预置色号

< 壹 >

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

< 贰 >

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

< 叁 >

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

语法

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

• 对应的 Markdown 格式语法为：

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

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

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

打赏

感谢打赏支持 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™ 的话，可以贡献一杯咖啡

_Gn

I like VLOOK™, I donate a cup of coffee

_Se

°文本

文本颜色

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

^tab

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

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

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

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

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

普通段落内的文本颜色示例

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

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

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

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

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

5. 或是 指定的^上标内容_Gn、_{下标内容Gn} 通过色号组合进行标记。

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

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

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

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

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

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

文本颜色预置色号及示例

文本渐变色

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

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

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

普通段落内的文本渐变示例

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

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

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

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

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

5. 或是 指定的^上标内容_RdGn、_{下标内容RdGn} 通过色号组合 标记为渐变色_RdGn。

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

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

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

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

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

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

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

°段落

段落加粗

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

满足对整个段落内容居中、强化突显的需求。示例如下：

～这是一段需要强化突显的内容，并以居中对齐方式出现。加粗、字号加大、居中，其他不变～

这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容。

段落下划线

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

满足对整个段落内容居中、稍微突显，与后续内容有视觉区隔，但又有所关联的需求。示例如下：

～这是一段稍微突显，与后续内容有视觉区隔，但又有所关联的内容。字号加大、居中，其他不变～

这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容。

_{（以上段落下方的分隔线样式，支持通过 定制主题 调整样式）}

段落高亮

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

满足对整个段落内容以更个性、更突显的引用样式，并与前/后内容有视觉区隔的需求。示例如下：

～这是一段 更个性、更突显_RdPuRo ，与前/后内容有视觉区隔的内容。更大字号、居中，其他不变～

这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容，这里是在段落加粗后的内容。

_{（以上段落首尾的引用样式，支持通过 定制主题 调整样式）}

°表格

单元格合并

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

跨列合并（横向合并)

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

_T1

跨行合并（纵向合并)

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

_T2

^tab

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

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

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

表格列格式

基础

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

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

基础列格式示例

更多基础列格式示例

^tab

基础列格式嵌套

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

数值

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

「普通数字」自动格式化

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

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

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

_Rd!

普通数字示例

「百分数」自动格式化

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

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

_Bu!

百分数列表格式示例

「货币」自动格式

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

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

_Bn!

货币列表格式示例

复选框

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

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

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

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

「复选框」列格式示例

单元格着色

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

对单元格的文本进行着色

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

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

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

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

^tab

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

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

表格行分组折叠

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

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

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

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

^tab

写法如下第 2 列所示

示例 1_表格行分组折叠

表格行分组折叠示例

表格换行版式

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

^tab

对于表格

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

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

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

_T1

对于单元格

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

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

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

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

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

_T2

列数 < 7 列

列数 ≥ 7 列

表格对齐方式

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

表格的对齐方式（左对齐、居中）由所选用的 VLOOK™ 主题指定，支持通过 定制主题服务 指定期望的对齐方式。

表格题注与自动编号

关于表格的题注与自动编号

相关内容详见这里 ❯❯

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

°图片

图片显示版式

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 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™ 的「#魔法」就能轻松实现～

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

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

• 图片地址 + #缩放值

图片缩放值的说明

^tab

宽度度按指定像素缩放图片示例

^tab

宽度按指定像素缩放图片示例

^tab

高度按指定像素缩放图片示例

^tab

图片旋转

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

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

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

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

• 图片地址 + #180deg

图片旋转示例

图片翻转

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

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

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

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

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

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

图片翻转示例

图片滤镜

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

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

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

^tab

语法

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

• 反色：图片地址 + #invert

• 模糊：图片地址 + #blur

• 复古：图片地址 + #aged

• 灰度：图片地址 + #gray

进阶玩法

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

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

图片滤镜示例

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

图片网格背景

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

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

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

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

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

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

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

线条网格背景示例

^tab

方块网格背景示例

^tab

图片边缘留白

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

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

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

语法

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

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

明信片

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

^tab

明信片语法

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

• 悬停模式¹：图片地址 + #card

• 平铺模式²：图片地址 + #cardd

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

Tip

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

明信片的标题和正文

Markdown 标准图片语法为：

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

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

 

Tip

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

^tab

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

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

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

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

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

_Gn

进阶玩法

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

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

• 图片添加 #border 后，图片宽度较小无法完全填充分栏空间时，可额外添加 #fill 参数，查看示例 ❯❯

• 如果图片的宽度较小，鼠标悬停后显示的卡片希望显示得更宽，可以尝试在图片地址中添加 #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 图片语法不变的情况下，轻松在高分辨率的屏幕上显示高清分辨率的图片！

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

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

^tab

不使用「图床」

---

不使用图床的语法

srcset=@2x,@3x

举例

![](我的图片.png?srcset=@2x)

使用「图床」

---

使用图床（随机命名）的语法

srcset=<2x图片路径>@2x,<3x图片路径>@3x

举例

![](2WY6eq.jpg?srcset=3yEIwd.jpg@2x)

 

^tab

图片适配 Dark Mode

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

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

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

以反色适配

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

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

• URL 参数： darksrc=invert

---

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

^tab

以替换适配

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

URL 参数：

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

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

---

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

^tab

^tab

图片剪影

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

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

适用范围 ••• 编辑时✓ 适用_Gn 导出 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

GIF 图片播放控制

直接用在线视频容易大、易受攻击。常转换为 GIF 进行合适，但会自动播放产生不必要的流量

通过类似视频的点击后再播放实现更友好的交互，并节省流量

除gif外，建议配套一张封面图片

然后在图片地址后加 #gif ，点击后播放同名的 .gif 文件

![标题](xxx.png#gif)

图片对比

COMMING SOON...

---

_Gy!

图片画廊

COMMING SOON...

_Gy!

图片对齐方式

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

• 图片的对齐方式（左对齐、居中）由所选用的 VLOOK™ 主题指定，支持通过 定制主题服务 指定期望的对齐方式；

• 包括段落内仅有一张图片、带链接的图片等情况，但不包括 icon 版式 的图片。

图片题注与自动编号

关于图片的题注与自动编号

相关内容详见这里 ❯❯

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

°列表

列表自动编号与着色

除了前面提到的 列表分栏 外，还提供以下增强特性：

1. 针对有序列表、无序列表的分级符号进行统一处理，并应用主题的配色；

2. 编辑时输入焦点，及导出 HTML 后鼠标悬停，均支持高亮当前行的列表符号；

3. 对第一级有序列表，可通过 定制模板主题 的方式选择不同的符号样式

   1. 暂时不适用于 GitHub Style Alert 内的有序列表；

   2. 引用内的有序列表前需要有其他段落内容（如空行、小标题等）。

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

引用块内的有序列表的自动编号

1. 有序列表的自动编号样式：

   1. 强制设置各层级的列表符号，并应用主题色。

      1. 三级有序列表

         1. 四级有序列表

            1. 五级有序列表

               1. 六级有序列表

Top 20 有序列表样式

1. Top 9 的样式

2. Top 9 的样式

3. Top 9 的样式

4. Top 9 的样式

5. Top 9 的样式

6. Top 9 的样式

7. Top 9 的样式

8. Top 9 的样式

9. Top 9 的样式。如果内容过长会自动换行，看看换行后的缩进情况。

10. Top 10-19 的样式。如果内容过长会自动换行，看看换行后的缩进情况。

11. Top 10-19 的样式

12. Top 10-19 的样式

13. Top 10-19 的样式

14. Top 10-19 的样式

15. Top 10-19 的样式

16. Top 10-19 的样式

17. Top 10-19 的样式

18. Top 10-19 的样式

19. Top 10-19 的样式

20. Top 20 的样式

_T2!

引用块内的无序列表的自动编号

• 无序列表的自动编号样式：

  • 强制设置各层级的列表符号，并应用主题色。

    • 三级无序列表

      • 四级无序列表

        • 五级无序列表

          • 六极无序列表

_Gd!

1. 这是普通正文内有序列表的自动编号样式：

   1. 强制设置各层级的列表符号，并应用主题色。

      1. 三级有序列表

         1. 四级有序列表

            1. 五级有序列表

               1. 六级有序列表

• 这是普通正文内无序列表的自动编号样式：

  • 强制设置各层级的列表符号，并应用主题色。

    • 三级无序列表

      • 四级无序列表

列表分栏

关于列表的分栏排版

相关内容详见这里 ❯❯

任务清单样式

Markdown 粉Q「默认生成的任务清单样式是浏览器标准的复选框样式，与主题和配套排版增强效果不一致～」

VLOOKA_T2 VLOOK™ 针对这种情况做了多处样式和细节适配，从整体到细节的视觉都更和谐、一致。

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

任务整体进度： ?

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

  • 调查目标客户群体 ?

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

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

  • 研究竞争对手 ?

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

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

• 二、收集市场数据 ?

  • 查阅行业报告和数据 ?

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

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

  • 分析市场趋势 ?

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

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

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

°引用块

引用块小标题

Markdown 粉Q「希望在引用块内内容添加一个小标题，但直接用分级章节标题又不太合适」

VLOOKA_T2 一般引用块内的首段内容作为小标题，所以对整段内容设置为加粗、高亮，就可以自动渲染为「引用块小标题」的样式了！

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

^tab

语法

对引用块内首行设置为「粗体」或「高亮」即可。

同时也支持在小标题前，以独占一行方式添加「图标版式」的图片，提供更丰富的排版选择～

引用块小标题示例

​x
1
> **这里是这个引用块的小标题**
2
> ---
3
> xxxxx
4

5
> ==这里是这个引用块的小标题==
6
> ---
7
> xxxxx

示例效果如下：

加粗设置的引用块小标题

这里引用块内的其他段落内容 1

这里引用块内的其他段落内容 2

高亮设置的引用块小标题

这里引用块内的其他段落内容 1

这里引用块内的其他段落内容 2

更多的小标题样式，详见引用块着色 ❯❯

引用块分栏

关于引用块的分栏排版

相关内容详见这里 ❯❯

引用块着色

Markdown 粉Q「希望可以在 Markdown 文档中能拉个横幅或板子，在上面写上一些重要的事～」

VLOOKA_T2 VLOOK™ 的 预置色号 又可以派上用途了，同样的配方，同样的超好用！满足实用的多色彩「引用块」的排版需求！

适用范围 ••• 编辑时× 不适用_Gy 导出 HTML✓ 适用_Gn

^tab

语法

在引用块内中独占一行（建议在最后一行），在该行内只添加对应的色号 _~色号~_ ，如：_~Rd~_

其中：色号 指定该引用块使用的 预置色号，在被正常识别后会在色号前出现引用块着色的标识

• 默认为「线框」样式；

• 若要指定为「色块」样式，使用「强调」风格的预置色号即可（即在 色号 后添加英文的感叹号「!」，如：_~Rd!~_ ）。

正文内的标签示例

引用块着色 6 级标题

色号 Wn　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Wn

引用块着色 6 级标题

色号 Wn!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Wn!

引用块着色 6 级标题

色号 Rd　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Rd

引用块着色 6 级标题

色号 Rd!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Rd!

引用块着色 6 级标题

色号 Og　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Og

引用块着色 6 级标题

色号 Og!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Og!

引用块着色 6 级标题

色号 Ye　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Ye

引用块着色 6 级标题

色号 Ye!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Ye!

引用块着色 6 级标题

色号 Lm　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Lm

引用块着色 6 级标题

色号 Lm!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Lm!

引用块着色 6 级标题

色号 Gn　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Gn

引用块着色 6 级标题

色号 Gn!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Gn!

引用块着色 6 级标题

色号 Mn　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Mn

引用块着色 6 级标题

色号 Mn!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Mn!

引用块着色 6 级标题

色号 Ol　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Ol

引用块着色 6 级标题

色号 Ol!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Ol!

引用块着色 6 级标题

色号 Aq　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Aq

引用块着色 6 级标题

色号 Aq!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Aq!

引用块着色 6 级标题

色号 Cy　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Cy

引用块着色 6 级标题

色号 Cy!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Cy!

引用块着色 6 级标题

色号 Bu　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Bu

引用块着色 6 级标题

色号 Bu!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Bu!

引用块着色 6 级标题

色号 Se　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Se

引用块着色 6 级标题

色号 Se!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_Se!

引用块着色 6 级标题

色号 La　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_La

引用块着色 6 级标题

色号 La!　了解色号 　主按钮 次按钮

更多信息

• 这是一个任务清单项

• 这是无序列表项

1. 这是有序列表项

_La!