VLOOK™
让你的 Markdown 有了新看wán法
──
快速参考手册 (Part.I)
最新版本V23.0
MAX°孟兆
COPYRIGHT © 2016-2024. MAX°DESIGN.
VLOOK™<br>让你的 Markdown 有了新看wán法<br>──<br>快速参考手册 (Part.I)<br>最新版本V23.0<br><br><br>MAX°孟兆<br>COPYRIGHT © 2016-2024. MAX°DESIGN.打赏快速入坑快速入坑°文档排版表格图片 • 图标 • 图表分栏 • 引用块标签 • 徽章 • 注音 • 面包屑 • 刮刮卡代码块 • 多媒体 • 列表 • 任务清单快速入坑°内容导航快速入坑°演示与出版快速入坑°主题与不杂项预置色号°文本文本着色示例_普通的段落文本着色示例_在引用块内的段落文本着色渐变色文本示例_普通的段落渐变色文本示例_在引用块内的段落渐变色文本°表格单元格合并示例_普通单元格的横向合并、纵向合并示例_表头纵向、横向合并 1示例_表头纵向、横向合并 2表格列格式基础示例_基础列格式示例_基础列格式（嵌套）示例_基础列格式（多行表头嵌套）数值、百分数、货币示例_普通数字示例_百分数示例_货币复选框示例_「复选框」列格式单元格着色表格自动编号与题注通过「方式二」生成的题注表格行自动编号示例_表格前添加 6 级标题表格行分组折叠写法如下第 2 列所示示例 2_表格行分组折叠重复显示表头示例 2_按页重复表头（单行表头）示例 3_按页重复表头（多行表头）表格换行版式表格当前行指标器°图片插图自动编号与题注图片适配高分屏图片不同分辨率的 URL 参数（srcset）的取值及说明示例图片适配 Dark Mode适配方式：反色示例适配方式：替换示例图片剪影示例_链接内图片示例_正文图文混排示例_引用块着色及标题示例_插图（实验性）图片对比图片画廊°图片#魔法RoLmBu图片缩放图片缩放值的说明示例_按绝对宽度缩放图片示例_按绝对高度缩放图片图片显示版式图片不同显示版式的标识与说明图片版式示例：icon图片版式示例：logo指定为 logo 模式指定为 logol 模式指定为 logor 模式明信片进阶玩法示例_任意普通的图片添加 Card 魔法示例_结合引用块分栏的 Card 模式示例_结合引用块分栏的 Card Dual 模式图片对齐方式图片不同对齐方式的标识与说明插图示例非插图版式示例（如 logo / icon / frame 的图片版式等）图片网格背景图片网格背景的标识与说明示例_线条网格示例 2_方块网格图片边缘留白示例适配一行多图°分栏列表分栏示例_双栏列表示例_三栏列表示例_四栏列表示例_五栏列表示例_引用块分栏内嵌套的列表分栏引用块分栏示例_单行双栏引用块示例_单行三栏引用块示例_单行四栏引用块示例_引用块内嵌套的引用块分栏°列表列表自动编号与着色任务清单样式任务整体进度 ?°引用块引用块小标题引用块着色示例_正文内的标签折叠引用块示例_实际应用效果GitHub Style Alert引用块排版细分示例_引用块内嵌普通引用块示例_引用块内嵌引用块分栏示例_列表内嵌引用块°代码、代码块代码块自动编号与题注示例_单行代码块示例_多行代码块复制代码、代码块示例_复制代码示例_复制代码块°多媒体音频示例_标准模式（默认）示例_Mini 模式音频控制高级应用说明视频示例视频控制高级应用说明The End
打赏
若喜欢 VLOOK™ 的话，可以贡献一杯咖啡 :-)
微信支付MaxChowGn!
感谢打赏支持 VLOOK™ 的客官（部分名单）：
＊丽、一＊秋、＊军、＊鹏、李＊6、＊无、H＊t、＊二、f＊y、＊宇、＊琛、＊辉、＊秋、＊笑、＊豫、l＊a、＊心、整＊9、＊国、＊拉、＊龙、＊应、＊销、＊哦、E＊y、……
快速入坑
VLOOK™ 通过结合 Typora 持续 挖掘和扩展 Markdown 和 CSS 的应用潜力，同时结合了文档的互联网化应用场景～
在 文档排版、内容导航、演示辅助、交互体验T1T2 等方面提供了 一致、简洁、友好 的体验。
快速入坑°文档排版
° 文档排版
有了 VLOOK™ 主题及插件的支持，让你对 Markdown 编辑器（暂只支持 Typora）的自动化排版能力有了全新的理解。
得益于成熟的 Web 浏览器、HTML / CSS、JavaScript 技术，让静态的文档也能与你一起「动」起来。
Vn!
表格
内容组织
Vn
行格式
Vn
列格式
Vn
图片 • 图标 • 图表
图片与图表
Vn
版式
Vn
外观
Vn
分栏 • 引用块
对内容分级、分栏/看板、分类展示
Vn
引用块多样化的自动排版
Vn
标签 • 徽章 • 注音 • 面包屑 • 刮刮卡
标记、突出关键内容
Vn
注音、拼音、刮刮卡
Vn
代码块 • 多媒体 • 列表 • 任务清单
代码块
Vn
音频、视频
Vn
列表、任务清单
Vn
快速入坑°内容导航
° 内容导航
VLOOK™ 提供了对文档内容、章节、插图、表格、多媒体提供了多种形式的导航、快速定位和内容组织的工具，全面改善和提高发布的 HTML 文件的浏览体验和效率。
敬请你根据需要和喜好随时、轻松享用～
Bu!
标记、突出关键信息与内容
Vn
注音、拼音、刮刮卡
Vn
° 大纲与索引导航
适用于按目录、分类内容索引（目录/插图/表格/多媒体/代码块）进行全文档跨章节的快速定位 ❯❯
Bu
° 逐章导航
适用于前后章节相关度高，按章节顺序一章一章进行浏览 ❯❯
Bu
° 逐段导航
适用于文档评审或演示，按段落一段一段进行聚焦式浏览 ❯❯
Bu
° 插图导航
适用于按图索骥，快速浏览文档中的插图，以及快速定位到文档中对应的位置 ❯❯
Bu
° 文库导航
适用于将相关话题、内容的文档简介、链接，通过一个独立页面进行快速浏览和跳转 ❯❯
Bu
° 脚注导航
直接在当面位置进行显示脚注，避免来回跳转 ❯❯
Bu
快速入坑°演示与出版
° 演示与出版
VLOOK™ 独创性地为 Markdown 导出的 HTML 提供了强大的演示与出版工具，让 Typora + VLOOK 成为更具生产力的 Markdown 文档解决方案。
非常适合现场和远程的演示辅助工具，敬请为你的 Markdown 开启 Turbo 模式～
Og!
内容助手
° 复制内容
支持图片、代码、代码块内容的一键复制，并支持「复制为 Markdown 格式」 ❯❯
Og
° 插图放大显示
支持将插图一键放大显示，及前后浏览 ❯❯
Og
° 表格阅读模式
针对表格内容，特别是行、列关联性强的表格，快速识别纵横关联的单元格序列 ❯❯
Og
° 画中画
插图/表格/代码块 一键开启「画中画」浮动显示，方便在文档相关内容间对比 ❯❯
Og
Gy!
演示辅助
° 激光笔
对文档内容进行精确指向 ❯❯
Og
° 聚光灯
对屏幕内容的局部进行视觉聚焦 ❯❯
Og
° 图表元素高亮
支持鼠标对 Mermaid 图元悬停高亮显示 ❯❯
Og
Gy!
出版辅助
° 长内容自动折叠
插图、表格、代码内容过高的情况下会自动进行折叠 ❯❯
Og
° 章节标题自动编号
对文档内的章节标题进行自动分级编号 ❯❯
Og
° 自定义欢迎页内容
对文档在加载过程中显示欢迎语内容 ❯❯
Og
° 内容失效检查
对文档的图片、音频、视频、页内链接等内容进行检查并提示 ❯❯
Og
° 链接内容识别
自动识别并提示文档内的链接类型，并针对外链进行了优化 ❯❯
Og
° 链接内容转换
自动 md 链接、外部链接获得更好友的体验 ❯❯
Og
Gy!
快速入坑°主题与不杂项
° 主题与不杂项
「人类从来都是视觉动物，自己或他人在阅读时，让眼睛感受愉悦和美好，是一种美德、一种力量、一种信仰。CyPu」
———— MAX°孟兆CyPu
Lm
模板主题、字体主题
Lm
第三方集成的适配
对于主流的脚本化图表 MermaidRdRo：
数字公式：
结合 VLOOK 针对提供更适配、更美观的样式 ❯❯
Lm
不「杂」项
Lm
预置色号
/ 壹 /
以下是 VLOOK™ 的预置色号，其中大号加粗的英文为对应的色号，如：
YeAq，（支持编辑时提示或预览部分效果）
/ 贰 /
/ 叁 /
支持「常规」和「强调」两种风格，色号后添加英文的感叹号「!」即为强调风格，实际写法如：
Ye!Aq!
新语法
将「色号」设置为以下格式组合：
先「斜体」，后「下标」
对应的 Markdown 格式语法为：
_~色号~_正确设置后会以特殊的样式突出色号标识
Important
为区分 Typora 默认使用单星号
*斜体*标记的斜体，色号中的斜体建议用 Markdown 的另一个斜体的标记语法：下划线_斜体_如何将「旧语法」批量更新为「新语法」？
使用 Typora 的「查找与替换」，若涉及文件较多则推荐 UltraEdit 这类支持从文件中替换功能的工具：
在查找的内容中输入
\~\(((r[do]|og|ye|l[am]|g[nyd]|aq|cy|b[unk]|se|vn|p[uk]|[mw]n|ol|t[12])+(!)?)\)\~，并启用正则表达式选项在替换的内容中输入
_~$1~_执行查找并替换的操作即可。
旧语法
即将废弃语法：
~(色号)~
用英文括号将「色号」进行包裹，并设置为「下标」格式
Gy
°文本
文本着色
Markdown 粉⬇️「文本指定不同的颜色，算是 Markdown 粉除了表格排外的第 2 高的呼声的特性了！」
VLOOK👀T2 通过简洁的方式就可以轻松实现，一起来看看～
针对「指定格式」的文本着色
在「加粗、斜体、高亮、下划线、上标、下标 等」格式的文本后，添加预置色号
具体色号语法参考预置色号
针对「整个段落」的文本着色
语法与左边的「针对指定格式的文本」是保持一致的，区别是在段落的最开始位置添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶T2」
示例_普通的段落文本着色
Gd这是一个段落，可以使用预置的 色号 ，对整个段落进行色号。
对段落中 指定的加粗文本内容Rd通过色号组合进行标记，也支持特殊符号：●Rd●Ye●Gn；
或是 指定的斜体文本内容Gn通过色号组合进行标记；
或是 指定的高亮文本内容Ro通过色号组合进行标记；
或是 指定的下划线文本内容Pu通过色号组合进行标记。
示例_在引用块内的段落文本着色
对段落中 指定的加粗文本内容Rd进行色号，也支持特殊符号：●Rd●Ye●Gn；
或是 指定的斜体文本内容Gn进行色号；
或是 指定的高亮文本内容Ro进行色号；
或是 指定的下划线文本内容Pu进行色号。
T1这是一个段落，可以使用预置的
色号，对整个段落进行色号。
文本着色预置色号及示例
| 颜色 | 色号 | 单色渲染效果示例 |
|---|---|---|
| 酒红 Wine | Wn | 警告、危险、关键事项、删除Wn |
| 红 Red | Rd | 警告、危险、关键事项、删除Rd |
| 橙 Orange | Og | 提醒、注意、修复Og |
| 黄 Yellow | Ye | 关注、优化、备忘、说明Ye |
| 柠绿 Lime | Lm | 提示、参考、新增Lm |
| 绿 Green | Gn | 提示、参考、新增Gn |
| 矿绿 Mineral | Mn | 提示、参考、新增Mn |
| 橄榄绿 Olives | Ol | 提示、参考、新增Ol |
| 水绿 Aqua | Aq | 引用块、公告Aq |
| 青 Cyan | Cy | 引用块、公告Cy |
| 蓝 Blue | Bu | 信息、资讯Bu |
| 海蓝 Sea | Se | 信息、资讯Se |
| 薰衣紫 Lavender | La | 信息、资讯La |
| 藤紫 Vine | Vn | 信息、资讯Vn |
| 紫 Purple | Pu | 延伸、扩展、保留、备用Pu |
| 玫红 Rose | Ro | 年轻、个性、女性Ro |
| 粉红 Pink | Pk | 年轻、个性、女性Pk |
| 金 Gold | Gd | VIP、金融、工程Gd |
| 棕 Brown | Bn | VIP、金融、工程Bn |
| 灰 Gray | Gy | 无效、暂缓、停用、结束Gy |
| 黑 Black | Bk | 黑白、高对比Bk |
| 主题主色 Theme1 | T1 | 当前 VLOOK™ 主题的主色T1 |
| 主题辅助色 Theme2 | T2 | 当前 VLOOK™ 主题的辅助色T2 |
渐变色文本
Markdown 粉⬇️「现在越来越流行渐变的文本颜色，这要是也能有就完美 💯 了！」
VLOOK👀T2 全新的预置色号支持渐变色的，写法自然直观，绝对能惊艳到你～
示例_普通的段落渐变色文本
LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。
对段落中 指定的加粗文本内容RoBuAq通过色号组合 标记为渐变色CySe；
或是 指定的斜体文本内容SeGd通过色号组合 标记为渐变色OgRo；
或是 指定的高亮文本内容AqPu通过色号组合 标记为渐变色BuAq；
或是 指定的下划线文本内容OgBk通过色号组合 标记为渐变色SeRo。
示例_在引用块内的段落渐变色文本
对段落中 指定的加粗文本内容RoBuAq通过色号组合标记为渐变色CySe；
或是 指定的斜体文本内容SeGd通过色号组合标记为渐变色OgRo；
或是 指定的高亮文本内容AqPu通过色号组合标记为渐变色BuAq；
或是 指定的下划线文本内容OgBk通过色号组合标记为渐变色SeRo。
LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。
如果你对以上内容有更多需求或建议，欢迎随时反馈～ 
°表格
单元格合并
Markdown 粉⬇️「Markdown 粉呼声最高的是什么？———— 单元格合并！」
VLOOK👀T2 现在可以轻松让你实现 —— Wow! Wow!～Markdown 粉们的欢呼声！！！
跨列合并（横向合并)
在要被合并的单元格内输入列合并标识
==，该单元格将会与左侧相邻的单元格进行合并，以此类推。T1
跨行合并（纵向合并)
在要被合并的单元格内输入行合并标识
:，该单元格将会与上方相邻的单元格进行合并，以此类推。T2
示例_普通单元格的横向合并、纵向合并
| 列 A | 列 B | 列 C | 列 D | 列 E | 列 F | 列 G |
|---|---|---|---|---|---|---|
纵向合并 ×3 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 123 纵向合并 ×5单元格 徽章 1单元格 徽章 2Rd单元格 内容 3内容 4Gn! |
| : | 纵向合并 ×2 | 横向合并 ×4 | == | == | == | : |
| : | : | 普通单元格加粗 | 普通单元格徽章 | 普通单元格 | 普通单元格 | : |
| 普通单元格 | 纵向 合并 ×3 | 普通 单元格 斜体 | 普通单元格 | 普通单元格 | 普通单元格 | : |
| 普通单元格 | : | 普通单元格高亮 | 普通单元格 | 普通单元格 | 普通单元格 | : |
| 普通单元格 | : | 普通单元格下划线 | 普通单元格 | 普通单元格 | 普通单元格 | : |
示例_表头纵向、横向合并 1
列 A 纵向合并 ×2 | 列 B 横向合并 ×2 | == | 列 D 纵向合并 ×3 | 列 E 横向合并 ×3 | == | == |
|---|---|---|---|---|---|---|
| : | 二级列头 | 二级列头 | : | 这是二级列头 E1.1 | 二级列头 | 二级列头 |
| 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
| 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
示例_表头纵向、横向合并 2
列 A 纵向合并 ×3 | 列 B 横向合并 ×4 | == | == | == | 列 F 纵向合并 ×3 | 列 G 纵向合并 ×3 |
|---|---|---|---|---|---|---|
| : | 二级列头 B1 | == | 二级列头 B2 | == | : | : |
| : | 二级列头 B11 | 三级列头 B12 | 三级列头 B21 | 三级列头 B21 | : | : |
| 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
| 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
表格列格式
基础
Markdown 粉⬇️「Markdown 表格如何快速设置整列的格式（加粗、高亮、斜体）？」
VLOOK👀T2 SO EASY～ 只须在表头按以标准的 Markdown 或 GFM 的格式设置语法设置对应的格式即可实现这样的格式化。
温故一下标准 Markdown 或 GFM 的格式语法：
**加粗**、*斜体*、==高亮==
示例_基础列格式
| 加粗 | 斜体 | 高亮 |
|---|---|---|
| 单元格（横向合并） | == | 单元格 |
| 单元格 | 单元格 afgiklo 10 | 单元格内有加粗内容 |
| 单元格 | 单元格 afgiklo 10 | 单元格内容 |
示例_基础列格式（嵌套）
| 加粗 | 加粗＋高亮 |
|---|---|
| A | 单元格 |
| B | 单元格内有加粗内容 |
示例_基础列格式（多行表头嵌套）
| 普通列 | 嵌套的常规格式 | == | == |
|---|---|---|---|
| : | 加粗 | 斜体 | 高亮 |
| A | 单元格 afgiklo 10 | 单元格 afgiklo 10 | 单元格 |
| B | 单元格 | 单元格 afgiklo 10 | 单元格内有加粗内容 |
数值、百分数、货币
Markdown 粉⬇️「除常规的格式外，还有更高级的格式要求？数字、百分数、货币……一个都不能少！」
VLOOK👀T2 可以支持对「数值类」内容进行整列的自动格式设置了！方式依然的很优雅，很 VLOOK！
将表格列的对齐设置为「右对齐」，即可自动识别不同的数值内容进行自动进行格式化！
「普通数值」自动格式化
使用数字专用的「DIN」风格字体
添加千位符，并以更小字号显示小数部分
数字前自动填充「正号
+」或「负号-」，并通过不同的颜色突出显示Rd!
示例_普通数字
| 原始内容 | 数值情况 | == | == | == | 数值列 | |
|---|---|---|---|---|---|---|
| : | [] 含小数 | [] 正数 | [] 负数 | [] 超三位 | : | : |
| 123 | 123 | |||||
| -12345 | Y | Y | : | -12345 | ||
| +5678.00 | Y | Y | Y | : | +5678.00 | |
| -2345678.00 | Y | Y | Y | : | -2345678.00 |
「百分数」自动格式化
自动继承「普通数字」的格式
以更小字号和视觉弱化来显示百分号
%，并以进度条比例显示对应的百分数值Bu!
示例_百分数
| 原始内容 | 数值情况 | == | == | == | 百分数列 | |
|---|---|---|---|---|---|---|
| : | [] 含小数 | [] 正数 | [] 负数 | [] 超三位 | : | : |
| 79% | 79% | |||||
| 88.88% | Y | : | 88.88% | |||
| +38% | Y | : | +38% | |||
| -57.30% | Y | Y | : | -57.30% | ||
| 100% | : | 100% |
「货币」自动格式
自动继承「普通数字」的格式
对货币符号（如：
¥$），或货币简写（如：CNYUSDHKD等）进行左侧对齐和视觉弱化Bn!
Important
货币符号，或货币简写与金额数值之间须以空格分隔。
示例_货币
| 币种 | 原始内容 | 数值情况 | == | == | == | 货币 | |
|---|---|---|---|---|---|---|---|
| : | : | [] 正数 | [] 负数 | [] 含小数 | [] 超三位 | : | : |
| 人民币 | ￥ +123456.99 | Y | Y | Y | ￥ +123456.99 | ||
| : | CNY 987654.99 | Y | Y | : | CN¥ 987654.99 | ||
| : | CNY 987654.99 | Y | Y | : | CNY 987654.99 | ||
| == | == | == | == | == | == | == | |
| 港元 | HK$ 3456.78 | Y | Y | Y | HK$ 3456.78 | ||
| : | HKD 3456.78 | Y | Y | : | HKD 3456.78 | ||
| == | == | == | == | == | == | == | |
| 美元 | $ +555.38 | Y | Y | $ +555.38 | |||
| : | USD 555 | : | USD 555 | ||||
| == | == | == | == | == | == | == | |
| 澳元 | AU$ 56789 | Y | Y | AU$ 56789 | |||
| : | AUD -56789 | Y | Y | : | AUD -5678 |
复选框
Markdown 粉⬇️「表格的列格式，除了排版格式外，如果希望能支持复选框（勾选框）呢？」
VLOOK👀T2 虽然要求有点高了，但也可以实现，将整列自动设置为「复选框」格式了！
在对应的表格列头内容前，添加
[]␣（如[] 必填项），就可以为该列自动设置为未选择的状态。说明：以上的
␣符号为英文空格若要独立指定某单元格的复选框选择状态，可以这样：
状态
已选择：将单元格内容设置为Y状态
不确定选择：单元格的内容设置为?（中英文问号都支持）Note
若单元格有更多内容，以上符号和内容间要用空格进行分隔
示例_「复选框」列格式
| 复选框样式 | 筛选框列的原始内容 | [] 复选框列 | 说明 |
|---|---|---|---|
| 无内容 | 默认为 未选择 的状态 | ||
| 非约定内容 | （不适用） | （不适用） | 默认为无复选框 |
| 已选择 | Y | Y | 指定为 已选择 的状态 |
| : | y | y | : |
| 不确定选择 | ? 当指定值 ≥0 | ? 当指定值 ≥0 | 指定为 不确定选择 的状态 |
| : | ? 当指定值 ≥0 | ? 当指定值 ≥0 | : |
| : | ？ 当指定值 ≥0 | ？ 当指定值 ≥0 | : |
单元格着色
Markdown 粉⬇️「表格列格式够丰富了，但能不能用不同背景色对单个单元格进行标识呢？」
VLOOK👀T2 VLOOK™ 的预置色号又可以派上用途了，同样的配方，同样的超好用！
对单元格的文本进行着色
与文本着色中对整个段落进行着色方式一致，就是在单元格的最开始位置T2添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶T2」，如：红色
_~Rd~_
对单元格「背景」进行着色
按单元格文本着色方式一样，区别是使用「强调风格」的预置色号即可（如：蓝色
_~Bu!~_）。如已指定了「单元格文本」着色，可以将在单元格的最后位置T2
示例_单元格着色（单色）
| 单元格着色（单色示例）T1! | == | == | == | == | == | == | == | == |
|---|---|---|---|---|---|---|---|---|
| T1T1 主题主色•Theme1T1! | / | == | == | == | == | == | == | T2T2 主题辅助色•Theme2T2! |
| GdGd 金•GoldGd! | PkPk 粉红•PinkPk! | / | YeYe 黄•YellowYe! | LmLm 柠绿•LimeLm! | AqAq 水绿•AquaAq! | / | LaLa 薰衣紫•LavenderLa! | / |
| BnBn 棕•BrownBn! | RoRo 玫红•RoseRo! | RdRd 红•RedRd! | OgOg 橙•OrangeOg! | GnGn 绿•GreenGn! | CyCy 青•CyanCy! | BuBu 蓝•BlueBu! | VnVn 藤紫•VineVn! | GyGy 灰•GrayGy! |
| / | PuPu 紫•PurplePu! | WnWn 酒红•WineWn! | OlOl 橄榄绿•OlivesOl! | MnMn 矿青•MineralMn! | / | SeSe 海蓝•SeaSe! | / | BkBk 黑•BlackBk! |
💡 想知道以上表格的原始内容吗？
可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可
示例_单元格着色（渐变色）
| 单元格着色示例（自定义组合渐变色示例T1T2）T1T2! | == | == | == |
|---|---|---|---|
| RdSe!红-海蓝 双色渐变 RdSeRdSe | OgVn!橙-藤紫 双色渐变 OgVnOgVn | YePu!黄-紫 双色渐变 YePuYePu | LmRo!柠绿-玫红 双色渐变 LmRoLmRo |
| GnPk!绿-粉 双色渐变 GnPkGnPk | AqGd!水绿-金 双色渐变 AqGdAqGd | CyBn!青-棕 双色渐变 CyBnCyBn | BuGy!蓝-灰 双色渐变 BuGyBuGy |
| BkRdGnBuBn!黑-红-绿-蓝-棕 多色渐变 BkRdGnBuBnBkRdGnBuBn | == | == | == |
💡 想知道以上表格的原始内容吗？
可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可
表格自动编号与题注
Markdown 粉⬇️「文档中的表格很多，怎么才能像 Word 那样添加编号和题注呢？」
VLOOK👀T2 无须任何设置，即可自动对文档内所有「表格」进行统一的自动编号，编号举例：表 1 表 2
单题注
若希望为表格在自动编号之后，添加指定的题注，如：
表 1. 2020 年全球经济体 GDP 排名若没有指定题注，VLOOK™ 会自动以表格文字内容（头尾片断）作为题注。
T1!
设置表格题注：方式一（推荐）
作为题注的内容需要独占一个段落，并设置为以下格式组合：
先「斜体」，后「高亮」
对应的 Markdown 格式语法为：
*==这是题注内容==*。Tip
这种方式会在 Typora 编辑时会有可视化的提示。
快捷键
Windows：⌃ Ctrl ＋ i ，松开后 ⌃ Ctrl ＋ ⇧ Shift ＋ H
macOS： ⌘ Command ＋ i ，松开后 ⌘ Command ＋ ⇧ Shift ＋ H +
VLOOK™
让你的 Markdown 有了新看wán法
──
快速参考手册 (Part.I)
最新版本V23.0
MAX°孟兆
COPYRIGHT © 2016-2024. MAX°DESIGN.VLOOK™<br>让你的 Markdown 有了新看wán法<br>──<br>快速参考手册 (Part.I)<br>最新版本
V23.0<br><br><br>MAX°孟兆<br>COPYRIGHT © 2016-2024. MAX°DESIGN.打赏快速入坑快速入坑°文档排版表格图片 • 图标 • 图表分栏 • 引用块标签 • 徽章 • 注音 • 面包屑 • 刮刮卡代码块 • 多媒体 • 列表 • 任务清单快速入坑°内容导航快速入坑°演示与出版快速入坑°主题与不杂项预置色号°文本文本着色示例_普通的段落文本着色示例_在引用块内的段落文本着色渐变色文本示例_普通的段落渐变色文本示例_在引用块内的段落渐变色文本°表格单元格合并示例_普通单元格的横向合并、纵向合并示例_表头纵向、横向合并 1示例_表头纵向、横向合并 2表格列格式基础示例_基础列格式示例_基础列格式（嵌套）示例_基础列格式（多行表头嵌套）数值、百分数、货币示例_普通数字示例_百分数示例_货币复选框示例_「复选框」列格式单元格着色表格自动编号与题注通过「方式二」生成的题注表格行自动编号示例_表格前添加 6 级标题表格行分组折叠写法如下第 2 列所示示例 2_表格行分组折叠重复显示表头示例 2_按页重复表头（单行表头）示例 3_按页重复表头（多行表头）表格换行版式表格当前行指标器°图片插图自动编号与题注图片适配高分屏图片不同分辨率的 URL 参数（srcset）的取值及说明示例图片适配 Dark Mode适配方式：反色示例适配方式：替换示例图片剪影示例_链接内图片示例_正文图文混排示例_引用块着色及标题示例_插图（实验性）图片对比图片画廊°图片#魔法RoLmBu图片缩放图片缩放值的说明示例_按绝对宽度缩放图片示例_按绝对高度缩放图片图片显示版式图片不同显示版式的标识与说明图片版式示例：icon图片版式示例：logo指定为logo模式指定为logol模式指定为logor模式明信片进阶玩法示例_任意普通的图片添加 Card 魔法示例_结合引用块分栏的 Card 模式示例_结合引用块分栏的 Card Dual 模式图片对齐方式图片不同对齐方式的标识与说明插图示例非插图版式示例（如 logo / icon / frame 的图片版式等）图片网格背景图片网格背景的标识与说明示例_线条网格示例 2_方块网格图片边缘留白示例适配一行多图°分栏列表分栏示例_双栏列表示例_三栏列表示例_四栏列表示例_五栏列表示例_引用块分栏内嵌套的列表分栏引用块分栏示例_单行双栏引用块示例_单行三栏引用块示例_单行四栏引用块示例_引用块内嵌套的引用块分栏°列表列表自动编号与着色任务清单样式任务整体进度 ?°引用块引用块小标题引用块着色示例_正文内的标签折叠引用块示例_实际应用效果GitHub Style Alert引用块排版细分示例_引用块内嵌普通引用块示例_引用块内嵌引用块分栏示例_列表内嵌引用块°代码、代码块代码块自动编号与题注示例_单行代码块示例_多行代码块复制代码、代码块示例_复制代码示例_复制代码块°多媒体音频示例_标准模式（默认）示例_Mini 模式音频控制高级应用说明视频示例视频控制高级应用说明The End打赏
若喜欢 VLOOK™ 的话，可以贡献一杯咖啡 :-)
微信支付
MaxChowGn!
感谢打赏支持 VLOOK™ 的客官（部分名单）：
＊丽、一＊秋、＊军、＊鹏、李＊6、＊无、H＊t、＊二、f＊y、＊宇、＊琛、＊辉、＊秋、＊笑、＊豫、l＊a、＊心、整＊9、＊国、＊拉、＊龙、＊应、＊销、＊哦、E＊y、……
快速入坑
VLOOK™ 通过结合 Typora 持续 挖掘和扩展 Markdown 和 CSS 的应用潜力，同时结合了文档的互联网化应用场景～
在 文档排版、内容导航、演示辅助、交互体验T1T2 等方面提供了 一致、简洁、友好 的体验。
快速入坑°文档排版
有了 VLOOK™ 主题及插件的支持，让你对 Markdown 编辑器（暂只支持 Typora）的自动化排版能力有了全新的理解。
得益于成熟的 Web 浏览器、HTML / CSS、JavaScript 技术，让静态的文档也能与你一起「动」起来。
Vn!
表格
内容组织
Vn
行格式
Vn
列格式
Vn
图片 • 图标 • 图表
图片与图表
Vn
版式
Vn
外观
Vn
分栏 • 引用块
对内容分级、分栏/看板、分类展示
Vn
引用块多样化的自动排版
Vn
标签 • 徽章 • 注音 • 面包屑 • 刮刮卡
标记、突出关键内容
Vn
注音、拼音、刮刮卡
Vn
代码块 • 多媒体 • 列表 • 任务清单
代码块
Vn
音频、视频
Vn
列表、任务清单
Vn
快速入坑°内容导航
VLOOK™ 提供了对文档内容、章节、插图、表格、多媒体提供了多种形式的导航、快速定位和内容组织的工具，全面改善和提高发布的 HTML 文件的浏览体验和效率。
敬请你根据需要和喜好随时、轻松享用～
Bu!
标记、突出关键信息与内容
Vn
注音、拼音、刮刮卡
Vn
° 大纲与索引导航
适用于按目录、分类内容索引（目录/插图/表格/多媒体/代码块）进行全文档跨章节的快速定位 ❯❯
Bu
° 逐章导航
适用于前后章节相关度高，按章节顺序一章一章进行浏览 ❯❯
Bu
° 逐段导航
适用于文档评审或演示，按段落一段一段进行聚焦式浏览 ❯❯
Bu
° 插图导航
适用于按图索骥，快速浏览文档中的插图，以及快速定位到文档中对应的位置 ❯❯
Bu
° 文库导航
适用于将相关话题、内容的文档简介、链接，通过一个独立页面进行快速浏览和跳转 ❯❯
Bu
° 脚注导航
直接在当面位置进行显示脚注，避免来回跳转 ❯❯
Bu
快速入坑°演示与出版
VLOOK™ 独创性地为 Markdown 导出的 HTML 提供了强大的演示与出版工具，让 Typora + VLOOK 成为更具生产力的 Markdown 文档解决方案。
非常适合现场和远程的演示辅助工具，敬请为你的 Markdown 开启 Turbo 模式～
Og!
内容助手
° 复制内容
支持图片、代码、代码块内容的一键复制，并支持「复制为 Markdown 格式」 ❯❯
Og
° 插图放大显示
支持将插图一键放大显示，及前后浏览 ❯❯
Og
° 表格阅读模式
针对表格内容，特别是行、列关联性强的表格，快速识别纵横关联的单元格序列 ❯❯
Og
° 画中画
插图/表格/代码块 一键开启「画中画」浮动显示，方便在文档相关内容间对比 ❯❯
Og
Gy!
演示辅助
° 激光笔
对文档内容进行精确指向 ❯❯
Og
° 聚光灯
对屏幕内容的局部进行视觉聚焦 ❯❯
Og
° 图表元素高亮
支持鼠标对 Mermaid 图元悬停高亮显示 ❯❯
Og
Gy!
出版辅助
° 长内容自动折叠
插图、表格、代码内容过高的情况下会自动进行折叠 ❯❯
Og
° 章节标题自动编号
对文档内的章节标题进行自动分级编号 ❯❯
Og
° 自定义欢迎页内容
对文档在加载过程中显示欢迎语内容 ❯❯
Og
° 内容失效检查
对文档的图片、音频、视频、页内链接等内容进行检查并提示 ❯❯
Og
° 链接内容识别
自动识别并提示文档内的链接类型，并针对外链进行了优化 ❯❯
Og
° 链接内容转换
自动 md 链接、外部链接获得更好友的体验 ❯❯
Og
Gy!
快速入坑°主题与不杂项
「人类从来都是视觉动物，自己或他人在阅读时，让眼睛感受愉悦和美好，是一种美德、一种力量、一种信仰。CyPu」
———— MAX°孟兆CyPu
Lm
模板主题、字体主题
Lm
第三方集成的适配
对于主流的脚本化图表 MermaidRdRo：
数字公式：
结合 VLOOK 针对提供更适配、更美观的样式 ❯❯
Lm
不「杂」项
Lm
预置色号
/ 壹 /
以下是 VLOOK™ 的预置色号，其中大号加粗的英文为对应的色号，如：
YeAq，（支持编辑时提示或预览部分效果）/ 贰 /
/ 叁 /
支持「常规」和「强调」两种风格，色号后添加英文的感叹号「!」即为强调风格，实际写法如：
Ye!Aq!
新语法
将「色号」设置为以下格式组合：
先「斜体」，后「下标」
对应的 Markdown 格式语法为：
_~色号~_正确设置后会以特殊的样式突出色号标识
Important
为区分 Typora 默认使用单星号
*斜体*标记的斜体，色号中的斜体建议用 Markdown 的另一个斜体的标记语法：下划线_斜体_如何将「旧语法」批量更新为「新语法」？
使用 Typora 的「查找与替换」，若涉及文件较多则推荐 UltraEdit 这类支持从文件中替换功能的工具：
在查找的内容中输入
\~\(((r[do]|og|ye|l[am]|g[nyd]|aq|cy|b[unk]|se|vn|p[uk]|[mw]n|ol|t[12])+(!)?)\)\~，并启用正则表达式选项在替换的内容中输入
_~$1~_执行查找并替换的操作即可。
旧语法
即将废弃语法：
~(色号)~
用英文括号将「色号」进行包裹，并设置为「下标」格式
Gy
°文本
文本着色
Markdown 粉
⬇️「文本指定不同的颜色，算是 Markdown 粉除了表格排外的第 2 高的呼声的特性了！」VLOOK
👀T2 通过简洁的方式就可以轻松实现，一起来看看～针对「指定格式」的文本着色
在「加粗、斜体、高亮、下划线、上标、下标 等」格式的文本后，添加预置色号，例如：红色
_~Rd~_具体色号语法参考预置色号
针对「整个段落」的文本着色
语法与左边的「针对指定格式的文本」是保持一致的，区别是在段落的最开始位置添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶T2」
示例_普通的段落文本着色
Gd这是一个段落，可以使用预置的
色号，对整个段落进行色号。
对段落中 指定的加粗文本内容Rd通过色号组合进行标记，也支持特殊符号：●Rd●Ye●Gn；
或是 指定的斜体文本内容Gn通过色号组合进行标记；
或是 指定的高亮文本内容Ro通过色号组合进行标记；
或是 指定的下划线文本内容Pu通过色号组合进行标记。
示例_在引用块内的段落文本着色
对段落中 指定的加粗文本内容Rd进行色号，也支持特殊符号：●Rd●Ye●Gn；
或是 指定的斜体文本内容Gn进行色号；
或是 指定的高亮文本内容Ro进行色号；
或是 指定的下划线文本内容Pu进行色号。
T1这是一个段落，可以使用预置的
色号，对整个段落进行色号。文本着色预置色号及示例
颜色 色号 单色渲染效果示例 酒红 Wine Wn 警告、危险、关键事项、删除Wn 红 Red Rd 警告、危险、关键事项、删除Rd 橙 Orange Og 提醒、注意、修复Og 黄 Yellow Ye 关注、优化、备忘、说明Ye 柠绿 Lime Lm 提示、参考、新增Lm 绿 Green Gn 提示、参考、新增Gn 矿绿 Mineral Mn 提示、参考、新增Mn 橄榄绿 Olives Ol 提示、参考、新增Ol 水绿 Aqua Aq 引用块、公告Aq 青 Cyan Cy 引用块、公告Cy 蓝 Blue Bu 信息、资讯Bu 海蓝 Sea Se 信息、资讯Se 薰衣紫 Lavender La 信息、资讯La 藤紫 Vine Vn 信息、资讯Vn 紫 Purple Pu 延伸、扩展、保留、备用Pu 玫红 Rose Ro 年轻、个性、女性Ro 粉红 Pink Pk 年轻、个性、女性Pk 金 Gold Gd VIP、金融、工程Gd 棕 Brown Bn VIP、金融、工程Bn 灰 Gray Gy 无效、暂缓、停用、结束Gy 黑 Black Bk 黑白、高对比Bk 主题主色 Theme1 T1 当前 VLOOK™ 主题的主色T1 主题辅助色 Theme2 T2 当前 VLOOK™ 主题的辅助色T2 渐变色文本
Markdown 粉
⬇️「现在越来越流行渐变的文本颜色，这要是也能有就完美 💯 了！」VLOOK
👀T2 全新的预置色号支持渐变色的，写法自然直观，绝对能惊艳到你～示例_普通的段落渐变色文本
LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。
对段落中 指定的加粗文本内容RoBuAq通过色号组合 标记为渐变色CySe；
或是 指定的斜体文本内容SeGd通过色号组合 标记为渐变色OgRo；
或是 指定的高亮文本内容AqPu通过色号组合 标记为渐变色BuAq；
或是 指定的下划线文本内容OgBk通过色号组合 标记为渐变色SeRo。
示例_在引用块内的段落渐变色文本
对段落中 指定的加粗文本内容RoBuAq通过色号组合标记为渐变色CySe；
或是 指定的斜体文本内容SeGd通过色号组合标记为渐变色OgRo；
或是 指定的高亮文本内容AqPu通过色号组合标记为渐变色BuAq；
或是 指定的下划线文本内容OgBk通过色号组合标记为渐变色SeRo。
LmOgGnRd这是一个段落，在段落最开始位置使用预置的 色号，对整个段落进行着色。
如果你对以上内容有更多需求或建议，欢迎随时反馈～
°表格
单元格合并
Markdown 粉
⬇️「Markdown 粉呼声最高的是什么？———— 单元格合并！」VLOOK
👀T2 现在可以轻松让你实现 —— Wow! Wow!～Markdown 粉们的欢呼声！！！
在要被合并的单元格内输入列合并标识
==，该单元格将会与左侧相邻的单元格进行合并，以此类推。T1
在要被合并的单元格内输入行合并标识
:，该单元格将会与上方相邻的单元格进行合并，以此类推。T2
示例_普通单元格的横向合并、纵向合并
列 A 列 B 列 C 列 D 列 E 列 F 列 G 纵向合并 ×3普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 123纵向合并×5
单元格徽章 1
单元格徽章 2Rd
单元格内容 3内容 4Gn!: 纵向合并 ×2横向合并 ×4== == == : : : 普通单元格加粗 普通单元格 徽章普通单元格 普通单元格 : 普通单元格 纵向
合并×3普通 单元格 斜体 普通单元格 普通单元格 普通单元格 : 普通单元格 : 普通单元格高亮 普通单元格 普通单元格 普通单元格 : 普通单元格 : 普通单元格下划线 普通单元格 普通单元格 普通单元格 : 示例_表头纵向、横向合并 1
列 A 纵向合并 ×2列 B 横向合并 ×2== 列 D 纵向合并 ×3列 E 横向合并 ×3== == : 二级列头 二级列头 : 这是二级列头
E1.1二级列头 二级列头 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 示例_表头纵向、横向合并 2
列 A 纵向合并 ×3列 B 横向合并 ×4== == == 列 F 纵向合并 ×3列 G 纵向合并 ×3: 二级列头 B1 == 二级列头 B2 == : : : 二级列头 B11 三级列头 B12 三级列头 B21 三级列头 B21 : : 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 表格列格式
基础
Markdown 粉
⬇️「Markdown 表格如何快速设置整列的格式（加粗、高亮、斜体）？」VLOOK
👀T2 SO EASY～ 只须在表头按以标准的 Markdown 或 GFM 的格式设置语法设置对应的格式即可实现这样的格式化。温故一下标准 Markdown 或 GFM 的格式语法：
**加粗**、*斜体*、==高亮==示例_基础列格式
加粗 斜体 高亮 单元格（横向合并） == 单元格 单元格 单元格 afgiklo 10 单元格内有加粗内容 单元格 单元格 afgiklo 10 单元格内容 示例_基础列格式（嵌套）
加粗 加粗＋高亮 A 单元格 B 单元格内有加粗内容 示例_基础列格式（多行表头嵌套）
普通列 嵌套的常规格式 == == : 加粗 斜体 高亮 A 单元格 afgiklo 10 单元格 afgiklo 10 单元格 B 单元格 afgiklo 10单元格 afgiklo 10 单元格内有加粗内容 数值、百分数、货币
Markdown 粉
⬇️「除常规的格式外，还有更高级的格式要求？数字、百分数、货币……一个都不能少！」VLOOK
👀T2 可以支持对「数值类」内容进行整列的自动格式设置了！方式依然的很优雅，很 VLOOK！将表格列的对齐设置为「右对齐」，即可自动识别不同的数值内容进行自动进行格式化！
使用数字专用的「DIN」风格字体
添加千位符，并以更小字号显示小数部分
数字前自动填充「正号
+」或「负号-」，并通过不同的颜色突出显示Rd!
示例_普通数字
原始内容 数值情况 == == == 数值列 : [] 含小数 [] 正数 [] 负数 [] 超三位 : : 123 123 -12345 Y Y : -12345 +5678.00 Y Y Y : +5678.00 -2345678.00 Y Y Y : -2345678.00
自动继承「普通数字」的格式
以更小字号和视觉弱化来显示百分号
%，并以进度条比例显示对应的百分数值Bu!
示例_百分数
原始内容 数值情况 == == == 百分数列 : [] 含小数 [] 正数 [] 负数 [] 超三位 : : 79% 79% 88.88% Y : 88.88% +38% Y : +38% -57.30% Y Y : -57.30% 100% : 100%
自动继承「普通数字」的格式
对货币符号（如：
¥$），或货币简写（如：CNYUSDHKD等）进行左侧对齐和视觉弱化Bn!
Important
货币符号，或货币简写与金额数值之间须以空格分隔。
示例_货币
币种 原始内容 数值情况 == == == 货币 : : [] 正数 [] 负数 [] 含小数 [] 超三位 : : 人民币 ￥ +123456.99 Y Y Y ￥ +123456.99 : CNY 987654.99 Y Y : CN¥ 987654.99 : CNY 987654.99 Y Y : CNY 987654.99 == == == == == == == 港元 HK$ 3456.78 Y Y Y HK$ 3456.78 : HKD 3456.78 Y Y : HKD 3456.78 == == == == == == == 美元 $ +555.38 Y Y $ +555.38 : USD 555 : USD 555 == == == == == == == 澳元 AU$ 56789 Y Y AU$ 56789 : AUD -56789 Y Y : AUD -5678 复选框
Markdown 粉
⬇️「表格的列格式，除了排版格式外，如果希望能支持复选框（勾选框）呢？」VLOOK
👀T2 虽然要求有点高了，但也可以实现，将整列自动设置为「复选框」格式了！在对应的表格列头内容前，添加
[]␣（如[] 必填项），就可以为该列自动设置为未选择的状态。说明：以上的
␣符号为英文空格若要独立指定某单元格的复选框选择状态，可以这样：
状态
已选择：将单元格内容设置为Y状态
不确定选择：单元格的内容设置为?（中英文问号都支持）Note
若单元格有更多内容，以上符号和内容间要用空格进行分隔
示例_「复选框」列格式
复选框样式 筛选框列的原始内容 [] 复选框列 说明 无内容 默认为 未选择的状态非约定内容 （不适用） （不适用） 默认为无复选框 已选择 Y Y 指定为 已选择的状态: y y : 不确定选择 ?
当指定值≥0?
当指定值≥0指定为 不确定选择的状态: ?
当指定值≥0?
当指定值≥0: : ？
当指定值≥0？
当指定值≥0: 单元格着色
Markdown 粉
⬇️「表格列格式够丰富了，但能不能用不同背景色对单个单元格进行标识呢？」VLOOK
👀T2 VLOOK™ 的预置色号又可以派上用途了，同样的配方，同样的超好用！对单元格的文本进行着色
与文本着色中对整个段落进行着色方式一致，就是在单元格的最开始位置T2添加预置色号即可，在被正常识别后会在色号前出现段落标识「¶T2」，如：红色
_~Rd~_对单元格「背景」进行着色
按单元格文本着色方式一样，区别是使用「强调风格」的预置色号即可（如：蓝色
_~Bu!~_）。如已指定了「单元格文本」着色，可以将在单元格的最后位置T2
示例_单元格着色（单色）
单元格着色（单色示例）T1! == == == == == == == == T1T1
主题主色•Theme1T1!/ == == == == == == T2T2
主题辅助色•Theme2T2!GdGd
金•GoldGd!PkPk
粉红•PinkPk!/ YeYe
黄•YellowYe!LmLm
柠绿•LimeLm!AqAq
水绿•AquaAq!/ LaLa
薰衣紫•LavenderLa!/ BnBn
棕•BrownBn!RoRo
玫红•RoseRo!RdRd
红•RedRd!OgOg
橙•OrangeOg!GnGn
绿•GreenGn!CyCy
青•CyanCy!BuBu
蓝•BlueBu!VnVn
藤紫•VineVn!GyGy
灰•GrayGy!/ PuPu
紫•PurplePu!WnWn
酒红•WineWn!OlOl
橄榄绿•OlivesOl!MnMn
矿青•MineralMn!/ SeSe
海蓝•SeaSe!/ BkBk
黑•BlackBk!💡 想知道以上表格的原始内容吗？
可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可
示例_单元格着色（渐变色）
单元格着色示例（自定义组合渐变色示例T1T2）T1T2! == == == RdSe!红-海蓝 双色渐变
RdSeRdSeOgVn!橙-藤紫 双色渐变
OgVnOgVnYePu!黄-紫 双色渐变
YePuYePuLmRo!柠绿-玫红 双色渐变
LmRoLmRoGnPk!绿-粉 双色渐变
GnPkGnPkAqGd!水绿-金 双色渐变
AqGdAqGdCyBn!青-棕 双色渐变
CyBnCyBnBuGy!蓝-灰 双色渐变
BuGyBuGyBkRdGnBuBn!黑-红-绿-蓝-棕 多色渐变
BkRdGnBuBnBkRdGnBuBn== == == 💡 想知道以上表格的原始内容吗？
可以通过表格右上角的内容助手，将表格内容复制为 Markdown 格式（点击时按下 Alt 或 ⌥ option ），然后粘贴到 Typora 即可
表格自动编号与题注
Markdown 粉
⬇️「文档中的表格很多，怎么才能像 Word 那样添加编号和题注呢？」VLOOK
👀T2 无须任何设置，即可自动对文档内所有「表格」进行统一的自动编号，编号举例：表 1表 2单题注
若希望为表格在自动编号之后，添加指定的题注，如：
表 1. 2020 年全球经济体 GDP 排名若没有指定题注，VLOOK™ 会自动以表格文字内容（头尾片断）作为题注。
T1!
设置表格题注：方式一（推荐）
作为题注的内容需要独占一个段落，并设置为以下格式组合：
先「斜体」，后「高亮」
对应的 Markdown 格式语法为：
*==这是题注内容==*。Tip
这种方式会在 Typora 编辑时会有可视化的提示。
快捷键
Windows：⌃ Ctrl ＋ i ，松开后 ⌃ Ctrl ＋ ⇧ Shift ＋ H
macOS： ⌘ Command ＋ i ，松开后 ⌘ Command ＋ ⇧ Shift ＋ H ： ⌘ Command ＋ i ，松开后 ⌘ Command ＋ ⇧ Shift ＋ H
设置表格题注：方式二
在表格前添加一个
6 级任间一级标题对应的 Markdown 格式语法为：
###### 这是题注内容Note
这种方式会自动启用表格的逐行自动编号特性。
快捷键
Windows：⌃ Ctrl ＋ 6
macOS： ⌘ Command ＋ 6
通过「方式一」生成的题注
列 A 列 B 列 C 列 D 列 E 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 通过「方式二」生成的题注
列 A 列 B 列 C 列 D 列 E 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容
双题注
VLOOK™ 支持双题注，第二个题注显示在表格下方，同时还支持在 Typora 编辑时预览（在导出 HTML 后正式生效）。
设置方式：
第 1 步 先参考以上的单题注的设置方式一完成；
第 2 步 在以上题注内容的最后添加第二个题注的内容，并用英文下划线符号
_包裹；对应的 Markdown 格式语法为：
*==这是第一个题注内容_这是第二个题注_==*。T2!
示例：这是第一个题注内容这是第二个题注内容
列 A 列 B 列 C 列 D 列 E 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 单元格内容 表格行自动编号
Markdown 粉
⬇️「表格有很多行，能像 Excel 一样有行号的话，那就更方便沟通和定位了……」VLOOK
👀T2 可以一键实现对表格逐行进行自动编号！通过以下两种试，都可以为表格的每一行进行自动编号：
表格前添加一个
6 级的标题（快捷键操作：⌃ Ctrl ＋ 6 ，或 ⌘ Command ＋ 6 ）在有序、无序列表下缩进的表格
示例_表格前添加 6 级标题
示例_表格前添加 6 级标题
列 A 列 B 列 C 列 D 第一行 左对齐（长内容） 居中对齐 右对齐（长内容） 第二行（长内容） 左对齐 居中对齐（长内容） 右对齐
示例_在有序、无序列表下的缩进表格
示例_在有序、无序列表下的缩进表格
列 A 列 B 列 C 列 D 第一行 左对齐（长内容） 居中对齐 右对齐（长内容） 第二行（长内容） 左对齐 居中对齐（长内容） 右对齐 表格行分组折叠
Markdown 粉
⬇️「表格行都是一维的数据，但如果表格的数据有层次关系怎么办？」VLOOK
👀T2 可以对文档（如 PRD、API 类文档）在同一个表格内，会对属于同一类或同一级的多行进行分组和折叠。对于作为下级的行，在表格行的首列通过以下规则即可实现自动分组和折叠：
使用 Markdown 的引用块的语法
>␣，即可表示该行缩进一级，其前一行即为上一级的分组多个
>表示缩进多级，如三级缩进>>>␣说明：以上的
␣符号为英文空格Important
该单元格的内容不能独立设置部分内容的格式，如：部分文字加粗、高亮、换行等。
写法如下第 2 列所示
分组分级 写法举例（注意实际应用时这列应为表格的第 1 列） 一级缩进 > 这是一级缩进 二级缩进 >> 这是二级缩进 三级缩进 >>> 这是三级缩进 T2!（更多分级以此类推）T2 == 示例 1_表格行分组折叠
生物分类 列 B 列 C 动物 > 脊椎动物 >> 哺乳动物 >>> 人类 >> 鸟类 >>> 鸡 >> 鱼类 >>> 金枪鱼 > 无脊椎动物 >> 昆虫 >>> 蝴蝶 >> 软体动物 >>> 章鱼 植物 > 被子植物 >> 双子叶植物 >>> 番茄 >> 单子叶植物 >>> 水稻 > 裸子植物 >> 松树 真菌 > 蘑菇 > 酵母 细菌 > 大肠杆菌 > 金黄色葡萄球菌 示例 2_表格行分组折叠
列 A [] 勾选列 列 B 普通行 分组 1 ? > 这是属于分组 1 的内容 1.1 Y 该行是被折叠的行 > 这是属于分组 1 的内容 1.2 该行是被折叠的行 分组 2（带格式） > 这是属于连续分组的内容 2.1 Y 该行为被折叠的行 > 这是属于连续分组的内容 2.2 该行为被折叠的行 > 这是属于连续分组的内容 2.3 ? 该行为被折叠的行 >> 这是属于二级分组 2.3 的内容 2.3.1 该行为被折叠的行 >> 这是属于二级分组 2.3 的内容 2.3.2 ? >>> 这是属于三级分组 2.3.2 的内容 2.3.2.1 Y 该行为被折叠的行 >>> 这是属于三级分组 2.3.2 的内容 2.3.2.2 该行为被折叠的行 >>>> 这是属于分组 2.3.2.2 的内容 2.3.2.1 Y 该行为被折叠的行 >>> 这是属于三级分组 2.3.2 的内容 2.3.2.3 该行为被折叠的行 > 这是属于分组 2 的内容 2.4 该行为被折叠的行 >> 这是属于二级分组 2.4 的内容 2.4.1 该行为被折叠的行 >> 这是属于二级分组 2.4 的内容 2.4.2 Y 该行为被折叠的行 > 这是属于分组 2 的内容 2.5 该行为被折叠的行 > 这是属于分组 2 的内容 2.6 该行为被折叠的行 普通行 Y 单元格内容 重复显示表头
Markdown 粉
⬇️「表格太长了，看着看着都分不清哪列是哪列了，希望能在设置重复显示表头，该怎么办？」VLOOK
👀T2 这可算是表格中的高阶应用了，现在 VLOOK™ 也可以轻松实现了～只需要在表头首列的单元格内容的开关输入表头重复标识
##␣，则该表格的表头就会自动根据预置的规则进行重复显示。说明：以上的
␣符号为英文空格预置规则：
示例_按分组重复表头
## 列 A 列 B == == 列 C : 列 B.1 列 B.2 列 B.3 : 分组 1 > 1.1 【列 2.1】的内容 1 【列 2.2】的内容 2 【列 2.3】的内容 3 普通单元格 > 1.2 【列 2.1】的内容 2 【列 2.2】的内容 2 【列 2.3】的内容 3 普通单元格 分组 2 > 2.1 【列 2.1】的内容 1 【列 2.2】的内容 2 【列 2.3】的内容 3 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 普通单元格 示例 2_按页重复表头（单行表头）
## 列 A 列 B 列 C == 列 D 单元格 1 单元格 单元格 C1 单元格 C2 单元格 D 单元格 2 单元格 单元格 C1 单元格 C2 单元格 D 单元格 3 单元格 单元格 C1 单元格 C2 单元格 4 单元格 单元格 C1 单元格 C2 单元格 5 单元格 单元格 C1 单元格 C2 单元格 6 单元格 单元格 C1 单元格 C2 单元格 7 单元格 单元格 C1 单元格 C2 单元格 8 单元格 单元格 C1 单元格 C2 单元格 9 单元格 单元格 C1 单元格 C2 单元格 10 单元格 单元格 C1 单元格 C2 单元格 11 : 单元格 C1 单元格 C2 单元格 12 : 单元格 C1 单元格 C2 单元格 13 : 单元格 C1 单元格 C2 单元格 14 单元格 单元格 C1 单元格 C2 单元格 D 单元格 15 单元格 单元格 C1 单元格 C2 : 单元格 16 单元格 单元格 C1 单元格 C2 : 单元格 17 单元格 单元格 C1 单元格 C2 : 单元格 18 单元格 单元格 C1 单元格 C2 示例 3_按页重复表头（多行表头）
## 列 A 列 B 列 C == 列 D : : 列 C.1 列 C.2 : 单元格 1 单元格 单元格 C1 单元格 C2 单元格 D 单元格 2 单元格 单元格 C1 单元格 C2 单元格 D 单元格 3 单元格 单元格 C1 单元格 C2 单元格 4 单元格 单元格 C1 单元格 C2 单元格 5 单元格 单元格 C1 单元格 C2 单元格 6 单元格 单元格 C1 单元格 C2 单元格 7 单元格 单元格 C1 单元格 C2 单元格 8 : 单元格 C1 单元格 C2 单元格 9 : 单元格 C1 单元格 C2 单元格 10 单元格 单元格 C1 单元格 C2 单元格 D 单元格 11 单元格 单元格 C1 单元格 C2 : 单元格 12 单元格 单元格 C1 单元格 C2 : 单元格 13 单元格 单元格 C1 单元格 C2 单元格 14 单元格 单元格 C1 单元格 C2 单元格 15 单元格 单元格 C1 单元格 C2 单元格 16 单元格 单元格 C1 单元格 C2 单元格 17 单元格 单元格 C1 单元格 C2 单元格 18 单元格 单元格 C1 单元格 C2 Important
重复表头会根据表头行数、表体行数情况进行自动适配；
若每「表格页」尾行刚才好有跨行合并的单元格，或为表格的最后一行，会延伸到没有合并单元格的行时才显示，或跳过不显示。
表格换行版式
会针对表格列数、屏幕大小自动选择单元格的「自动换行」或「不换行」版式。
默认均为「自动换行」的版式，以下任一情况除外：
使用小屏阅读，一般指屏幕宽度小于
1280 px表格含有「行分组折叠」，或表格列数大于
7Tip
在导出 HTML 后阅读时，可通过内容助手的表格换行版式进行手工切换
表格当前行指标器
Markdown 粉
⬇️「在编辑，或浏览表格内容时，希望能知道哪行是当前行～」VLOOK
👀T2 这个可以有，锦上添花的事不嫌多～
使用了 VLOOK™ 的主题后，在 Typora 中编辑表格，或浏览 HTML 时能自动生效；
鼠标滑过表格行时，在其左侧会通过突出的游标进行指标，便于辨识出当前行。
如果你对以上内容有更多需求或建议，欢迎随时反馈～
°图片
插图自动编号与题注
Markdown 粉
⬇️「文档中的图片很多，怎么才能像 Word 那样添加编号和题注呢？」VLOOK
👀T2 对于独占一行的图片，或强制指定显示版式为插图的，VLOOK™ 会将以其「插图1」的形式处理，如统一自动编号和题注，编号举例：图 1图 2🖼 为「图片」添加题注
按 Markdown 的语法添加图片就可以实现，如：
单题注：以上
图片标题部分即为「第 1 题注」的内容双题注：以上
可选子标题即为「第 2 题注」的内容，可选若没有指定或可用的题注内容，VLOOK™ 会自动以图片文件名作为题注。
图片题注示例，点这去看一看 ❯
🔀 为「Mermaid 图表」添加题注
添加的方式与为「表格」添加题注方式一致的 … 了解详情 ❯
若没有指定题注，VLOOK™ 会自动以 Mermaid 图表中的部分文字内容作为题注。
Mermaid 图表题注示例，点这去看一看 ❯
图片适配高分屏
Markdown 粉
⬇️「高分屏看到的图片会变得模糊，Markdown 的图片语法又不支持不同分辨率图片集，怎么办？」VLOOK
👀T2 保持 Markdown 图片语法不变的情况下，轻松在高分辨率的屏幕上显示高清分辨率的图片！在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性：
图片 URL 参数：
srcset=@2x,@3x图片不同分辨率的 URL 参数（srcset）的取值及说明
高清类型 URL 参数 完整语法参考 仅 2x srcset= 2x图片路径@2x
或 srcset=@2x仅 3x srcset= 3x图片路径@3x
或 srcset=@3x同时适配 srcset= 2x图片路径@2x,3x图片路径@3x
或 srcset=@2x,@3xImportant
如果高清图片名称是
图片@2x.png图片@3x.png这类格式，则无须填写对应的图片名，如：srcset=@2x,@3x；高清图片与标准分辨率图片若在同一目录或 URL 下，可只写文件名部分，否则须填写完整的图片 URL 。
Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
示例
Tip
没有准备高清图片，也希望不模糊？
如果临时没有图片的高清分辨率，VLOOK™ 也可以将其转换 2x 资源，这样在高分屏上也能提高图片显示清晰度（但图片大小会相应缩为原始大小的 50%）
可通过「插件调校参数」
srcset来启用这一特性。图片适配 Dark Mode
Markdown 粉
⬇️「系统开启 Dark Mode 后，图片显示得有点不太和谐，怎么办？」VLOOK
👀T2 支持指定图片在 Dark Mode 时的适配方式，目前支持反色和替换，满足不同的需求！适配方式：反色
特别适合「黑/白/灰」类型的图片
在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
URL 参数：
darksrc=invert你现在就可以试试按下键盘的 D 键，然后看看下面两个插图的变化～
Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
示例
适配方式：替换
在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
URL 参数：
普通分辨率的图片：
darksrc=xxx.jpg适配高分屏分辨率的图片（可选）：
darksrcset=...，该参数的用法适配高分屏的srcset保持一致，详见「图片适配高分屏」你现在就可以试试按下键盘的 D 键，然后看看下面两个插图的变化～
Important
若高分辨率图片资源较大，切换为 Dark Mode 后须等待指定的图片资源加载完成后才会被替换
Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
示例
图片剪影
Markdown 粉
⬇️「希望文档中的图片能自动跟随文档主题本色，或文字颜色，而不用重新制作多个版本的图片资源」VLOOK
👀T2 可以针对显示版式为 icon、logo 的图片（建议为透明背景的 png 或 svg 图片），按指定规则自动替换为指定的颜色。在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
URL 参数：
fill=颜色替换标识图片剪影的 URL 参数（fill）的标识及说明
颜色替换标识 说明 完整语法参考 text 替换为所在段落文字的颜色（会自动适配 Dark Mode 和链接的样式） 色号 替换为预置色号中的指定颜色，如： RdYe
Caution
受浏览器跨域访问的安全策略影响，使用该特性的文档建议发布到 HTTP 服务器上，同时图片路径与 HTML 路径的域名保持一致（即不允许跨域），如：
举例：HTML 文档是发布的地址为
http://<域名A>/index.html
正确的图片链接的地址示例
http://<域名A>/img/xxx.svg错误的图片链接的地址示例
http://<域名B>/img/xxx.svg满足颜色替换的图片路径引用块方式说明
浏览器 直接打开本地 HTML == 通过 HTTP 方式访问 == : [] 相对路径 [] URL 路径 [] 相对路径 [] URL 路径 Chrome / Edge Y Y Firefox Y Y Y Safari Y
（须指定默认图床地址）Y Y Y / == == ⚠️ 注意Rd! 图片路径与 HTML 路径的域名须保持一致== 对于使用 Safari 直接打开本地 HTML 的场景，要实现颜色替换的图片路径如果是相对路径的（实际是部署在指定服务器或图床上），须通过指定预置选项
vlook-image-host指定默认图床地址。示例_链接内图片
什么是
Markdown？
示例_正文图文混排
替换为文本的颜色：
替换为主题主色：
Markdown 是一种专门针对网络写作的文本标记语言。
替换为主题辅助色：
Markdown 是一种专门针对网络写作的文本标记语言。
颜色 色号 图片剪影效果示例 酒红 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!
如果你对以上内容有更多需求或建议，欢迎随时反馈～
°图片#魔法RoLmBu
VLOOK™ 经过多次迭代后，终于形成比较实用的图片快速排版方法，使用方式是通过在图片路径末尾添加 URL 锚点「#」，所以称为「#魔法RoLmBu」。
举例说明：
在 Markdown 中图片一般是这样的格式
以上图为例，「#魔法RoLmBu」是添加到
xxx.png后的带「#」的内容，可以有多个，如：#logo#right具体的应用包括缩放、特殊版式、明信片、对齐、网格背景、边缘留白等，具体内容请见后续介绍。
图片缩放
Markdown 粉
⬇️「希望可以自由设置图片的缩放大小，以适应不同尺寸图片在文档上的呈现效果」VLOOK
👀T2 Markdown 不支持对图片进行缩放，用 VLOOK™ 的#魔法就能轻松实现～在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
图片 URL +
#缩放值Tip
支持指定按宽度、按高度进行缩放，也可以同时指定
图片缩放值的说明
缩放类型 说明 完整语法参考 按绝对宽度 指定宽度（单位：px），高度会等比例变化
支持200w400w600w800w共 4 档宽度
（若指定宽度超出浏览器内显示宽度时，会自适应为100%）按绝对高度 指定高度（单位：px），宽度会等比例变化
支持200h400h600h800h共 4 档宽度Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
示例_按绝对宽度缩放图片
示例_按绝对高度缩放图片
图片显示版式
Markdown 粉
⬇️「希望统一图文混排的图标大小，以及指定图片不以「插图」形式被处理，该怎么操作呢？」VLOOK
👀T2 在 VLOOK™ 中图片是默认以「插图」或「混排」形式进行呈现，同时可在不影响 Markdown 的简洁和优雅的前提下，实现支持多种不同的显示版式。在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
图片 URL +
#版式标识图片不同显示版式的标识与说明
版式类型 版式标识 应用说明 完整语法参考 图标版式 icon 缩小为与正文高度适配的小图标
主要用于与正文内容进行混排: icon2x 缩小为与正文高度 2 倍的小图标 == == == logo 版式 logo 不调整图片大小，且不为作「插图」
主要用于展示图片的原始大小和样式: logol 在 logo基础上，支持文字环绕排版（图片左对齐）: logor 在 logo基础上，支持文字环绕排版（图片右对齐）== == == 画框版式 frame 在 logo模式上增加了边框样式: framel 在 logol模式上增加了边框样式: framer 在 logor模式上增加了边框样式Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
图片版式示例：icon
icon：
VLOOK™ 是
开源中国 推荐的国产开源项目，也许是目前最好的 Markdown 增强插件之一
icon2x：
VLOOK™ 是
开源中国 推荐的国产开源项目，也许是目前最好的 Markdown 增强插件之一
图片版式示例：logo
指定为
logo模式
对于深色的图片或图标，可配合「图片适配 Dark Mode」来自动更好适配 Dark Mode 下的显示，现在就试试按下键盘的 D 键，然后看看下图的变化～
指定为
logol模式
设置为 logol 模式后，实现图片左对齐＋文字环绕的排版效果。我来凑些字数 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。
指定为
logor模式
设置为 logor 模式后，实现图片右对齐＋文字环绕的排版效果。我来凑些字数 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 粉
⬇️「Markdown 生成的 HTML 大多是静态的，在交互性方面能带来一些更现代的设计吗？」VLOOK
👀T2 对于图片的自动化排版，VLOOK™ 现在是更上一层楼了，加上一个小魔法，单调的图片就灵动起来了～在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
当图片底部会出现一条主题色的边框，即意味正确启用了。在导出 HTML 后支持在插图索引中进行浏览和检索。
Tip
若图片是白底，希望能突出边缘，可以在以上基础追加
#border即可Markdown 标准图片语法为：
需要注意的是，卡片标题内容来自于图片中的「Title text」，而卡片正文内容来自于图片中的「Alt text」。
Tip
若需要对正文内容内容进行自定义的排版格式，可在图片下方添加一个「引用块」，该引用块的内容将代替「Alt text」
Caution
「明信片」不能与图片显示版式中的排版特性同时使用
Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
进阶玩法
如果希望能指定明信片的背景颜色T1T2，或是以分栏T1T2的方式对明信片进行更整洁的排版，只要将「明信片」放置到引用块着色内即可，还是熟悉的配方～
示例_任意普通的图片添加 Card 魔法
示例_结合引用块分栏的 Card 模式
以「自然、人类、科学、文明」RdGnSe为主题的一个不以营利为目的的社会公益性事业机构。是为公众提供科普教育的社会科技活动场所。科普旅游休闲的示范景点。
广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成，于 2008 年 9 月 26 日建成开放。
T1
T2
Ol
示例_结合引用块分栏的 Card Dual 模式
以「自然、人类、科学、文明」LmOgYe为主题的一个不以营利为目的的社会公益性事业机构。是为公众提供科普教育的社会科技活动场所。科普旅游休闲的示范景点。
广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成，于 2008 年 9 月 26 日建成开放。
Se
Ye
鹈tí鹕hú（别称塘鹅或河鸟，是鹈形目 鹈鹕 科 鹈鹕 属大型游禽，翅膀宽大，翼展较宽，扇翅有力），在蒙大拿州的药湖国家野生动物保护区上空飞行。前景中的鸟在它的喙上有一个角质的片，它在交配季节生长，当季节结束时就会脱落。
—— 摄影：KLAUS NIGGE, NAT GEO IMAGE COLLECTION
Ol
图片对齐方式
Markdown 粉
⬇️「希望可以自由设置插图的对齐式，同时保持 Markdown 的简洁性？」VLOOK
👀T2 在 Markdown 对图片千篇一律的排版的反馈中，尝试打开了一道小小的裂缝～图片对齐
可在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性（只针对插图）：
图片 URL +
#对齐方式标识图片不同对齐方式的标识与说明
对齐方式标识 说明 完整语法参考 left 左对齐（默认的对齐方式，不用指定） center 居中对齐 right 右对齐 Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
插图示例
非插图版式示例（如 logo / icon / frame 的图片版式等）
图片网格背景
Markdown 粉
⬇️「在使用工程或设计类的图片时，希望能自动添加统一的网格作为背景」VLOOK
👀T2 支持针对透明背景的图片（如 PNG、SVG 格式图片），添加指定的网格背景。在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
图片 URL +
#网格背景标识该特性会自动适配图片同时应用 Dark Mode 的情况。
图片网格背景的标识与说明
网格背景标识 说明 完整语法参考 line 添加线条风格的网格背景 block 添加方块风格的网格背景 示例_线条网格
示例 2_方块网格
图片边缘留白
Markdown 粉
⬇️「我的插图边缘没有留白，视觉上看得比较挤，可以怎么调整？」VLOOK
👀T2 在 Markdown 对图片千篇一律的排版的反馈中，叕尝试打开了一道小小的裂缝～图片四边留白
可在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性（默认给插图的四边添加
20px的留白）：
图片 URL +
#padding，示例：Note
如果对「URL 参数、URL 锚点」的使用有疑问，可以去「图片 URL 扩展应用说明」那深入再了解了解～
示例
适配一行多图
Markdown 粉
⬇️「在同一段中有多张图片时，能对图片进行自动分隔？」VLOOK
👀T2 这个可以有，这种情况下的图片与图片，包括自动换行后都能互相「保持距离」～自动适配
在同一个段落中直接连续添加多个图片，图片间不留任何字符，也不进行回车换行的情况
如：
强制适配
对于连续多个图片，如果这些图片之间有其他的元素，如被链接嵌套、空格分隔等，须使用指定为强制适配
在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现：
图片 URL +
#inline如果你对以上内容有更多需求或建议，欢迎随时反馈～
°分栏
Markdown 粉
⬇️「Markdown 只能做简单的列式编排内容，想做个看板只能用表格？」VLOOK
👀T2 当然不是，VLOOK 让你的「引用块、列表」都能瞬间获得分栏能力， 嗖嗖～只要简单的一招，就可以对引用块进行分栏，什么双栏、三栏、四栏，都不在话下，去看看引用块分栏 ❯
还是同样的配方，也可以对列表进行分栏，比引用块分栏还要多一栏呢...去看看列表分栏 ❯
列表分栏
Markdown 粉
⬇️「希望可以对长列表按分栏方式进行显示，但 Markdown 标准中好像没有这样个性的排版方式～」VLOOK
👀T2 通过对特定组合使用的 Markdown 语法进行扩展，就可以满足你的这个灵活的排版需求！主要适用于带小标题的分栏需求，排版内容适合通过列表方式进行组织，如：任务看板之类的。 语法：在需要进行分栏排版的「列表」前一段落添加指定数量的「水平分割线」
---
添加 1 条水平分割线，启用「⬛︎ ⬛︎ 双栏」模式
添加 2 条水平分割线，启用「⬛︎ ⬛︎ ⬛︎ 三栏」模式
添加 3 条水平分割线，启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ 四栏」模式
添加 4 条水平分割线，启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎ 五栏」模式
Tip
在正常添加后，会自动在水平分割线处显示对应分栏数量的提示，如「⬛︎ ⬛︎ 2 Columns of List ⬛︎ ⬛︎」
双栏引用块的 Markdown 语法示例
x1---2diff --git a/released/demo/guide.md b/released/demo/guide.md index 482ddff5..2acab704 100644 --- a/released/demo/guide.md +++ b/released/demo/guide.md @@ -482,7 +482,7 @@ VLOOK™ 通过结合 Typora 持续 **挖掘和扩展** Markdown 和 CSS 的应 > **针对「指定格式」的文本着色** > -> - 在「**加粗**、*斜体*、==高亮==、下划线、^上标^、~下标~ 等」格式的文本后，添加预置色号 +> - 在「**加粗**、*斜体*、==高亮==、下划线、^上标^、~下标~ 等」格式的文本后，添加预置色号，例如：红色 `_~Rd~_` >- 具体色号语法参考[预置色号](#预置色号) > **针对「整个段落」的文本着色** @@ -543,7 +543,7 @@ _~Gd~_这是一个段落，可以使用**预置**的 `色号` ，对整 *VLOOK`👀`*_~T2~_ 全新的[预置色号](#预置色号)支持渐变色的，写法自然直观，绝对能惊艳到你～ > - 所有规则与「[文本着色](#文本着色)」是一样的，色号由 1 个变为多个连续输入就可以了～ ->- 例如：「**红-绿**_~RdGn~_」则渐变输入 `RdGn` ，「**红-黄-绿**_~RdYeGn~_」渐变则输入 `RdYeGn` +>- 例如：「**红-绿**_~RdGn~_」则渐变输入 `_~RdGn~_` ，「**红-黄-绿**_~RdYeGn~_」渐变则输入 `_~RdYeGn~_` > - 具体色号语法参考[预置色号](#预置色号) ###### 示例_普通的段落渐变色文本
