V23.0
VLOOK™<br>让你的 Markdown 有了新看wán法<br>──<br>快速参考手册 (Part.I)<br>最新版本V23.0
<br><br><br>MAX°孟兆<br>COPYRIGHT © 2016-2024. MAX°DESIGN.打赏预置色号°文本文本着色普通的段落文本着色示例在引用块内的段落文本着色示例渐变色文本普通的段落渐变色文本示例在引用块内的段落渐变色文本示例°表格单元格合并普通单元格的横向合并与纵向合并示例表头纵向与横向合并示例-1表头纵向与横向合并示例-2表格列格式基础基础列格式示例基础列格式嵌套示例基础列格式多行表头嵌套示例数值普通数字示例百分数列表格式示例复选框「复选框」列格式示例单元格着色表格自动编号与题注通过「方式二」生成的题注表格逐行自动编号表格前添加六级标题示例表格行分组折叠写法如下第 2 列所示表格行分组折叠示例重复显示表头按页重复单行表头示例按页重复多行表头示例表格换行版式表格当前行指标器°图片插图自动编号与题注图片适配高分屏图片不同分辨率的 URL 参数(srcset)的取值及说明图片适配 Dark Mode以反色适配以替换适配图片剪影链接内图片示例正文图文混排示例引用块着色及标题示例图片对比图片画廊°图片#魔法图片缩放图片缩放值的说明按绝对宽度缩放图片示例按绝对高度缩放图片示例图片显示版式图片不同显示版式的标识与说明icon 版式示例logo 版式示例指定为 logo
模式指定为 logol
模式指定为 logor
模式明信片任意普通的图片添加明信片(单卡)示例任意普通的图片添加明信片(双卡)示例结合引用块分栏的单卡示例结合引用块分栏的双卡模式示例图片对齐方式图片不同对齐方式的标识与说明插图示例非插图版式示例图片网格背景图片网格背景的标识与说明线条网格背景示例方块网格背景示例图片边缘留白适配一行多图°分栏列表分栏双栏列表示例三栏列表示例四栏列表示例五栏列表示例引用块分栏内嵌套的列表分栏示例引用块分栏单行双栏引用块示例单行三栏引用块示例单行四栏引用块示例引用块内嵌套的引用块分栏示例°列表列表自动编号与着色任务清单样式°引用块引用块小标题引用块着色正文内的标签示例折叠引用块实际应用效果示例GitHub Style Alert引用块排版细分引用块内嵌普通引用块示例引用块内嵌引用块分栏示例列表内嵌引用块示例°代码与代码块代码块自动编号与题注(方式 1)6 级标题方式添加代码块题注复制代码内容复制代码示例复制代码块示例°多媒体音频标准模式示例Mini 模式示例音频控制高级应用说明视频视频控制高级应用说明The End
若喜欢 VLOOK™ 的话,可以贡献一杯咖啡 :-)
微信支付MaxChow
Gn!
感谢打赏支持 VLOOK™ 的客官(部分名单):
*丽、一*秋、*军、*鹏、李*6、*无、H*t、*二、f*y、*宇、*琛、*辉、*秋、*笑、*豫、l*a、*心、整*9、*国、*拉、*龙、*应、*销、*哦、E*y、……
/ 壹 /
以下是 VLOOK™ 的预置色号,其中大号加粗的英文为对应的色号,如:
Ye
Aq
,(支持编辑时提示或预览部分效果)
/ 贰 /
/ 叁 /
支持「常规」和「强调」两种风格,色号后添加英文的感叹号「!」即为强调风格,实际写法如:
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
Important
该特性需要使用 VLOOK™ 主题,以及在导出配置完成 VLOOK™ 插件的配置,在导出的 HTML 中生效!
列 A | 列 B | 列 C | 列 D | 列 E | 列 F | 列 G |
---|---|---|---|---|---|---|
纵向合并 ×3 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 123 纵向合并 ×5 单元格 徽章 1 单元格 徽章 2 Rd单元格 内容 3 内容 4Gn! |
: | 纵向合并 ×2 | 横向合并 ×4 | == | == | == | : |
: | : | 普通单元格加粗 | 普通单元格徽章 | 普通单元格 | 普通单元格 | : |
普通单元格 | 纵向 合并 ×3 | 普通 单元格 斜体 | 普通单元格 | 普通单元格 | 普通单元格 | : |
普通单元格 | : | 普通单元格高亮 | 普通单元格 | 普通单元格 | 普通单元格 | : |
普通单元格 | : | 普通单元格下划线 | 普通单元格 | 普通单元格 | 普通单元格 | : |
列 A 纵向合并 ×2 | 列 B 横向合并 ×2 | == | 列 D 纵向合并 ×3 | 列 E 横向合并 ×3 | == | == |
---|---|---|---|---|---|---|
: | 二级列头 | 二级列头 | : | 这是二级列头 E1.1 | 二级列头 | 二级列头 |
普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
列 A 纵向合并 ×3 | 列 B 横向合并 ×4 | == | == | == | 列 F 纵向合并 ×3 | 列 G 纵向合并 ×3 |
---|---|---|---|---|---|---|
: | 二级列头 B1 | == | 二级列头 B2 | == | : | : |
: | 二级列头 B11 | 三级列头 B12 | 三级列头 B21 | 三级列头 B21 | : | : |
普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
Markdown 粉⬇️
「Markdown 表格如何快速设置整列的格式(加粗、高亮、斜体)?」
VLOOK👀
T2 SO EASY~ 只须在表头按以标准的 Markdown 或 GFM 的格式设置语法设置对应的格式即可实现这样的格式化。
温故一下标准 Markdown 或 GFM 的格式语法:
**加粗**
、*斜体*
、==高亮==
加粗 | 斜体 | 高亮 | |
---|---|---|---|
单元格(横向合并) | == | 单元格 | 删除线列的单元格 1 |
单元格 | 单元格 afgiklo 10 | 单元格内有加粗内容 | 删除线列的单元格 2 |
单元格 | 单元格 afgiklo 10 | 单元格内容 | 删除线列的单元格 3 |
Note
如果表格中指定列在导出 HTML 文件后不显示,可以将对应的列头设置为删除线格式,即:~~不显示的列~~
加粗 | 加粗+高亮 |
---|---|
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% |
「货币」自动格式
自动继承「普通数字」的格式
对货币符号(如:
¥
$
),或货币简写(如:CNY
USD
HKD
等)进行左侧对齐和视觉弱化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 格式语法为:
*==这是题注内容==*
Note
这种方式会在 Typora 编辑时会有可视化的提示。
Bu
设置表格题注:方式二
在表格上一段落中添加题注内容,并设置为
6 级
标题;该方式题注样式在导出 HTML 后生效
对应的 Markdown 格式语法为:
###### 这是题注内容
Warning
这种方式会自动启用表格的逐行自动编号特性。
Bn
方式一的快捷键操作
Windows:⌃ Ctrl + i ,松开后 ⌃ Ctrl + ⇧ Shift + H
macOS: ⌘ Command + i ,松开后 ⌘ Command + ⇧ Shift + H : ⌘ Command + i ,松开后 ⌘ Command + ⇧ Shift + H
Bu
方式二的快捷键操作
Windows:⌃ Ctrl + 6
macOS: ⌘ Command + 6
Bn
通过「方式一」生成的题注
列 A | 列 B | 列 C | 列 D | 列 E |
---|---|---|---|---|
单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 |
列 A | 列 B | 列 C | 列 D | 列 E |
---|---|---|---|---|
单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 |
双题注
VLOOK™ 支持双题注,第二个题注显示在表格下方,同时还支持在 Typora 编辑时预览(在导出 HTML 后正式生效)。
设置方式:
第 1 步 先参考以上的单题注的设置方式一完成;
第 2 步 在以上题注内容的最后添加第二个题注的内容,并用英文下划线符号
_
包裹;对应的 Markdown 格式语法为:
*==这是第一个题注内容_这是第二个题注_==*
。T2!
示例:这是第一个题注内容这是第二个题注内容
列 A | 列 B | 列 C | 列 D | 列 E |
---|---|---|---|---|
单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 |
单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 | 单元格内容 |
Tip
可通过「插件调校参数」capauto
来调整自动编号的适用范围
Markdown 粉⬇️
「表格有很多行,能像 Excel 一样有行号的话,那就更方便沟通和定位了……」
VLOOK👀
T2 可以一键实现对表格逐行进行自动编号!
表格前添加一个
6 级
的标题(快捷键操作:⌃ Ctrl + 6 ,或 ⌘ Command + 6 ),即可为表格的每一行进行自动编号。
列 A | 列 B | 列 C | 列 D |
---|---|---|---|
第一行 | 左对齐(长内容) | 居中对齐(It's too long, too long content) | 右对齐(长内容) |
第二行(这是在单元格内很长、很长、很长、很长、很长、很长、很长、的内容) | 左对齐 | 居中对齐 | 右对齐 |
Markdown 粉⬇️
「表格行都是一维的数据,但如果表格的数据有层次关系怎么办?」
VLOOK👀
T2 可以对文档(如 PRD、API 类文档)在同一个表格内,会对属于同一类或同一级的多行进行分组和折叠。
对于作为下级的行,在表格行的首列通过以下规则即可实现自动分组和折叠:
使用 Markdown 的引用块的语法
>␣
,即可表示该行缩进一级,其前一行即为上一级的分组多个
>
表示缩进多级,如三级缩进>>>␣
说明:以上的
␣
符号为英文空格
Important
该单元格的内容不能独立设置部分内容的格式,如:部分文字加粗、高亮、换行等。
分组分级 | 写法举例(注意实际应用时这列应为表格的第 1 列) |
---|---|
一级缩进 | > 这是一级缩进 |
二级缩进 | >> 这是二级缩进 |
三级缩进 | >>> 这是三级缩进 |
T2!(更多分级以此类推)T2 | == |
示例 1_表格行分组折叠
生物分类 | 列 B | 列 C |
---|---|---|
动物 | ||
> 脊椎动物 | ||
>> 哺乳动物 | ||
>>> 人类 | ||
>> 鸟类 | ||
>>> 鸡 | ||
>> 鱼类 | ||
>>> 金枪鱼 | ||
> 无脊椎动物 | ||
>> 昆虫 | ||
>>> 蝴蝶 | ||
>> 软体动物 | ||
>>> 章鱼 | ||
植物 | ||
> 被子植物 | ||
>> 双子叶植物 | ||
>>> 番茄 | ||
>> 单子叶植物 | ||
>>> 水稻 | ||
> 裸子植物 | ||
>> 松树 | ||
真菌 | ||
> 蘑菇 | ||
> 酵母 | ||
细菌 | ||
> 大肠杆菌 | ||
> 金黄色葡萄球菌 |
列 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 | 普通单元格 |
普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 | 普通单元格 |
## 列 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 |
## 列 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
)
表格含有「行分组折叠」,或表格列数大于 7
Tip
在导出 HTML 后,可通过内容助手的表格换行版式进行手工切换
单元格
以下情况会调整为指定的宽度:
首列:100 px
内容过长:380 px
行分组:250 px
Markdown 粉⬇️
「在编辑,或浏览表格内容时,希望能知道哪行是当前行~」
VLOOK👀
T2 这个可以有,锦上添花的事不嫌多~
使用了 VLOOK™ 的主题后,在 Typora 中编辑表格,或浏览 HTML 时能自动生效;
鼠标滑过表格行时,在其左侧会通过突出的游标进行指标,便于辨识出当前行。
Markdown 粉⬇️
「文档中的图片很多,怎么才能像 Word 那样添加编号和题注呢?」
VLOOK👀
T2 对于独占一行的图片,或强制指定显示版式为插图的,VLOOK™ 会将以其「插图1」的形式处理,如统一自动编号和题注,编号举例:图 1
图 2
🖼 为「图片」添加题注
按 Markdown 的语法添加图片就可以实现,如:
![图片标题](图片URL "可选子标题")
单题注:以上
图片标题
部分即为「第 1 题注」的内容双题注:以上
可选子标题
即为「第 2 题注」的内容,可选
注意
Bn!若没有指定题注,会自动以图片 URL 中的文件名作为题注。
Bn!
为「Mermaid 图表」添加题注
注意
Ro!若没有指定题注,会自动以图表中的部分文字作为题注。
Ro!
Tip
默认所有图片都会被视为「插图」并进行自动编码,可以通过以下方式调整:
Markdown 粉⬇️
「高分屏看到的图片会变得模糊,Markdown 的图片语法又不支持不同分辨率图片集,怎么办?」
VLOOK👀
T2 保持 Markdown 图片语法不变的情况下,轻松在高分辨率的屏幕上显示高清分辨率的图片!
在「图片 URL」中添加 VLOOK™ 规范的参数来启用这一特性:
图片 URL 参数:
srcset=@2x,@3x
高清类型 | URL 参数 | 完整语法参考 |
---|---|---|
仅 2x | srcset=2x图片路径 @2x或 srcset=@2x | ![图片题注](标准分辨率图.png?srcset=这是2x图.png@2x) |
仅 3x | srcset=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
如果高清图片名称是 图片@2x.png
图片@3x.png
这类格式,则无须填写对应的图片名,如:srcset=@2x,@3x
;
高清图片与标准分辨率图片若在同一目录或 URL 下,可只写文件名部分,否则须填写完整的图片 URL 。
Note
如果对「URL 参数、URL 锚点」的使用有疑问,可以去「图片 URL 扩展应用说明」那深入再了解了解~
Tip
没有准备高清图片,也希望不模糊?
如果临时没有图片的高清分辨率,VLOOK™ 也可以将其转换 2x 资源,这样在高分屏上也能提高图片显示清晰度(但图片大小会相应缩为原始大小的 50%)
可通过「插件调校参数」srcset
来启用这一特性
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 和链接的样式) | ![图片](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 | Y | Y | ||
Firefox | Y | Y | Y | |
Safari | Y (须指定默认图床地址) | Y | Y | Y |
/ | == | == | ⚠️注意 Rd! 图片路径与 HTML 路径的域名须保持一致 | == |
对于使用 Safari 直接打开本地 HTML 的场景,要实现颜色替换的图片路径如果是相对路径的(实际是部署在指定服务器或图床上),须通过指定预置选项
vlook-image-host
指定默认图床地址。
什么是 Markdown?
替换为文本的颜色: 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!
VLOOK™ 经过多次迭代后,终于形成比较实用的图片快速排版方法,使用方式是通过在图片路径末尾添加 URL 锚点「#」,所以称为「#魔法RoLmBu」。
举例说明:
在 Markdown 中图片一般是这样的格式 ![Alt text](xxx.png "Title text")
以上图为例,「#魔法RoLmBu」是添加到 xxx.png
后的带「#」的内容,可以有多个,如:#logo#right
具体的应用包括缩放、特殊版式、明信片、对齐、网格背景、边缘留白等,具体内容请见后续介绍。
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 扩展应用说明」那深入再了解了解~
Markdown 粉⬇️
「希望统一图文混排的图标大小,以及指定图片不以「插图」形式被处理,该怎么操作呢?」
VLOOK👀
T2 在 VLOOK™ 中图片是默认以「插图」或「混排」形式进行呈现,同时可在不影响 Markdown 的简洁和优雅的前提下,实现支持多种不同的显示版式。
在「图片 URL」中添加 VLOOK™ 规范的图片「#魔法」实现:
图片 URL +
#版式标识
版式类型 | 版式标识 | 应用说明 | 完整语法参考 |
---|---|---|---|
图标版式 | == | == | == |
标准大小 | icon | 缩小为与正文高度适配的小图标 主要用于与正文内容进行混排 | ![图片](xxx.png#icon) |
2 倍大小 | icon2x | 缩小为与正文高度 2 倍的小图标 | ![图片](xxx.png#icon2x) |
Logo 版式 | == | == | == |
标准对齐 | logo | 不调整图片大小,且不为作「插图」 主要用于展示图片的原始大小和样式 | ![图片](xxx.png#logo) |
左对齐 | logol | 在 logo 基础上,支持文字环绕排版(图片左对齐) | ![图片](xxx.png#logol) |
右对齐 | logor | 在 logo 基础上,支持文字环绕排版(图片右对齐) | ![图片](xxx.png#logor) |
画框版式 | == | == | == |
标准对齐 | frame | 在 logo 模式上增加了边框样式 | ![图片](xxx.png#frame) |
左对齐 | framel | 在 logol 模式上增加了边框样式 | ![图片](xxx.png#framel) |
右对齐 | framer | 在 logor 模式上增加了边框样式 | ![图片](xxx.png#framer) |
Note
如果对「URL 参数、URL 锚点」的使用有疑问,可以去「图片 URL 扩展应用说明」那深入再了解了解~
icon: VLOOK™ 是 开源中国 推荐的国产开源项目,也许是目前最好的 Markdown 增强插件之一
icon2x: VLOOK™ 是 开源中国 推荐的国产开源项目,也许是目前最好的 Markdown 增强插件之一
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 标准图片语法为:
![Alt text](xxx.png#card "Title text")
需要注意的是,卡片标题内容来自于图片中的「Title text」,而卡片正文内容来自于图片中的「Alt text」。
Tip
若需要对正文内容内容进行自定义的排版格式,可在图片下方添加一个「引用块」,该引用块的内容将代替「Alt text」
Caution
「明信片」不能与图片显示版式中的排版特性同时使用
Note
如果对「URL 参数、URL 锚点」的使用有疑问,可以去「图片 URL 扩展应用说明」那深入再了解了解~
进阶玩法
如果希望能指定明信片的背景颜色T1T2,或是以分栏T1T2的方式对明信片进行更整洁的排版,只要将「明信片」放置到引用块着色内即可,还是熟悉的配方~
Bk!
以「自然、人类、科学、文明」RdGnSe为主题的一个不以营利为目的的社会公益性事业机构,是为公众提供科普教育的社会科技活动场所,科普旅游休闲的示范景点。
广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成,于 2008 年 9 月 26 日建成开放。
T1
T2
Lm
以「自然、人类、科学、文明」LmOgYe为主题的一个不以营利为目的的社会公益性事业机构。是为公众提供科普教育的社会科技活动场所。科普旅游休闲的示范景点。
广东科学中心建设耗资 19 亿元人民币、历时近 5 年建成,于 2008 年 9 月 26 日建成开放。
Bu
Ye
鹈tí鹕hú(别称塘鹅或河鸟,是鹈形目 鹈鹕 科 鹈鹕 属大型游禽,翅膀宽大,翼展较宽,扇翅有力),在蒙大拿州的药湖国家野生动物保护区上空飞行。前景中的鸟在它的喙上有一个角质的片,它在交配季节生长,当季节结束时就会脱落。
—— 摄影:KLAUS NIGGE, NAT GEO IMAGE COLLECTION
Lm
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) |
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
Markdown 粉⬇️
「Markdown 只能做简单的列式编排内容,想做个看板只能用表格?」
VLOOK👀
T2 当然不是,VLOOK 让你的「引用块、列表」都能瞬间获得分栏能力, 嗖嗖~
只要简单的一招,就可以对引用块进行分栏,什么双栏、三栏、四栏,都不在话下,去看看引用块分栏 ❯
还是同样的配方,也可以对列表进行分栏,比引用块分栏还要多一栏呢...去看看列表分栏 ❯
Markdown 粉⬇️
「希望可以对长列表以分栏方式进行显示,但 Markdown 标准中好像没有支持这种实用的排版方式~」
VLOOK👀
T2 通过对特定组合使用的 Markdown 语法进行扩展,就可以满足你的这个灵活的排版需求!
主要适用于带小标题的分栏需求,排版内容适合通过列表方式进行组织,如:任务看板之类的。 语法:在需要进行分栏排版的「列表」前一段落添加指定数量的「水平分割线」
---
添加 1 条水平分割线,启用「⬛︎ ⬛︎ 双栏」模式
添加 2 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ 三栏」模式
添加 3 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ 四栏」模式
添加 4 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ ⬛︎ 五栏」模式
Tip
在正常添加后,会自动在水平分割线处显示对应分栏数量的提示,如「⬛︎ ⬛︎ 2 Columns of List ⬛︎ ⬛︎」
双栏引用块的 Markdown 语法示例
71---
2
3- 列表 1
4 - 列表项 1-1
5 - 列表项 1-2
6- 列表 2
7 - 列表项 2-1
列表 1
这是列表项 1-1
这是列表项 1-2
列表 2
这是列表项 2-1
这是列表项 2-2
这是列表项 3-3
列表 3
这是列表项 3-1
这是列表项 3-2
列表 4
这是列表项 4-1
这是列表项 4-2
列表 1
这是列表项 1-1
这是列表项 1-2
列表 2
这是列表项 2-1
这是列表项 2-2
这是列表项 2-3
列表 3
这是列表项 3-1
列表 4
这是列表项 4-1
列表 5
这是列表项 5-1
列表 1
这是列表项 1-1
这是列表项 1-2
列表 2
这是列表项 2-1
这是列表项 2-2
这是列表项 2-3
列表 3
这是列表项 3-1
列表 4
这是列表项 4-1
列表 5
这是列表项 5-1
列表 6
这是列表项 6-1
列表 1
这是列表项 1-1
这是列表项 1-2
列表 2
这是列表项 2-1
这是列表项 2-2
这是列表项 2-3
列表 3
这是列表项 3-1
列表 4
这是列表项 4-1
列表 5
这是列表项 5-1
列表 6
这是列表项 6-1
列表 7
这是列表项 7-1
列表 1
这是列表项 1-1
这是列表项 1-2
列表 2
这是列表项 2-1
这是列表项 2-2
这是列表项 3-3
Markdown 粉⬇️
「希望可以对引用块以分栏方式显示,但 Markdown 标准中好像没有支持这种实用的排版方式~」
VLOOK👀
T2 通过对特定组合使用的 Markdown 语法进行扩展,就可以满足你的这个灵活的排版需求!
主要适用于对同类内容进行分块组织,且排版内容不适合通过列表方式进行组织的情况。 语法:在需要进行分栏排版的「引用块」前一段落添加指定数量的「水平分割线」
---
添加 1 条水平分割线,启用「⬛︎ ⬛︎ 双栏」模式
添加 2 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ 三栏」模式
添加 3 条水平分割线,启用「⬛︎ ⬛︎ ⬛︎ ⬛︎ 四栏」模式
Tip
在正常添加后,会自动在水平分割线处显示对应分栏数量的提示,如「⬛︎ ⬛︎ 2 Columns of Quote ⬛︎ ⬛︎」
双栏引用块的 Markdown 语法示例
51---
2
3> 分栏 1
4
5> 分栏 2
双栏显示:
分栏 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
强制针对有序列表、无序列表的分级自动编号进行统一,并将选择的主题色应用到所有的列表符号样式。
引用块内的有序列表的自动编号
有序列表的自动编号样式:
强制设置各层级的列表符号,并应用主题色。
三级有序列表
四级有序列表
五级有序列表
六级有序列表
T2!
引用块内的无序列表的自动编号
无序列表的自动编号样式:
强制设置各层级的列表符号,并应用主题色。
三级无序列表
四级无序列表
五级无序列表
六极无序列表
Gd!
这是普通正文内有序列表的自动编号样式:
强制设置各层级的列表符号,并应用主题色。
三级有序列表
四级有序列表
五级有序列表
六级有序列表
这是普通正文内无序列表的自动编号样式:
强制设置各层级的列表符号,并应用主题色。
三级无序列表
四级无序列表
Tip
以上是在列表样式部分示例,在引用块着色后的更多适配示例详见这里 ❯❯
Markdown 粉⬇️
「默认生成的任务清单样式是浏览器标准的复选框样式,与主题和配套排版增强效果不一致~」
VLOOK👀
T2 VLOOK™ 针对这种情况做了多处样式和细节适配,从整体到细节的视觉都更和谐、一致。
任务整体进度: ?
一、分析目标市场需求 ?
调查目标客户群体 ?
制定问卷调查或面对面访谈计划
收集客户对产品或服务的需求和偏好信息
研究竞争对手 ?
分析竞争对手的产品、定价策略和市场占有率
挖掘竞争对手的优势和劣势,并与自身进行比较
二、收集市场数据 ?
查阅行业报告和数据 ?
查阅行业协会发布的行业报告和统计数据
收集行业趋势和发展预测的相关信息
分析市场趋势 ?
通过数据分析工具或软件处理市场数据
发现并解释市场趋势,以指导项目决策
Tip
以上是在正文的任务清单样式示例,在引用块着色后的更多适配示例详见这里 ❯❯
Markdown 粉⬇️
「希望在引用块内内容添加一个小标题,但直接用分级章节标题又不太合适」
VLOOK👀
T2 一般引用块内的首段内容就是小标题,所以对整段内容设置为加粗,就能自动渲染为「引用块小标题」的样式了!
语法:对引用块内首段内容设置为「粗体」即可。
示例如下,预览效果见右边的引用块:
引用块小标题示例
41> **这里是这个引用块的小标题**
2> ---
3> 这里引用块内的其他段落内容 1
4> 这里引用块内的其他段落内容 2
这里是这个引用块的小标题
这里引用块内的其他段落内容 1
这里引用块内的其他段落内容 2
Bu
Markdown 粉⬇️
「希望可以在 Markdown 文档中能拉个横幅或板子,在上面写上一些重要的事~」
VLOOK👀
T2 VLOOK™ 的预置色号又可以派上用途了,同样的配方,同样的超好用!满足实用的多色彩「引用块」的排版需求!
Tip
所有未指定为引用块着色的普通引用块(普通段落,不包括列表内、引用块内的引用块),会自动转换为色号为 T1!
的引用块着色。
若须修改默认色号,或不进行自动转换,可通过「插件调校参数」quote
进行指定。
语法:
_~色号~_
,必须在引用块内中独占一行(原则上建议在最后一行)其中:
色号
:指定该引用块使用的预置色号(除Bk
),在被正常识别后会在色号前出现引用块着色的标识
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Wn
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Wn!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Rd
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Rd!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Og
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Og!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ye
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ye!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Lm
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Lm!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gn
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gn!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Mn
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Mn!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ol
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ol!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Aq
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Aq!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Cy
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Cy!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Bu
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Bu!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Se
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Se!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
La
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
La!
引用块着色 6 级标题
更多信息
这是一个任务清单项
Vn
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Vn!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Pu
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Pu!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ro
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Ro!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Pk
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Pk!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gd
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gd!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Bn
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Bn!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gy
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
Gy!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
T1
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
T1!
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
T2
引用块着色 6 级标题
更多信息
这是一个任务清单项
这是无序列表项
这是有序列表项
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 源码内容
71> ###### 什么是三段论?
2>
3> 三段论推理是演绎推理中的一种简单推理判断。它包含:
4>
5> - **大前提**:一个一般性的原则
6> - **小前提**:一个附属于前面大前提的特殊化陈述
7> - **结论**:由此引申出的特殊化陈述符合一般性原则的结论
Markdown 粉⬇️
「VLOOK™ 的主题支持 GitHub Style Alert 吗?(需 Typora1.8.2-dev
或更高版本)」
VLOOK👀
T2 在自动化排版样式、交互等方面已完美适配,并支持根据浏览器语言自动适配中英文本。
提供了「常规、扁平、强调」多种样式风格,可通过主题的私人定制方式进行任意指定风格。
Note
Highlights information that users should take into account, even when skimming. GitHub Style Alert
Tip
Optional information to help a user be more successful. GitHub Style Alert
Important
Crucial information necessary for users to succeed. GitHub Style Alert
Warning
Critical content demanding immediate user attention due to potential risks. GitHub Style Alert
Caution
Negative potential consequences of an action. GitHub Style Alert
以下为内嵌更丰富排版内容的示例:
Note
备忘:突出用户在浏览时也应考虑的信息。
这是引用块小标题
这是一个任务列表项
这是无序列表项
这是有序列表项
这是折叠引用块分栏
Note 代码块
11/* 代码块 */ public void hello()
Tip
提示:可选信息,帮助用户取得更大成功。
这是引用块小标题
这是一个任务列表项
这是无序列表项
这是有序列表项
这是折叠引用块分栏
Tip 代码块
11/* 代码块 */ public void hello()
Important
重要的:对用户成功至关重要的信息。
这是引用块小标题
这是一个任务列表项
这是无序列表项
这是有序列表项
这是折叠引用块分栏
Important 代码块
11/* 代码块 */ public void hello()
Warning
注意:由于潜在风险,需要用户立即关注的关键内容。
这是引用块小标题
这是一个任务列表项
这是无序列表项
这是有序列表项
这是折叠引用块分栏
Warning 代码块
11/* 代码块 */ public void hello()
Caution
警告/禁止。行动的潜在负面后果。
这是引用块小标题
这是一个任务列表项
这是无序列表项
这是有序列表项
这是折叠引用块分栏
Caution 代码块
11/* 代码块 */ public void hello()
引用块内嵌普通引用块的样式会自动调整为「简约」的样式,具体如下:
我是引用块内嵌的普通引用块
引用块内嵌「引用块分栏」的样式会自动调整为「突出」的样式,具体如下:
我是引用块内嵌的「引用块分栏」1
我是引用块内嵌的「引用块分栏」2
无序或有序列表内嵌的普通引用块,会调整为「自适配宽度」样式,并且不会默认转换样式(详见插件调校参数中的 quote
),具体如下:
普通引用块 6 级标题
这是一个普通引用块的内容
无序或有序列表内嵌的「引用块着色」,会调整为「自适配宽度」样式,具体如下:
引用块着色 6 级标题
这是一个 引用块着色
主题辅助色
T2 ,使用色号为:T2
ℹ️ 了解色号T2
Markdown 粉⬇️
「文档中的代码块(代码示例、片断)很多,怎么才能像 Word 那样添加编号和题注呢?」
VLOOK👀
T2 无须任何设置,即可自动对文档内所有「代码块」进行统一的自动编号、高亮当前行,编号举例:代码块 1
代码块 2
。
支持以下三种给「代码块」添加题注的方式:
方式 1
与给「表格」添加题注的方式是一致的 … 了解详情 ❯
方式 2
没有使用第 1 种方式,则会将代码块的指定的「语言」作为题注,如:Java
C++
方式 3
若连语言也没有指定,但启用了「自动生成题注」详见插件调校参数中的 capauto
)
则会自动根据代码块的内容片断作为题注
11 ps -ef|grep zypper|grep -v ar|awk '{print $2,$3,$8,$9}'
(方式 1)斜体+高亮方式添加代码块题注最优秀的程序语言 PASCAL !不接受反驳!
41Program HelloWorld(output);
2begin
3 writeln('Hello, world!')
4end
21支持直接将代码块指定的「语言」的内容作为其题注
2可在编辑时直接编辑、预览
方式 3
11这是没有指定题注内容,也没有指定代码块「语言」时自动生成的题注
Tip
可通过「插件调校参数」capauto
来调整自动编号的适用范围
Markdown 粉⬇️
「用 Markdown 生成的文档中的代码、代码块,希望可以一键复制内容~」
VLOOK👀
T2 针对 Markdown 的代码块进行自动增强,支持高亮当前行、复制全部代码、复制为 Markdown(按住 Alt 或 ⌥ option )、适配 Dark Mode!
点击 这个代码
即可复制其内容,在限时内第 2 次点击可复制为 Markdown 格式。
VLOOK™ 的代码块示例程序语言:C++
321// ================================================== //
2// VLOOK™ 支持对长代码块进行自动折叠 //
3// ================================================== //
4/**
5 * 快速排序
6 * @param arr 排序的目标数据
7 * @param left 排序范围左值
8 * @param right 排序范围右值
9 */
10void quickSort(int arr[], int left, int right) {
11 int i = left, j = right, tmp, pivot = arr[(left + right) / 2];
12 /* partition */
13 while (i <= j) {
14 while (arr[i] < pivot)
15 i++;
16 while (arr[j]>pivot)
17 j--;
18 if (i <= j) {
19 tmp = arr[i];
20 arr[i] = arr[j];
21 arr[j] = tmp;
22 i++;
23 j--;
24 }
25 };
26 /* recursion */
27 if (left < j)
28 quickSort(arr, left, j);
29 if (i < right)
30 quickSort(arr, i, right);
31}
32// ================================================== //
Tip
建议启用 Typora 中的显示代码块行号配置,以获得更好的体验。
启用方式:「Typora ▸ 偏好设置 ▸ Markdown ▸ 代码块 ▸ 显示行号」
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
◄ 点击播放
除音频基本的控制外,同样支持 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 扩展应用说明」那深入再了解了解~