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™

感谢打赏支持 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

图片 • 图标 • 图表


图片与图表
  • 自动编号、添加题注 ❯❯

  • 对 Mermaid 的支持 ❯❯

Vn

版式
  • 调整对齐方式 ❯❯

  • 设置以小图标方式显示 ❯❯

  • 设置为普通图片,不以插图的形式显示 ❯❯

  • 图片边缘能留白 ❯❯

  • 一行多图自动换行后样式适配 ❯❯

Vn

外观
  • 在高分屏下自动适配显示高清的版本(2x、3x) ❯❯

  • 自动适配 Dark Mode ❯❯

  • 让图标的颜色与周围的元素更搭更和谐 ❯❯

  • 为图片添加工程风的网格背景 ❯❯

Vn

分栏 • 引用块

对内容分级、分栏/看板、分类展示
  • 分栏/看板方式组织内容 ❯❯

  • 为引用块添加小标题 ❯❯

  • 将内容以分级、分类折叠的方式进行组 ❯❯

  • 适配优化 GitHub Style Alert 样式 ❯❯

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



模板主题、字体主题
  • 为不同类型的文档设置不同的「模板主题」 ❯❯

  • 为文档选择不同的「字体主题」 ❯❯

  • Dark Mode is NOW ❯❯

  • 为文档添加「封面、封底」 ❯❯

  • 更美观的公式 ❯❯

Lm

第三方集成的适配

对于主流的脚本化图表 MermaidRdRo

  • 支持插图化的题注、自动编号特性 ❯❯

  • 结合 VLOOK 针对提供更适配、更美观的样式 ❯❯

数字公式:

  • 结合 VLOOK 针对提供更适配、更美观的样式 ❯❯

Lm

不「杂」项

Lm

预置色号



/ 壹 /

以下是 VLOOK™ 的预置色号,其中大号加粗的英文为对应的色号,如:Ye Aq(支持编辑时提示或预览部分效果)

/ 贰 /

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

/ 叁 /

支持「常规」和「强调」两种风格,色号后添加英文的感叹号「!」即为强调风格,实际写法如:Ye! Aq!

VLOOK™ - Color Card 预置色号


新语法

  • 将「色号」设置为以下格式组合:

    先「斜体」,后「下标

  • 对应的 Markdown 格式语法为:_~色号~_

  • 正确设置后会以特殊的样式突出色号标识

Important

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

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

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

  1. 查找的内容中输入 \~\(((r[do]|og|ye|l[am]|g[nyd]|aq|cy|b[unk]|se|vn|p[uk]|[mw]n|ol|t[12])+(!)?)\)\~ ,并启用 正则表达式 选项

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

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

旧语法 即将废弃

语法:~(色号)~

  • 用英文括号将「色号」进行包裹,并设置为「下标」格式

Gy

°文本

文本着色

Markdown 粉⬇️文本指定不同的颜色,算是 Markdown 粉除了表格排外的第 2 高的呼声的特性了!

VLOOK👀T2 通过简洁的方式就可以轻松实现,一起来看看~


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

在「加粗斜体高亮下划线上标下标 等」格式的文本后,添加预置色号,语法如下:

语法:~(色号)~

其中,

色号:指定该标签使用的预置色号

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

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

示例_普通的段落文本着色

Gd这是一个段落,可以使用预置色号 ,对整个段落进行色号

  1. 对段落中 指定的加粗文本内容Rd通过色号组合进行标记,也支持特殊符号:RdYeGn

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

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

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

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

  1. 对段落中 指定的加粗文本内容Rd进行色号,也支持特殊符号:RdYeGn

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

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

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

T1这是一个段落,可以使用预置色号 ,对整个段落进行色号

文本着色预置色号及示例

颜色色号单色渲染效果示例
酒红 WineWn警告、危险、关键事项、删除Wn
红 RedRd警告、危险、关键事项、删除Rd
橙 OrangeOg提醒、注意、修复Og
黄 YellowYe关注、优化、备忘、说明Ye
柠绿 LimeLm提示、参考、新增Lm
绿 GreenGn提示、参考、新增Gn
矿绿 MineralMn提示、参考、新增Mn
橄榄绿 OlivesOl提示、参考、新增Ol
水绿 AquaAq引用块、公告Aq
青 CyanCy引用块、公告Cy
蓝 BlueBu信息、资讯Bu
海蓝 SeaSe信息、资讯Se
薰衣紫 LavenderLa信息、资讯La
藤紫 VineVn信息、资讯Vn
紫 PurplePu延伸、扩展、保留、备用Pu
玫红 RoseRo年轻、个性、女性Ro
粉红 PinkPk年轻、个性、女性Pk
金 GoldGdVIP、金融、工程Gd
棕 BrownBnVIP、金融、工程Bn
灰 GrayGy无效、暂缓、停用、结束Gy
黑 BlackBk黑白、高对比Bk
主题主色 Theme1T1当前 VLOOK™ 主题的主色T1
主题辅助色 Theme2T2当前 VLOOK™ 主题的辅助色T2

渐变色文本

Markdown 粉⬇️现在越来越流行渐变的文本颜色,这要是也能有就完美 💯 了!

VLOOK👀T2 全新的预置色号支持渐变色的,写法自然直观,绝对能惊艳到你~

所有规则与「文本着色」是一样的,色号由 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这是一个段落,在段落最开始位置使用预置的 色号,对整个段落进行着色。


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

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

°表格

单元格合并

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  YY:-12345
+5678.00YY Y:+5678.00
-2345678.00Y YY:-2345678.00

 

百分数「百分数」自动格式化

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

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

Bu!

示例_百分数
原始内容数值情况====== 百分数列
:[] 含小数[] 正数[] 负数[] 超三位::
79%     79%
88.88%Y   :88.88%
+38% Y  :+38%
-57.30%Y Y :-57.30%
100%    :100%

 

货币「货币」自动格式

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

  • 对货币符号(如:¥ $),或货币简写(如:CNY USD HKD等)进行左侧对齐和视觉弱化

Bn!

Important

货币符号,或货币简写与金额数值之间须以空格分隔。

示例_货币
币种原始内容数值情况====== 货币
::[] 正数[] 负数[] 含小数[] 超三位::
人民币¥ +123456.99Y YY ¥ +123456.99
:CNY 987654.99  YY:CN¥ 987654.99
:CNY 987654.99  YY:CNY 987654.99
 ==============
港元HK$ 3456.78Y YY HK$ 3456.78
:HKD 3456.78  YY:HKD 3456.78
 ==============
美元$ +555.38Y Y  $ +555.38
:USD 555    :USD 555
 ==============
澳元AU$ 56789Y  Y AU$ 56789
:AUD -56789 Y Y:AUD -5678

复选框

Markdown 粉⬇️表格的列格式,除了排版格式外,如果希望能支持复选框(勾选框)呢?

VLOOK👀T2 虽然要求有点高了,但也可以实现,将整列自动设置为「复选框」格式了!

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

说明:以上的 符号为英文空格

若要独立指定某单元格的复选框选择状态,可以这样:

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

  • 状态不确定选择:单元格的内容设置为 ?(中英文问号都支持)

Note

若单元格有更多内容,以上符号和内容间要用空格进行分隔

示例_「复选框」列格式
复选框样式筛选框列的原始内容[] 复选框列说明
无内容  默认为 未选择 的状态
非约定内容(不适用)(不适用)默认为无复选框
已选择YY指定为 已选择 的状态
:yy:
不确定选择?
当指定值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 即可

 

示例_单元格着色(渐变色)

单元格着色示例(自定义组合渐变色示例T1T2T1T2!======
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⌃ Ctrli ,松开后 ⌃ Ctrl⇧ ShiftH

macOS⌘ Commandi ,松开后 ⌘ Command⇧ ShiftH ⌘ Commandi ,松开后 ⌘ Command⇧ ShiftH

设置表格题注:方式二

  • 在表格前添加一个 6 级 任间一级标题

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

Note

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

快捷键

Windows⌃ Ctrl6

macOS⌘ Command6

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

列 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 可以一键实现对表格逐行进行自动编号!

通过以下两种试,都可以为表格的每一行进行自动编号:

  1. 表格前添加一个 6 级 的标题(快捷键操作:⌃ Ctrl6 ,或 ⌘ Command6

  2. 在有序、无序列表下缩进的表格

示例_表格前添加 6 级标题
列 A列 B列 C列 D
第一行左对齐(长内容)居中对齐右对齐(长内容)
第二行(长内容)左对齐居中对齐(长内容)右对齐

表格行分组折叠

Markdown 粉⬇️表格行都是一维的数据,但如果表格的数据有层次关系怎么办?

VLOOK👀T2 可以对文档(如 PRD、API 类文档)在同一个表格内,会对属于同一类或同一级的多行进行分组和折叠。

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

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

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

说明:以上的  符号为英文空格

Important

该单元格的内容不能独立设置部分内容的格式,如:部分文字加粗、高亮、换行等。

写法如下第 2 列所示
分组分级写法举例(注意实际应用时这列应为表格的第 1 列)
一级缩进> 这是一级缩进
二级缩进>> 这是二级缩进
三级缩进>>> 这是三级缩进
T2!更多分级以此类推)T2==

示例 1_表格行分组折叠

生物分类列 B列 C
动物  
> 脊椎动物  
>> 哺乳动物  
>>> 人类  
>> 鸟类  
>>> 鸡  
>> 鱼类  
>>> 金枪鱼  
> 无脊椎动物  
>> 昆虫  
>>> 蝴蝶  
>> 软体动物  
>>> 章鱼  
植物  
> 被子植物  
>> 双子叶植物  
>>> 番茄  
>> 单子叶植物  
>>> 水稻  
> 裸子植物  
>> 松树  
真菌  
> 蘑菇  
> 酵母  
细菌  
> 大肠杆菌  
> 金黄色葡萄球菌  
示例 2_表格行分组折叠
列 A[] 勾选列列 B
普通行  
分组 1? 
> 这是属于分组 1 的内容 1.1Y该行是被折叠的行
> 这是属于分组 1 的内容 1.2 该行是被折叠的行
分组 2(带格式)  
> 这是属于连续分组的内容 2.1Y该行为被折叠的行
> 这是属于连续分组的内容 2.2 该行为被折叠的行
> 这是属于连续分组的内容 2.3?该行为被折叠的行
>> 这是属于二级分组 2.3 的内容 2.3.1 该行为被折叠的行
>> 这是属于二级分组 2.3 的内容 2.3.2? 
>>> 这是属于三级分组 2.3.2 的内容 2.3.2.1Y该行为被折叠的行
>>> 这是属于三级分组 2.3.2 的内容 2.3.2.2 该行为被折叠的行
>>>> 这是属于分组 2.3.2.2 的内容 2.3.2.1Y该行为被折叠的行
>>> 这是属于三级分组 2.3.2 的内容 2.3.2.3 该行为被折叠的行
> 这是属于分组 2 的内容 2.4 该行为被折叠的行
>> 这是属于二级分组 2.4 的内容 2.4.1 该行为被折叠的行
>> 这是属于二级分组 2.4 的内容 2.4.2Y该行为被折叠的行
> 这是属于分组 2 的内容 2.5 该行为被折叠的行
> 这是属于分组 2 的内容 2.6 该行为被折叠的行
普通行Y单元格内容

重复显示表头

Markdown 粉⬇️表格太长了,看着看着都分不清哪列是哪列了,希望能在设置重复显示表头,该怎么办?

VLOOK👀T2 这可算是表格中的高阶应用了,现在 VLOOK™ 也可以轻松实现了~

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

说明:以上的  符号为英文空格

预置规则:

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

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

示例_按分组重复表头

## 列 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

  1. 重复表头会根据表头行数、表体行数情况进行自动适配;

  2. 若每「表格页」尾行刚才好有跨行合并的单元格,或为表格的最后一行,会延伸到没有合并单元格的行时才显示,或跳过不显示。

表格换行版式

会针对表格列数、屏幕大小自动选择单元格的「自动换行」或「不换行」版式。

默认均为「自动换行」的版式,以下任一情况除外:

  1. 使用小屏阅读,一般指屏幕宽度小于 1280 px

  2. 表格含有「行分组折叠」,或表格列数大于 7

Tip

在导出 HTML 后阅读时,可通过内容助手的表格换行版式进行手工切换

表格当前行指标器

Markdown 粉⬇️在编辑,或浏览表格内容时,希望能知道哪行是当前行~

VLOOK👀T2 这个可以有,锦上添花的事不嫌多~

  • 使用了 VLOOK™ 的主题后,在 Typora 中编辑表格,或浏览 HTML 时能自动生效;

  • 鼠标滑过表格行时,在其左侧会通过突出的游标进行指标,便于辨识出当前行。


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

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

°图片

插图自动编号与题注

Markdown 粉⬇️文档中的图片很多,怎么才能像 Word 那样添加编号和题注呢?

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


🖼 为「图片」添加题注

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

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

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

若没有指定或可用的题注内容,VLOOK™ 会自动以图片文件名作为题注。


图片题注示例,点这去看一看 ❯

🔀 为「Mermaid 图表」添加题注

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

若没有指定题注,VLOOK™ 会自动以 Mermaid 图表中的部分文字内容作为题注。


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

图片适配高分屏

Markdown 粉⬇️高分屏看到的图片会变得模糊,Markdown 的图片语法又不支持不同分辨率图片集,怎么办?

VLOOK👀T2 保持 Markdown 图片语法不变的情况下,轻松在高分辨率的屏幕上显示高清分辨率的图片!

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

  • 图片 URL 参数:srcset=@2x,@3x

图片不同分辨率的 URL 参数(srcset)的取值及说明
高清类型URL 参数完整语法参考
仅 2xsrcset=2x图片路径@2x
或 srcset=@2x
![图片题注](标准分辨率图.png?srcset=这是2x图.png@2x)
仅 3xsrcset=3x图片路径@3x
或 srcset=@3x
![图片题注](标准分辨率图.png?srcset=这是3x图.png@3x)
同时适配srcset=2x图片路径@2x,3x图片路径@3x
或 srcset=@2x,@3x
![图片题注](标准分辨率图.png?srcset=这是2x图.png@2x,这是3x图.png@3x)

Important

  1. 如果高清图片名称是 图片@2x.png 图片@3x.png 这类格式,则无须填写对应的图片名,如:srcset=@2x,@3x

  2. 高清图片与标准分辨率图片若在同一目录或 URL 下,可只写文件名部分,否则须填写完整的图片 URL 。

Note

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

示例

普通分辨率图片支持 2x 分辨率图片支持 2x, 3x 分辨率的图片

Tip

没有准备高清图片,也希望不模糊?

  • 如果临时没有图片的高清分辨率,VLOOK™ 也可以将其转换 2x 资源,这样在高分屏上也能提高图片显示清晰度(但图片大小会相应缩为原始大小的 50%)

  • 可通过「插件调校参数srcset 来启用这一特性。

图片适配 Dark Mode

Markdown 粉⬇️系统开启 Dark Mode 后,图片显示得有点不太和谐,怎么办?

VLOOK👀T2 支持指定图片在 Dark Mode 时的适配方式,目前支持反色替换,满足不同的需求!

适配方式:反色

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

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • URL 参数:darksrc=invert

你现在就可以试试按下键盘的 D 键,然后看看下面两个插图的变化~

Note

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

示例

默认不适配 Dark ModeDark Mode 时:图片反色

适配方式:替换

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

URL 参数:

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

  • 适配高分屏分辨率的图片(可选):darksrcset=... ,该参数的用法适配高分屏srcset 保持一致,详见「图片适配高分屏

你现在就可以试试按下键盘的 D 键,然后看看下面两个插图的变化~

Important

若高分辨率图片资源较大,切换为 Dark Mode 后须等待指定的图片资源加载完成后才会被替换

Note

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

示例

默认不适配 Dark Mode Dark Mode 时:替换成指定图片 Dark Mode 时:替换成指定支持多分辨图片集

图片剪影

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

VLOOK👀T2 可以针对显示版式为 icon、logo 的图片(建议为透明背景的 png 或 svg 图片),按指定规则自动替换为指定的颜色。

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • URL 参数:fill=颜色替换标识

图片剪影的 URL 参数(fill)的标识及说明

颜色替换标识说明完整语法参考
text替换为所在段落文字的颜色(会自动适配 Dark Mode 和链接的样式)![图片](xxx.png?fill=text)
色号替换为预置色号中的指定颜色,如:Rd Ye![图片](xxx.png?fill=rd)

 

Caution

受浏览器跨域访问的安全策略影响,使用该特性的文档建议发布到 HTTP 服务器上,同时图片路径与 HTML 路径的域名保持一致(即不允许跨域),如:

  • 举例:HTML 文档是发布的地址为 http://<域名A>/index.html

    • 正确的图片链接的地址示例 http://<域名A>/img/xxx.svg

    • 错误的图片链接的地址示例 http://<域名B>/img/xxx.svg

满足颜色替换的图片路径引用块方式说明

浏览器直接打开本地 HTML==通过 HTTP 方式访问==
:[] 相对路径[] URL 路径[] 相对路径[] URL 路径
Chrome / Edge  YY
FirefoxY YY
SafariY
(须指定默认图床地址)
YYY
/====⚠️注意Rd! 图片路径与 HTML 路径的域名须保持一致==

对于使用 Safari 直接打开本地 HTML 的场景,要实现颜色替换的图片路径如果是相对路径的(实际是部署在指定服务器或图床上),须通过指定预置选项 vlook-image-host 指定默认图床地址。

示例_链接内图片
示例_正文图文混排
颜色色号图片剪影效果示例
酒红 WineWnWnMarkdown Markdown 图标替换为指定颜色
红 RedRdRdMarkdown Markdown 图标替换为指定颜色
橙 OrangeOgOgMarkdown Markdown 图标替换为指定颜色
黄 YellowYeYeMarkdown Markdown 图标替换为指定颜色
柠绿 LimeLmLmMarkdown Markdown 图标替换为指定颜色
绿 GreenGnGnMarkdown Markdown 图标替换为指定颜色
矿绿 MineralMnMnMarkdown Markdown 图标替换为指定颜色
橄榄绿 OlivesOlOlMarkdown Markdown 图标替换为指定颜色
水绿 AquaAqAqMarkdown Markdown 图标替换为指定颜色
青 CyanCyCyMarkdown Markdown 图标替换为指定颜色
蓝 BlueBuBuMarkdown Markdown 图标替换为指定颜色
海蓝 SeaSeSeMarkdown Markdown 图标替换为指定颜色
薰衣紫 LavenderLaLaMarkdown Markdown 图标替换为指定颜色
藤紫 VineVnVnMarkdown Markdown 图标替换为指定颜色
紫 PurplePuPuMarkdown Markdown 图标替换为指定颜色
玫红 RoseRoRoMarkdown Markdown 图标替换为指定颜色
粉红 PinkPkPkMarkdown Markdown 图标替换为指定颜色
金 GoldGdGdMarkdown Markdown 图标替换为指定颜色
棕 BrownBnBnMarkdown Markdown 图标替换为指定颜色
灰 GrayGyGyMarkdown Markdown 图标替换为指定颜色
黑 BlackBkBkMarkdown Markdown 图标替换为指定颜色
主题主色 Theme1T1T1Markdown Markdown 图标替换为指定颜色
主题辅助色 Theme2T2T2Markdown Markdown 图标替换为指定颜色
示例_引用块着色及标题

这是 Markdown Markdown 的 6 级标题

这里是正文内容。

Pk

示例_插图(实验性)

原始颜色  颜色替换

图片对比

COMMING SOON...

VLOOK™ - Color Card 预置色号


VLOOK™ - Color Card 预置色号

Gy!

图片画廊

COMMING SOON...

Gy!


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

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

°图片#魔法RoLmBu

VLOOK™ 经过多次迭代后,终于形成比较实用的图片快速排版方法,使用方式是通过在图片路径末尾添加 URL 锚点「#」,所以称为「#魔法RoLmBu」。

举例说明:

具体的应用包括缩放、特殊版式、明信片、对齐、网格背景、边缘留白等,具体内容请见后续介绍。

图片缩放

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

VLOOK👀T2 Markdown 不支持对图片进行缩放,用 VLOOK™ 的#魔法就能轻松实现~

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • 图片 URL + #缩放值

Tip

支持指定按宽度、按高度进行缩放,也可以同时指定

图片缩放值的说明
缩放类型说明完整语法参考
按绝对宽度指定宽度(单位:px),高度会等比例变化
支持 200w 400w 600w 800w 共 4 档宽度
(若指定宽度超出浏览器内显示宽度时,会自适应为100%)
![图片](xxx.png#600w)
按绝对高度指定高度(单位:px),宽度会等比例变化
支持 200h 400h 600h 800h 共 4 档宽度
![图片](xxx.png#600h)

Note

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

示例_按绝对宽度缩放图片

等比缩放至宽度为 200px

等比缩放至宽度为 400px

等比缩放至宽度为 600px

等比缩放至宽度为 800px

示例_按绝对高度缩放图片

等比缩放至高度为 200px  等比缩放至高度为 400px  等比缩放至高度为 600px  等比缩放至高度为 800px

图片显示版式

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

VLOOK👀T2 在 VLOOK™ 中图片是默认以「插图」或「混排」形式进行呈现,同时可在不影响 Markdown 的简洁和优雅的前提下,实现支持多种不同的显示版式。

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • 图片 URL + #版式标识

图片不同显示版式的标识与说明
版式类型版式标识应用说明完整语法参考
图标版式icon缩小为与正文高度适配的小图标
主要用于与正文内容进行混排
![图片](xxx.png#icon)
:icon2x缩小为与正文高度 2 倍的小图标![图片](xxx.png#icon2x)
 ======
logo 版式logo不调整图片大小,且不为作「插图」
主要用于展示图片的原始大小和样式
![图片](xxx.png#logo)
:logollogo 基础上,支持文字环绕排版(图片对齐)![图片](xxx.png#logol)
:logorlogo 基础上,支持文字环绕排版(图片对齐)![图片](xxx.png#logor)
 ======
画框版式framelogo 模式上增加了边框样式![图片](xxx.png#frame)
:framellogol 模式上增加了边框样式![图片](xxx.png#framel)
:framerlogor 模式上增加了边框样式![图片](xxx.png#framer)

Note

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

图片版式示例:icon

指定为 logo 模式

Logo 模式


指定为 logol 模式

Logo 模式:图片左对齐+文字环绕  设置为 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 模式

Logo 模式:图片右对齐+文字环绕  设置为 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™ 规范的图片「#魔法」实现:

  • Card 模式2:图片 URL + #card

  • Card Dual 模式3:图片 URL + #cardd

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

Tip

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

Markdown 标准图片语法为:

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

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

Tip

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

Caution

「明信片」不能与图片显示版式中的排版特性同时使用

Note

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

进阶玩法

如果希望能指定明信片的背景颜色T1T2,或是以分栏T1T2的方式对明信片进行更整洁的排版,只要将「明信片」放置到引用块着色内即可,还是熟悉的配方~

示例_任意普通的图片添加 Card 魔法

熔岩和森林彼此相邻。 Lava and forest next to each other.

示例_结合引用块分栏的 Card 模式


被替换的正文内容

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

去 百度百科 看看


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

T1

桑布鲁勇士站在秋天的山脊上,周围是肯尼亚北部 975,000 英亩的 Namunyak 野生动物保护区。—— 摄影:AMI VITALE, NAT GEO IMAGE COLLECTION

T2

鹈鹕(别称塘鹅或河鸟,是鹈形目鹈鹕科鹈鹕属大型游禽,翅膀宽大,翼展较宽,扇翅有力),在蒙大拿州的药湖国家野生动物保护区上空飞行。前景中的鸟在它的喙上有一个角质的片,它在交配季节生长,当季节结束时就会脱落。—— 摄影:KLAUS NIGGE, NAT GEO IMAGE COLLECTION

Ol

示例_结合引用块分栏的 Card Dual 模式


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

去 百度百科 看看


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

Se

站在秋天的山脊上,周围是肯尼亚北部 975,000 英亩的 Namunyak 野生动物保护区。—— 摄影:AMI VITALE, NAT GEO IMAGE COLLECTION

Ye

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

—— 摄影:KLAUS NIGGE, NAT GEO IMAGE COLLECTION

Ol

图片对齐方式

Markdown 粉⬇️希望可以自由设置插图的对齐式,同时保持 Markdown 的简洁性?

VLOOK👀T2 在 Markdown 对图片千篇一律的排版的反馈中,尝试打开了一道小小的裂缝~

图片对齐

可在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性(只针对插图):

  • 图片 URL + #对齐方式标识

图片不同对齐方式的标识与说明
对齐方式标识说明完整语法参考
left左对齐(默认的对齐方式,不用指定)![图片](xxx.png#left)
center居中对齐![图片](xxx.png#center)
right右对齐![图片](xxx.png#right)

Note

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

插图示例

左对齐

居中对齐

右对齐

非插图版式示例(如 logo / icon / frame 的图片版式等)

左对齐

左对齐

左对齐

图片网格背景

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

VLOOK👀T2 支持针对透明背景的图片(如 PNG、SVG 格式图片),添加指定的网格背景。

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • 图片 URL + #网格背景标识

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

图片网格背景的标识与说明
网格背景标识说明完整语法参考
line添加线条风格的网格背景![图片](xxx.png#line)
block添加方块风格的网格背景![图片](xxx.png#block)
示例_线条网格

图片指定为线条网格背景

图片指定为线条网络背景

示例 2_方块网格

图片指定为方块网格背景

图片指定为方块网络背景

图片边缘留白

Markdown 粉⬇️我的插图边缘没有留白,视觉上看得比较挤,可以怎么调整?

VLOOK👀T2 在 Markdown 对图片千篇一律的排版的反馈中,叕尝试打开了一道小小的裂缝~

图片四边留白

可在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性(默认给插图的四边添加 20px 的留白):

  • 图片 URL + #padding ,示例:![图片题注](xxx.png#padding)

Note

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

示例

图片边缘不留白(默认)图片边缘添加留白

适配一行多图

Markdown 粉⬇️在同一段中有多张图片时,能对图片进行自动分隔?

VLOOK👀T2 这个可以有,这种情况下的图片与图片,包括自动换行后都能互相「保持距离」~


自动适配

在同一个段落中直接连续添加多个图片,图片间不留任何字符,也不进行回车换行的情况

如:![图片1](001.png)![图片2](002.png)![图片3](003.png)

强制适配

对于连续多个图片,如果这些图片之间有其他的元素,如被链接嵌套、空格分隔等,须使用指定为强制适配

在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:

  • 图片 URL + #inline


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

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

°分栏

Markdown 粉⬇️Markdown 只能做简单的列式编排内容,想做个看板只能用表格?

VLOOK👀T2 当然不是,VLOOK 让你的「引用块、列表」都能瞬间获得分栏能力, 嗖嗖~


只要简单的一招,就可以对引用块进行分栏,什么双栏、三栏、四栏,都不在话下,去看看引用块分栏 ❯

还是同样的配方,也可以对列表进行分栏,比引用块分栏还要多一栏呢...去看看列表分栏 ❯

列表分栏

Markdown 粉⬇️希望可以对长列表按分栏方式进行显示,但 Markdown 标准中好像没有这样个性的排版方式~

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

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

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

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

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

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

Tip

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

双栏引用块的 Markdown 语法示例

示例_双栏列表

示例_三栏列表


示例_四栏列表



示例_五栏列表




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


  • 列表 1

    • 这是列表项 1-1

    • 这是列表项 1-2

  • 列表 2

    1. 这是列表项 2-1

    2. 这是列表项 2-2

    3. 这是列表项 3-3

引用块分栏

Markdown 粉⬇️希望可以对引用块进行分栏方式显示,但 Markdown 标准中好像没有这样个性的排版方式~

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

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

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

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

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

Tip

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

双栏引用块的 Markdown 语法示例

示例_单行双栏引用块

双栏显示:

分栏 1

双栏显示:

分栏 2

示例_单行三栏引用块


三栏显示:

第 1 行第 1 栏

三栏显示:

第 1 行第 2 栏



三栏显示:

第 1 行第 1 栏

三栏显示:

第 1 行第 2 栏

三栏显示:

第 1 行第 3 栏

示例_单行四栏引用块



四栏显示:

第 1 行第 1 栏

按钮

Rd!

四栏显示:

第 1 行第 2 栏

按钮

Gn!

四栏显示:

第 1 行第 3 栏

按钮

Bu!

四栏显示:

第 1 行第 4 栏

按钮

Pu!

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

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



嵌套的分栏 1(非H6)

第 1 行第 1 栏

按钮

Rd!

嵌套的分栏 2(非H6)

第 1 行第 2 栏

按钮

Gn!

嵌套的分栏 3(非H6)

第 1 行第 3 栏

按钮

Bu!

嵌套的分栏 4(非H6)

第 1 行第 4 栏

按钮

Pu!

Gy


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

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

°列表

列表自动编号与着色

强制针对有序列表、无序列表的分级自动编号进行统一,并将选择的主题色应用到所有的列表符号样式。


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

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

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

      1. 三级有序列表

        1. 四级有序列表

          1. 五级有序列表

            1. 六级有序列表

T2!

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

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

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

      • 三级无序列表

        • 四级无序列表

          • 五级无序列表

            • 六极无序列表

Gd!

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

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

      1. 三级有序列表

        1. 四级有序列表

          1. 五级有序列表

            1. 六级有序列表

Tip

以上是在列表样式部分示例,在引用块着色后的更多适配示例详见这里 ❯❯

任务清单样式

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

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

任务整体进度 ?

Tip

以上是在正文的任务清单样式示例,在引用块着色后的更多适配示例详见这里 ❯❯


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

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

°引用块

引用块小标题

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

VLOOK👀T2 一般引用块内的首段内容就是小标题,所以对整段内容设置为加粗,就能自动渲染为「引用块小标题」的样式了!


语法:对引用块内首段内容设置为「粗体」即可。

示例如下,预览效果见右边的引用块:

引用块小标题示例

这里是这个引用块的小标题

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

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

Bu

引用块着色

Markdown 粉⬇️希望可以在 Markdown 文档中能拉个横幅或板子,在上面写上一些重要的事~

VLOOK👀T2 通过对 Markdown 下标语法 ~ ~ 进行了扩展,满足实用的多色彩「引用块」的排版需求!

Tip

所有未指定为引用块着色的普通引用块(普通段落,不包括列表内、引用块内的引用块),会自动转换为色号为 T1! 的引用块着色。

若须修改默认色号,或不进行自动转换,可通过「插件调校参数quote 进行指定。

语法: ~(色号)~必须在引用块内中独占一行(原则上建议在最后一行)

其中:

色号:指定该引用块使用的预置色号(除 Bk ),在被正常识别后会在色号前出现引用块着色标识「>T2

示例_正文内的标签

Wine 引用块着色 6 级标题

使用色号为:Wn ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Wn

Wine 引用块着色 6 级标题

使用色号为:Wn! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Wn!


Red 引用块着色 6 级标题

使用色号为:Rd ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Rd

Red 引用块着色 6 级标题

使用色号为:Rd! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Rd!


Orange 引用块着色 6 级标题

使用色号为:Og ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Og

Orange 引用块着色 6 级标题

使用色号为:Og! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Og!


Yellow 引用块着色 6 级标题

使用色号为:Ye ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ye

Yellow 引用块着色 6 级标题

使用色号为:Ye! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ye!


Lime 引用块着色 6 级标题

使用色号为:Lm ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Lm

Lime 引用块着色 6 级标题

使用色号为:Lm! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Lm!


Green 引用块着色 6 级标题

使用色号为:Gn ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gn

Green 引用块着色 6 级标题

使用色号为:Gn! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gn!


Mineral 引用块着色 6 级标题

使用色号为:Mn ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Mn

Mineral 引用块着色 6 级标题

使用色号为:Mn! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Mn!


Olives 引用块着色 6 级标题

使用色号为:Ol ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ol

Olives 引用块着色 6 级标题

使用色号为:Ol! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ol!


Aqua 引用块着色 6 级标题

使用色号为:Aq ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Aq

Aqua 引用块着色 6 级标题

使用色号为:Aq! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Aq!


Cyan 引用块着色 6 级标题

使用色号为:Cy ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Cy

Cyan 引用块着色 6 级标题

使用色号为:Cy! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Cy!


Blue 引用块着色 6 级标题

使用色号为:Bu ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Bu

Blue 引用块着色 6 级标题

使用色号为:Bu! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Bu!


Sea 引用块着色 6 级标题

使用色号为:Se ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Se

Sea 引用块着色 6 级标题

使用色号为:Se! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Se!


Lavender 引用块着色 6 级标题

使用色号为:La ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

La

Lavender 引用块着色 6 级标题

使用色号为:La! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

La!


Vine 引用块着色 6 级标题

使用色号为:Vn ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

Vn

Vine 引用块着色 6 级标题

使用色号为:Vn! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Vn!


Purple 引用块着色 6 级标题

使用色号为:Pu   ℹ️了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Pu

Purple 引用块着色 6 级标题

使用色号为:Pu!   ℹ️了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Pu!


Rose 引用块着色 6 级标题

使用色号为:Ro ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ro

Rose 引用块着色 6 级标题

使用色号为:Ro! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Ro!


Pink 引用块着色 6 级标题

使用色号为:Pk ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Pk

Pink 引用块着色 6 级标题

使用色号为:Pk! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Pk!


Gold 引用块着色 6 级标题

使用色号为:Gd ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gd

Gold 引用块着色 6 级标题

使用色号为:Gd! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gd!


Brown 引用块着色 6 级标题

使用色号为:Bn ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Bn

Brown 引用块着色 6 级标题

使用色号为:Bn! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Bn!


Gray 引用块着色 6 级标题

使用色号为:Gy ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gy

Gray 引用块着色 6 级标题

使用色号为:Gy! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

Gy!


Theme1 引用块着色 6 级标题

使用色号为:T1 ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

T1

Theme2 引用块着色 6 级标题

使用色号为:T1! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

T1!


Theme2 引用块着色 6 级标题

使用色号为:T2 ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

T2

Theme2 引用块着色 6 级标题

使用色号为:T2! ℹ️ 了解色号 按钮链接 ▸

更多信息
  • 这是一个任务清单项

  • 这是无序列表项

  1. 这是有序列表项

T2!

折叠引用块

Markdown 粉⬇️在编写 Markdown 文档时,对于部分内容较长的引用块内容,希望在默认时能以折叠的形式存在,需要阅读时再点击打开。

VLOOK👀T2 通过对 Markdown 「引用块」> 内的内容写法进行扩展,实现对引用块内容的动态的折叠、展开操作!

语法:> ###### title ,即在正常的引用块语法的首行内容设置为 6 级标题,即作为折叠后显示的标题

其中,

title:被折叠内容对应的标题,与折叠引子以「英文空格」进行分隔,在被正常识别后会在 6 级标题前出现折叠标识

使用了该语法后,其所在引用块内的其他内容就是被折叠的部分

示例_实际应用效果

什么是三段论?

三段论推理是演绎推理中的一种简单推理判断。它包含:



大前提

一个一般性的原则

小前提

一个附属于前面大前提的特殊化陈述

结论

由此引申出的特殊化陈述符合一般性原则的结论

什么是 MECE 法则?

MECE[[me_see]] 分析法是 Mutually Exclusive Collectively Exhaustive 的首字母缩写词,中文意思是「相互独立、完全穷尽」,即所谓的「无重复、无遗漏」。

以下是 MECE 的五种分类方法:

二分法

二分法在日常生活中比较常见,其实就是把事物分成 A 和非 A 两个部分,如「白天、黑夜」、「男人、女人」、「国内、国外」、「内部、外部」等等。

流程法

流程法就是按照事情发展的时间、流程、程序,对过程进行逐一的拆解。

举例

景泰蓝的制作可以分为七个步骤:做胎、掐丝、烧制、点蓝、烧蓝、打磨、镀金。

要素法

要素法主要用于事物由哪些要素(或部分)组成,把一个整体分成不同的构成部分;但是,在拆解要素时要保持维度的一致性,否则有可能出现有重叠和遗漏的问题。

举例

某图书馆可以按楼层这个维度来划分:一楼、二楼、三楼;也可以按功能区域来划分:信息服务区、藏书区、阅览区、公共活动区、办公区;但不能把楼层和功能区进行交叉,否则符合和MECE法则。

公式法

公式法是按照公式设计的要素进行分类,公式若成立,那么要素的分类就符合 MECE 原则。

比如:GMV=客流量×客单价

矩阵法

矩阵法就是把事物按二维矩阵进行分类或划分,例如说时间管理中常用的紧急且重要、紧急不重要、不紧急但重要、不紧急也不重要的分类方法就是典型的矩阵法。

示例对应的 Markdown 源码内容

GitHub Style Alert

Markdown 粉⬇️VLOOK™ 的主题支持 GitHub Style Alert 吗?(需 Typora1.8.2-dev 或更高版本)」

VLOOK👀T2 在自动化排版样式、交互等方面已完美适配,并支持根据浏览器语言自动适配中英文本。

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

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

Note

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

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.


以下为内嵌更丰富排版内容的示例:

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


这是引用块小标题

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是折叠引用块分栏

Note 代码块

这是文本链接 ,这是 按钮链接 ❯

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


这是引用块小标题

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是折叠引用块分栏

Tip 代码块

这是 文本链接 ,这是 按钮链接 ❯

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


这是引用块小标题

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是折叠引用块分栏

Important 代码块

这是 文本链接 ,这是 按钮链接 ❯

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


这是引用块小标题

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是折叠引用块分栏

Warning 代码块

这是 文本链接 ,这是 按钮链接 ❯

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


这是引用块小标题

  • 这是一个任务列表项

  • 这是无序列表项

  1. 这是有序列表项

这是折叠引用块分栏

Caution 代码块

这是 文本链接 ,这是 按钮链接 ❯

引用块排版细分

示例_引用块内嵌普通引用块

引用块内嵌普通引用块的样式会自动调整为「简约」的样式,具体如下:

我是引用块内嵌的普通引用块

示例_引用块内嵌引用块分栏

引用块内嵌「引用块分栏」的样式会自动调整为「突出」的样式,具体如下:


我是引用块内嵌的「引用块分栏」1

我是引用块内嵌的「引用块分栏」2

示例_列表内嵌引用块

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

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

°代码、代码块

代码块自动编号与题注

Markdown 粉⬇️文档中的代码块(代码示例、片断)很多,怎么才能像 Word 那样添加编号和题注呢?

VLOOK👀T2 无须任何设置,即可自动对文档内所有「代码块」进行统一的自动编号、高亮当前行,编号举例:代码块 1 代码块 2

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

  • 若没有指定题注,VLOOK™ 会自动以代码块内容(头尾片断)作为题注

  • 默认只对行数超过 1 行的代码块自动编号和添加题注,若希望调整该行数规则可通过「插件调校参数lmc 进行调整

示例_单行代码块
示例_多行代码块

VLOOK™ 的代码块自动编号与题注示例程序语言:PASCAL

复制代码、代码块

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

VLOOK👀T2 针对 Markdown 的代码块进行自动增强,支持高亮当前行、复制全部代码、复制为 Markdown(按住 Alt⌥ option )、适配 Dark Mode

示例_复制代码

点击 这个代码 即可复制其内容,在限时内第 2 次点击可复制为 Markdown 格式。

示例_复制代码块

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

Tip

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

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


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

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

°多媒体

音频

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

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

语法与 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 锚点」的使用有疑问,可以去「图片 URL 扩展应用说明」那深入再了解了解~

视频

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

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

语法与 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 锚点」的使用有疑问,可以去「图片 URL 扩展应用说明」那深入再了解了解~


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

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

The End


1 主要是指图片(如:jpg、png 等),以及脚本化图表(如:Mermaid 的流程图、状态机图、顺序图、甘特图、类图等)
2 鼠标在图片上悬停后显示文字
3 图片与文字同时显示