快速参考手册 (Part.I)

您所在的位置:网站首页 markdown表格合并 快速参考手册 (Part.I)

快速参考手册 (Part.I)

#快速参考手册 (Part.I)| 来源: 网络整理| 查看: 265

VLOOK™让你的 Markdown 有了新{看}(wán)法──快速参考手册(Part.I)#最新版本|V14.0#

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

VLOOK™让你的 Markdown 有了新{看}(wán)法──快速参考手册(Part.I)#最新版本|V14.0#MAX°孟兆COPYRIGHT © 2016-2022. MAX°DESIGN.打赏快速入坑快速入坑°文档排版快速入坑°内容导航快速入坑°演示与出版辅助快速入坑°主题与不杂项°文档排版°表格表格单元格合并示例 1_普通单元格的横向合并、纵向合并示例 2_表头纵向、横向合并示例 3_表头纵向、横向合并表格列格式:常规示例 1_-表格列格式:常规化示例 2_表格列格式:常规化(格式嵌套)表格列格式:数值、百分数、货币示例_普通数字示例_百分数示例_货币表格列格式:复选框示例_「复选框」列格式表格自动编号与题注通过「方式一」生成的题注表格逐行自动编号示例 1_-表格前添加 6 级标题表格行分组折叠写法如下第 2 列所示示例 1_-表格行分组折叠示例 2_表格行分组折叠表格重复显示表头示例 2_按页重复表头(单行表头)示例 3_按页重复表头(多行表头)表格当前行指标器°图片插图自动编号与题注插图对齐方式图片不同对齐方式的标识与说明插图示例非插图版式示例(如 logo / icon / frame 的图片版式等)图片适配高分屏图片不同分辨率的 URL 参数(srcset)的取值及说明示例图片适配 Dark Mode适配方式:反色示例适配方式:替换示例图片显示版式图片不同显示版式的标识与说明图片版式示例:icon图片版式示例:logo指定为 logo 模式指定为 logol 模式指定为 logor 模式一行多图适配示例_一行多图适配图片颜色替换图片颜色替换的 URL 参数(fill)的标识及说明示例_链接内图片示例_正文图文混排示例_彩虹引用及标题示例_插图(实验性)图片网格背景图片网格背景的标识与说明示例 1_-线条网格示例 2_方块网格图片边缘留白示例°列表自动编号看板列表模式 #开发中#双栏列表三栏列表四栏列表五栏列表°标签与徽章彩虹标签彩虹标签预置颜色标识及示例彩虹徽章彩虹徽章预置颜色及示例彩虹徽章预置颜色(强调)及示例°引用彩虹引用示例 1_-正文内的彩虹标签分栏引用示例_双栏引用示例_三栏引用示例_四栏引用示例_引用内嵌套的分栏引用折叠吧引用示例 1_-实际应用效果示例 1_ 对应的 Markdown 源码内容引用排版细分示例 1_引用内嵌普通引用示例 2_引用内嵌分栏引用示例 3_列表内嵌引用°MermaidMermaid 图表自动编号与题注Mermaid 样式优化与扩展Mermaid 的流程图Mermaid 的类图Mermaid 的状态图Mermaid 的顺序图°音频示例 1_-标准模式(默认)示例 2_Mini 模式音频控制高级应用说明°视频示例视频控制高级应用说明°代码块代码块自动编号与题注示例 1示例 2代码块增强示例°注音示例 1示例 2°刮刮卡示例_刮刮卡°任务列表任务列表自动编号任务组完成状态示例 1示例 2The End

打赏

若喜欢 VLOOK™ 的话,可以贡献一杯咖啡 :-)

#微信支付|MaxChow#(green!)

打赏 VLOOK™

快速入坑

VLOOK™ 通过持续 挖掘和扩展 Markdown 和 CSS,同时结合了文档的互联网化应用场景~

在 文档排版、内容导航、演示辅助、交互体验 等方面提供了 一致、简洁、友好 的体验。

快速入坑°文档排版°文档排版 ° 文档排版

有了 VLOOK™ 主题及插件的支持,让你对 Markdown 编辑器(暂只支持 Typora)的自动化排版能力有了全新的理解。

得益于成熟的 Web 浏览器、HTML / CSS、JavaScript 技术,让静态的文档也能与你一起「动」起来。

>(purple!)

[+] 表格

[+] 内容组织

自动编号、添加题注 ❯❯❯设置重复显示表头 ❯❯❯

[+] 单元格

横向 / 纵向合并单元格 ❯❯❯

[+] 行格式

给每个表格进行自动编号、添加题注 ❯❯❯给表格的每一行都进行自动编号 ❯❯❯对多个行进行分组、分类,并能自动折叠 ❯❯❯在表格中指示当前行 ❯❯❯

[+] 列格式

设置为加粗、高亮、下划线、斜体 ❯❯❯设置为数值、百分比、货币 ❯❯❯设置为复选框 ❯❯❯

>(purple)

[+] 图片、图标、插图

[+] 内容组织

自动编号、添加题注 ❯❯❯

[+] 版式

调整对齐方式 ❯❯❯设置以小图标方式显示 ❯❯❯设置为普通图片,不以插图的形式显示 ❯❯❯图片边缘能留白 ❯❯❯一行多图自动换行后样式适配 ❯❯❯

[+] 外观

在高分屏下自动适配显示高清的版本(2x、3x) ❯❯❯自动适配 Dark Mode ❯❯❯让图标的颜色与周围的元素更搭更和谐 ❯❯❯为图片添加工程风的网格背景 ❯❯❯

>(purple)

[+] 标签、徽章、引用、分栏

[+] 突出关键信息、内容

添加标签突出关键字信息 ❯❯❯将两项内容以徽章(组合)形式组织 ❯❯❯重要的引用使用突出的样式 ❯❯❯

[+] 对内容分级、分栏(卡片式)、分类展示

分栏(双栏 / 三栏 / 四栏)方式组织内容 ❯❯❯将内容以分级、分类折叠的方式进行组 ❯❯❯

[+] 引用多样化的自动排版

引用内嵌普通引用 ❯❯❯引用内嵌分栏引用 ❯❯❯列表内嵌引用 ❯❯❯

>(purple)

[+] 流程、技术类内容排版与交互

扩展优化 Mermaid 流程图、状态机图、顺序图 ❯❯❯给每个代码块进行自动编号、添加题注 ❯❯❯代码块高亮当前行、一键复制代码 ❯❯❯

>(purple)

[+] 音频、视频、注音、刮刮卡

为文档添加音频内容 ❯❯❯为文档添加视频内容 ❯❯❯给生{僻}(pì)字,或东亚小语种添加注音 ❯❯❯制作培训、猜迷互动类文档时,希望将答案先隐藏 ❯❯❯

>(purple)

[+] 任务列表

任务列表的序号,给你找回来了 ❯❯❯对于多级任务列表,「任务组完成状态」能自动识别了 ❯❯❯

>(purple)

快速入坑°内容导航°内容导航 ° 内容导航

VLOOK™ 提供了对文档章节、插图、表格、多媒体提供了多种形式的导航、快速定位和内容组织的工具,全面改善和提高发布的 HTML 文件的浏览体验和效率。

敬请你根据需要和喜好随时、轻松享用~

>(blue!)

° 导航中心

适用于按目录、分类内容索引(目录/插图/表格/多媒体/代码块)进行全文档跨章节的快速定位 ❯❯❯

>(blue)

° 逐章导航

适用于前后章节相关度高,按章节顺序一章一章进行浏览 ❯❯❯

>(blue)

° 逐段导航

适用于文档评审或演示,按段落一段一段进行聚焦式浏览 ❯❯❯

>(blue)

° 插图导航

适用于按图索骥,快速浏览文档中的插图,以及快速定位到文档中对应的位置 ❯❯❯

>(blue)

° 文库导航

适用于将相关话题、内容的文档简介、链接,通过一个独立页面进行快速浏览和跳转 ❯❯❯

>(blue)

° 脚注导航

直接在当面位置进行显示脚注,避免来回跳转 ❯❯❯

>(blue)

快速入坑°演示与出版辅助°演示与出版辅助 ° 演示与出版辅助

VLOOK™ 独创性地为 Markdown 导出的 HTML 提供了强大的演示与出版辅助工具,让 Typora + VLOOK 成为更具生产力的 Markdown 文档解决方案。

非常适合现场和远程的演示辅助工具,敬请为你的 Markdown 开启 Turbo 模式~

>(orange!)

内容助手° 复制内容

支持图片、代码、代码块内容的一键复制,并支持「复制为 Markdown 格式」 guide2.md❯❯❯

>(orange)

° 插图放大显示

支持将插图一键放大显示,及前后浏览 ❯❯❯

>(orange)

° 表格阅读模式

针对表格内容,特别是行、列关联性强的表格,快速识别纵横关联的单元格序列 ❯❯❯

>(orange)

° 画中画

插图/表格/代码块 一键开启「画中画」浮动显示,方便在文档相关内容间对比 ❯❯❯

>(orange)

>(gray!)

演示辅助° 激光笔

对文档内容进行精确指向 ❯❯❯

>(orange)

° 聚光灯

对屏幕内容的局部进行视觉聚焦 ❯❯❯

>(orange)

° 图表元素高亮

支持鼠标对 Mermaid 图元悬停高亮显示 ❯❯❯

>(orange)

>(gray!)

出版辅助° 长内容自动折叠

插图、表格、代码内容过高的情况下会自动进行折叠 ❯❯❯

>(orange)

° 章节标题自动编号

对文档内的章节标题进行自动分级编号 ❯❯❯

>(orange)

° 自定义欢迎页内容

对文档在加载过程中显示欢迎语内容 ❯❯❯

>(orange)

° 内容失效检查

对文档的图片、音频、视频、页内链接等内容进行检查并提示 ❯❯❯

>(orange)

° 链接内容识别

自动识别并提示文档内的链接类型,并针对外链进行了优化 ❯❯❯

>(orange)

° 链接内容转换

自动 md 链接、外部链接获得更好友的体验 ❯❯❯

>(orange)

° 适配打印输出

在打印前将文档的样式调整和简化,以适配打印输出的应用需要 ❯❯❯

>(orange)

>(gray!)

快速入坑°主题与不杂项°主题与不杂项 ° 主题与不杂项

「人类从来都是视觉动物,自己或他人在阅读时,让眼睛感受愉悦和美好,是一种美德、一种力量、一种信仰。」

   ———— MAX°孟兆

>(brown!)

[+] 模板主题、字体主题

为不同类型的文档设置不同的「模板主题」 ❯❯❯为文档选择不同的「字体主题」 ❯❯❯Dark Mode is NOW ❯❯❯为文档添加「封面、封底」 ❯❯❯更美观的公式 ❯❯❯

>(brown)

[+] 不「杂」项

预置插件参数,自定义你的文档表现 ❯❯❯支持 Typora 编辑时的特性增强 ❯❯❯支持跨平台、动效(如:毛玻璃)支持 emoji、国际化支持快捷键操作 ❯❯❯

>(brown)

°文档排版°表格表格单元格合并

#Markdown 粉|🤟#「Markdown 粉呼声最高的是什么?———— 表格单元格合并!」

#VLOOK|👀#(theme2) 现在可以轻松让你实现 —— Wow! Wow!~Markdown 粉们的欢呼声!!!

← 跨列合并(横向合并)

在要被合并的单元格内输入列合并标识 == 或 (theme2)

示例 1_普通单元格的横向合并、纵向合并列 A列 B列 C列 D列 E列 F列 G纵向合并 #×3#普通单元格普通单元格普通单元格普通单元格普通单元格纵向合并 #×5#:纵向合并 #×2#横向合并 #×4#======:::普通单元格普通单元格普通单元格普通单元格:普通单元格纵向并 #×3#普通单元格普通单元格普通单元格普通单元格:普通单元格:普通单元格普通单元格普通单元格普通单元格:普通单元格:普通单元格普通单元格普通单元格普通单元格:示例 2_表头纵向、横向合并列 A 纵向合并 #×2#列 B 横向合并 #×2#==列 D 纵向合并 #×3#列 E 横向合并 #×3#(theme1)

通过「方式一」生成的题注列 A列 B列 C列 D列 E单元格内容单元格内容单元格内容单元格内容单元格内容

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

列 A列 B列 C列 D列 E单元格内容单元格内容单元格内容单元格内容单元格内容

 

双题注

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

设置方式:

第一步:先参考以上的单题注的设置方式二完成;第二步:在以上题注内容的最后添加第二个题注的内容,并用下划线包裹;对应的 Markdown 格式语法为:*==这是第一个题注内容_这是第二个题注_==* 。

>(theme2)

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

列 A列 B列 C列 D列 E单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容单元格内容

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

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

表格逐行自动编号

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

#VLOOK|👀#(theme2) 可以一键实现对表格逐行进行自动编号!

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

表格前添加一个 6 级 的标题(快捷键操作:⌃ Ctrl + 6 ,或 ⌘ Command + 6 )在有序、无序列表下缩进的表格示例 1_-表格前添加 6 级标题示例 1_-表格前添加 6 级标题列 A列 B列 C列 D第一行左对齐(长内容)居中对齐右对齐(长内容)第二行(长内容)左对齐居中对齐(长内容)右对齐

示例 2_在有序、无序列表下的缩进表格

示例 2_在有序、无序列表下的缩进表格

列 A列 B列 C列 D第一行左对齐(长内容)居中对齐右对齐(长内容)第二行(长内容)左对齐居中对齐(长内容)右对齐

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

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

表格行分组折叠

#Markdown 粉|🤟#「表格行都是一维的数据,但如果表格的数据有层次关系怎么办?」

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

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

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

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

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

写法如下第 2 列所示分组分级写法举例一级缩进> 这是一级缩进二级缩进>> 这是二级缩进三级缩进>>> 这是三级缩进(以此类推) 这是属于分组 1 的内容 1.2 该行是被折叠的行该行是被折叠的行间隔了普通行   带格式的分组 2[-]  > 这是属于分组 2 的内容 2.1[x]该行为被折叠的行该行是被折叠的行,ABC 123,该行是被折叠的行,ABC 123> 这是属于分组 2 的内容 2.2 该行为被折叠的行该行是被折叠的行> 这是属于分组 2 的内容 2.3[-]该行为被折叠的行该行是被折叠的行>> 这是属于二级分组 2.3 的内容 2.3.1[x]该行为被折叠的行该行是被折叠的行>> 这是属于二级分组 2.3 的内容 2.3.2======>>> 这是属于三级分组 2.3.2 的内容 2.3.2.1[x]该行为被折叠的行该行是被折叠的行> 这是属于分组 2 的内容 2.4 该行为被折叠的行该行是被折叠的行普通行   空白内容的分组 3   >    数据项 1数据项 A>    数据项 2数据项 B>    数据项 3数据项 C示例 2_表格行分组折叠列 A[ ] 勾选列列 B普通行  分组 1[-] > 这是属于分组 1 的内容 1.1[x]该行是被折叠的行> 这是属于分组 1 的内容 1.2 该行是被折叠的行连续分组[-] > 这是属于连续分组的内容 2.1[x]该行为被折叠的行> 这是属于连续分组的内容 2.2 该行为被折叠的行> 这是属于连续分组的内容 2.3[-]该行为被折叠的行>> 这是属于二级分组 2.3 的内容 2.3.1 该行为被折叠的行>> 这是属于二级分组 2.3 的内容 2.3.2[-] >>> 这是属于三级分组 2.3.2 的内容 2.3.2.1[x]该行为被折叠的行>>> 这是属于三级分组 2.3.2 的内容 2.3.2.2 该行为被折叠的行>>> 这是属于三级分组 2.3.2 的内容 2.3.2.3 该行为被折叠的行>>> 这是属于三级分组 2.3.2 的内容 2.3.2.4[x]该行为被折叠的行>>>> 这是属于分组 2.3.2.4 的内容 2.3.4.1[x]该行为被折叠的行>>> 这是属于三级分组 2.3.2 的内容 2.3.2.5 该行为被折叠的行> 这是属于分组 2 的内容 2.4 该行为被折叠的行>> 这是属于二级分组 2.4 的内容 2.4.1 该行为被折叠的行>> 这是属于二级分组 2.4 的内容 2.4.2[x]该行为被折叠的行> 这是属于分组 2 的内容 2.5 该行为被折叠的行> 这是属于分组 2 的内容 2.6 该行为被折叠的行> 这是属于分组 2 的内容 2.7 该行为被折叠的行> 这是属于分组 2 的内容 2.8 该行为被折叠的行> 这是属于分组 2 的内容 2.9 该行为被折叠的行普通行[x]单元格内容

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

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

表格重复显示表头

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

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

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

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

预置规则:

对于没有「行分组」的表格,自动以「表格页」为单位进行重复显示(每表格页为 15 行)对于带「行分组」的表格,默认在行分组展开后在分组行上显示对应的列头(前提是对应的单元格无内容),收起后则自动隐藏

示例 1_-按分组重复表头

## 列 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 ⚠️ 注意重复表头会根据表头行数、表体行数情况进行自动适配;若每「表格页」尾行刚才好有跨行合并的单元格,或为表格的最后一行,会延伸到没有合并单元格的行时才显示,或跳过不显示。

>(red)

表格当前行指标器

#Markdown 粉|🤟#「在编辑,或浏览表格内容时,希望能知道哪行是当前行~」

#VLOOK|👀#(theme2) 这个可以有,锦上添花的事不嫌多~

使用了 VLOOK™ 的主题后,在 Typora 中编辑表格,或浏览 HTML 时能自动生效;鼠标滑过表格行时,在其左侧会通过突出的游标进行指标,便于辨识出当前行。

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

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

°图片插图自动编号与题注

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

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

🖼 为「图片」添加题注

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

单题注:以上 图片标题 即为「上题注」的内容,如:![这是图片的上题注](图片URL)双题注:以上 可选子标题 即为「下题注」的内容,如:![这是图片的上题注](图片URL "这是图片的下题注") 。

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

#⚠️|注意#(red!) 以上语法中的「可选子标题」与「图片URL」间须以「英文空格」进行分隔

示例:图片题注,去看一看 ❯

🔀 为「Mermaid 图表」添加题注

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

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

示例:Mermaid 题注,去看一看 ❯

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

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

插图对齐方式

#Markdown 粉|🤟#「希望可以自由设置插图的对齐式,同时保持 Markdown 的简洁性?」

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

图片对齐

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

(方式一)URL 参数:align=对齐方式标识(方式二)URL 锚点:#对齐方式标识图片不同对齐方式的标识与说明对齐方式标识说明完整语法参考left左对齐(默认的对齐方式,不用指定)![图片](xxx.png?align=left)或 ![图片](xxx.png#left)center居中对齐![图片](xxx.png?align=center)或 ![图片](xxx.png#center)right右对齐![图片](xxx.png?align=right)或 ![图片](xxx.png#right)

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

插图示例

左对齐

居中对齐

右对齐

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

左对齐

左对齐

左对齐

ℹ️ 关于「图片版式」的更多信息,点击这里了解 ❯❯❯

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

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

图片适配高分屏

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

#VLOOK|👀#(theme2) 保持 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)

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

#💡|Tips 2#(orange) 高清图片与标准分辨率图片若在同一目录或 URL 下,可只写文件名部分,否则须填写完整的图片 URL

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

示例

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

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

如果临时没有图片的高清分辨率,VLOOK™ 也可以将其转换 2x 资源,这样在高分屏上也能提高图片显示清晰度(但图片大小会相应缩为原始大小的 50%)可通过「插件调校参数」srcset 来启用这一特性。

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

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

图片适配 Dark Mode

#Markdown 粉|🤟#「系统开启 Dark Mode 后,图片显示得有点不太和谐,怎么办?」

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

适配方式:反色

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

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

URL 参数:darksrc=invert

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

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

示例

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

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

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

适配方式:替换

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

URL 参数:

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

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

 

#⚠️|注意#(red!) 若高分辨率图片资源较大,切换为 Dark Mode 后须等待指定的图片资源加载完成后才会被替换

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

示例

默认不适配 Dark Mode  Dark Mode 时:替换成指定图片

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

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

图片显示版式

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

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

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

(方式一)URL 参数:mode=版式标识(方式二)URL 锚点:#版式标识图片不同显示版式的标识与说明版式类型版式标识应用说明完整语法参考图标版式icon缩小为与单行正文高度适配的小图标主要用于与正文内容进行混排![图片](xxx.png?mode=icon)或 ![图片](xxx.png#icon):icon2x比 icon 尺寸增大 60%![图片](xxx.png?mode=icon2x)或 ![图片](xxx.png#icon2x) ======logo 版式logo不调整图片大小,且不为作「插图」主要用于展示图片的原始大小和样式![图片](xxx.png?mode=logo)或 ![图片](xxx.png#logo):logol在 logo 基础上,支持文字环绕排版(图片左对齐)![图片](xxx.png?mode=logol)或 ![图片](xxx.png#logol):logor在 logo 基础上,支持文字环绕排版(图片右对齐)![图片](xxx.png?mode=logor)或 ![图片](xxx.png#logor) ======画框版式frame与 logo 模式类似,但增加了边框![图片](xxx.png?mode=frame)或 ![图片](xxx.png#frame):framel在 frame 基础上,支持文字环绕排版(图片左对齐)![图片](xxx.png?mode=framel)或 ![图片](xxx.png#frame):framer在 frame 基础上,支持文字环绕排版(图片右对齐)![图片](xxx.png?mode=framer)或 ![图片](xxx.png#framer) ======插图版式figure强制指定为插图,主要用于一行多图的情况,对于独占一行的图片默认为插图,无须指定![图片](xxx.png?mode=figure)或 ![图片](xxx.png#figure)

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

图片版式示例:iconVLOOK VLOOK™ 是 OSChina 开源中国 推荐的国产开源项目,也许是目前最好的 Markdown 增强插件之一VLOOK VLOOK™ 是 OSChina 开源中国 推荐的国产开源项目,也许是目前最好的 Markdown 增强插件之一图片版式示例:logo指定为 logo 模式对于深色的图片或图标,可配合「图片适配 Dark Mode」来自动更好适配 Dark Mode 下的显示,现在就试试按下键盘的 D 键,然后看看下图的变化~

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。

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

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

一行多图适配

#Markdown 粉|🤟#「在指定图片版式为 logo / frame 等情况,在一行内编排多个图片后,自动换行后两行图片间没有间隔,怎么办?」

#VLOOK|👀#(theme2) 这个可以有,相关图片可以添加针对多组内容自动换行后的适配样式~

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

URL 参数:inline=true ,示例:![图片题注](xxx.png?inline=true)URL 锚点:#inline ,示例:![图片题注](xxx.png#inline)

(暂不支持「插图」的应用场景)

示例_一行多图适配

该示例效果可通过这里查看 ❯❯❯

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

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

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

图片颜色替换

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

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

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

URL 参数:fill=颜色替换标识图片颜色替换的 URL 参数(fill)的标识及说明颜色替换标识说明完整语法参考text替换为所在段落文字的颜色(会自动适配 Dark Mode 和链接的样式)![图片](xxx.png?fill=text)theme1替换为主题的主色![图片](xxx.png?fill=theme1)theme2替换为主题的辅助色![图片](xxx.png?fill=theme2)示例_链接内图片什么是 Markdown Markdown?示例_正文图文混排替换为文本的颜色:Markdown Markdown 是一种专门针对网络写作的文本标记语言。替换为主题的主色:Markdown Markdown 是一种专门针对网络写作的文本标记语言。替换为主题的辅助色:Markdown Markdown 是一种专门针对网络写作的文本标记语言。示例_彩虹引用及标题这是MarkdownMarkdown 的 6 级标题

这里是正文内容。

>(pink)

示例_插图(实验性)

原始颜色  颜色替换

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

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

图片网格背景

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

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

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

参数:grid=网格背景标识

该特性自动适配 Dark Mode 的应用场景。

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

图片指定为线条网格背景

图片指定为线条网络背景

示例 2_方块网格

图片指定为方块网格背景

图片指定为方块网络背景 

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

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

图片边缘留白

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

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

图片四边留白

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

URL 参数:padding=true ,示例:![图片题注](xxx.png?padding=true)URL 锚点:#padding ,示例:![图片题注](xxx.png#padding)

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

示例

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

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

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

°列表自动编号

针对有序列表、无序列表进行以下样式统一和定制:

强制设置各层级的列表符号;列表符号应用主题色。看板列表模式 #开发中#双栏列表

列表 1

这是列表项 1-1这是列表项 1-2

列表 2

这是列表项 2-1这是列表项 2-2这是列表项 3-3

列表 3

这是列表项 3-1

 

三栏列表

列表 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°标签与徽章

#Markdown 粉|🤟#「用 Markdown 写文档,想通过「标签」或「徽章」突出或组织相关性较强的内容,这个想法会不会不现实呢?」

#VLOOK|👀#(theme2) 对 Markdown 行内代码(Code)语法 ` ` 进行了扩展,满足实用的「标签」和「徽章」排的版需求!同时还支持一键复制内容、复制为 Markdown(点击并按住 Alt 或 ⌥ option )。

例如:可以这样 #标签#(orange) ,还可以这样 #这是徽章标题|这是徽章内容#(pink) ,继续往下看看就知道这是怎么做到的~

彩虹标签

语法:`#标签#(颜色)`

其中,

标签:徽章内容,前后由 # 符号包裹

颜色:可选。指定标签显示对应的预置颜色标识,不指定则默认为 theme1

 

#💡|小提示#(orange!) 若须修改默认颜色标识,可通过「插件调校参数」dc-tag 指定。

彩虹标签预置颜色标识及示例预置颜色标识语法示例应用场景建议渲染效果red`#标签 red#(red)`警告、危险、关键事项、删除#标签 red#(red)orange`#标签 orange#(orange)`提醒、注意、修复#标签 orange#(orange)yellow`#标签 yellow#(yellow)`关注、优化、备忘、说明#标签 yellow#(yellow)lime`#标签 lime#(lime)`提示、参考、新增#标签 lime#(lime)green`#标签 green#(green)`:#标签 green#(green)aqua`#标签 aqua#(aqua)`引用、公告#标签 aqua#(aqua)cyan`#标签 cyan#(cyan)`:#标签 cyan#(cyan)blue`#标签 blue#(blue)`信息、资讯#标签 blue#(blue)sea`#标签 sea#(sea)`:#标签 sea#(sea)steel`#标签 steel#(steel)`:#标签 steel#(steel)purple`#标签 purple#(purple)`延伸、扩展、保留、备用#标签 purple#(purple)rose`#标签 rose#(rose)`年轻、个性、女性#标签 rose#(rose)pink`#标签 pink#(pink)`:#标签 pink#(pink)gold`#标签 gold#(gold)`稳定、金融、工程#标签 gold#(gold)brown`#标签 brown#(brown)`:#标签 brown#(brown)gray`#标签 gray#(gray)`无效、暂缓、停用、结束#标签 gray#(gray)black`#标签 black#(black)`黑白、高对比#标签 black#(black)theme1`#标签 theme1#(theme1)`使用当前 VLOOK™ 主题的主色#标签 theme1#(theme1)theme2`#标签 theme2#(theme2)`使用当前 VLOOK™ 主题的辅助色#标签 theme2#(theme2)

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

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

彩虹徽章

语法:`#徽章标题|徽章内容#(颜色)`

与彩虹标签名语法基本一致,徽章标题与内容由 # 包裹,并以英文竖线符号 | 作为分隔。其中,

徽章标题:为徽章标题

徽章内容:为徽章内容。内容支持识别变量格式 {{变量}} %变量% $变量$ ${变量} #{变量} var(变量) ,对这些内容以 突出的样式显示

颜色:可选。指定标签显示对应的预置颜色标识,不指定则默认为 (gray) 。颜色标识后添加 ! 则使用强调样式

 

#💡|小提示#(orange!) 若须修改默认颜色标识,可通过「插件调校参数」dc-badge 指定。

彩虹徽章预置颜色及示例预置颜色标识语法示例应用场景建议渲染效果red`#徽章标题|徽章内容 {{变量标识 1}}#(red)`警告、危险、关键事项、删除#徽章标题|徽章内容 {{变量标识 1}}#(red)orange`#徽章标题|徽章内容 %变量标识 2%#(orange)`提醒、注意、修复#徽章标题|徽章内容 %变量标识 2%#(orange)yellow`#徽章标题|徽章内容 $变量标识 3$#(yellow)`关注、优化、备忘、说明#徽章标题|徽章内容 $变量标识 3$#(yellow)lime`#徽章标题|徽章内容 ${变量标识 4}#(lime)`提示、备忘、参考、新增#徽章标题|徽章内容 ${变量标识 4}#(lime)green`#徽章标题|徽章内容 #{变量标识 5}#(green)`:#徽章标题|徽章内容 #{变量标识 5}#(green)aqua`#徽章标题|徽章内容 var(变量标识 6)#(aqua)`引用、公告#徽章标题|徽章内容 var(变量标识 6)#(aqua)cyan`#徽章标题|徽章内容 {{变量标识 1}}#(cyan)`:#徽章标题|徽章内容 {{变量标识 1}}#(cyan)blue`#徽章标题|徽章内容 {{变量标识 1}}#(blue)`信息、资讯#徽章标题|徽章内容 {{变量标识 1}}#(blue)sea`#徽章标题|徽章内容 {{变量标识 1}}#(sea)`:#徽章标题|徽章内容 {{变量标识 1}}#(sea)steel`#徽章标题|徽章内容 {{变量标识 1}}#(steel)`:#徽章标题|徽章内容 {{变量标识 1}}#(steel)purple`#徽章标题|徽章内容 {{变量标识 1}}#(purple)`延伸、扩展、保留、备用#徽章标题|徽章内容 {{变量标识 1}}#(purple)rose`#徽章标题|徽章内容 {{变量标识 1}}#(rose)`年轻、个性、女性#徽章标题|徽章内容 {{变量标识 1}}#(rose)pink`#徽章标题|徽章内容 {{变量标识 1}}#(pink)`:#徽章标题|徽章内容 {{变量标识 1}}#(pink)gold`#徽章标题|徽章内容 {{变量标识 1}}#(gold)`稳定、金融、工程#徽章标题|徽章内容 {{变量标识 1}}#(gold)brown`#徽章标题|徽章内容 {{变量标识 1}}#(brown)`:#徽章标题|徽章内容 {{变量标识 1}}#(brown)gray`#徽章标题|徽章内容 {{变量标识 1}}#(gray)`常规、无效、暂缓、停用#徽章标题|徽章内容 {{变量标识 1}}#(gray)black`#徽章标题|徽章内容 {{变量标识 1}}#(black)`黑白、高对比#徽章标题|徽章内容 {{变量标识 1}}#(black)theme1`#徽章标题|徽章内容 {{变量标识 1}}#(theme1)`当前 VLOOK™ 主题的主色#徽章标题|徽章内容 {{变量标识 1}}#(theme1)theme2`#徽章标题|徽章内容 {{变量标识 1}}#(theme2)`当前 VLOOK™ 主题的辅助色#徽章标题|徽章内容 {{变量标识 1}}#(theme2)彩虹徽章预置颜色(强调)及示例预置颜色标识语法示例应用场景建议渲染效果red!`#徽章标题|强调样式#(red!)`警告、危险、关键事项、删除#徽章标题|强调样式#(red!)orange!`#徽章标题|强调样式#(orange!)`提醒、注意、修复#徽章标题|强调样式#(orange!)yellow!`#徽章标题|强调样式#(yellow!)`关注、优化、备忘、说明#徽章标题|强调样式#(yellow!)lime!`#徽章标题|强调样式#(lime!)`提示、备忘、参考、新增#徽章标题|强调样式#(lime!)green!`#徽章标题|强调样式#(green!)`:#徽章标题|强调样式#(green!)aqua!`#徽章标题|强调样式#(aqua!)`引用、公告#徽章标题|强调样式#(aqua!)cyan!`#徽章标题|强调样式#(cyan!)`:#徽章标题|强调样式#(cyan!)blue!`#徽章标题|强调样式#(blue!)`信息、资讯#徽章标题|强调样式#(blue!)sea!`#徽章标题|强调样式#(sea!)`:#徽章标题|强调样式#(sea!)steel!`#徽章标题|强调样式#(steel!)`:#徽章标题|强调样式#(steel!)purple!`#徽章标题|强调样式#(purple!!)`延伸、扩展、保留、备用#徽章标题|强调样式#(purple!)rose`#徽章标题|强调样式#(rose!)`年轻、个性、女性#徽章标题|强调样式#(rose!)pink!`#徽章标题|强调样式#(pink!)`:#徽章标题|强调样式#(pink!)gold!`#徽章标题|强调样式#(gold!)`稳定、金融、工程#徽章标题|强调样式#(gold!)brown!`#徽章标题|强调样式#(brown!)`:#徽章标题|强调样式#(brown!)gray!`#徽章标题|强调样式#(gray!)`常规、无效、暂缓、停用#徽章标题|强调样式#(gray!)black!`#徽章标题|强调样式#(black!)`黑白、高对比#徽章标题|强调样式#(black!)theme1!`#徽章标题|强调样式#(theme1!)`当前 VLOOK™ 主题的主色#徽章标题|强调样式#(theme1!)theme2!`#徽章标题|强调样式#(theme2!)`当前 VLOOK™ 主题的辅助色#徽章标题|强调样式#(theme2!)

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

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

°引用彩虹引用

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

#VLOOK|👀#(theme2) 通过对 Markdown 行内代码(Code)语法 ` ` 进行了扩展,满足实用的多色彩「引用」的排版需求!

#💡|小提示#(orange!) 所有未指定为彩虹引用的普通引用(普通段落,不包括列表内、引用内的引用),会自动转换为颜色标识为 theme1! 的彩虹引用。若须修改默认颜色标识,可通过「插件调校参数」dc-quote 指定。

语法: `>(color)` ,须添加到引用中,具体位置不限(如:首行、末尾均可)

其中:

color:指定标签显示对应的预置颜色标识,预置颜色标识与「彩虹标签」的颜色标识基本保持一致(除 black)。同时,颜色标识支持添加 ! 启用强调样式。

示例 1_-正文内的彩虹标签red 彩虹引用 6 级标题

颜色标识为:red ℹ️ 了解颜色标识 了解更多

[+] 更多信息

1/* 这是代码块 */

这是一个 #彩虹引用|红色#(red)

>(red)

red 彩虹引用 6 级标题

颜色标识为:red! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|红色强调#(red!)

>(red!)

orange 彩虹引用 6 级标题

颜色标识为:orange ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|橙色#(orange)

>(orange)

orange 彩虹引用 6 级标题

颜色标识为:orange! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|橙色强调#(orange!)

>(orange!)

yellow 彩虹引用 6 级标题

颜色标识为:yellow ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|黄色#(yellow)

>(yellow)

yellow 彩虹引用 6 级标题

颜色标识为:yellow! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|黄色强调#(yellow!)

>(yellow!)

lime 彩虹引用 6 级标题

颜色标识为:lime ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|草绿色#(lime)

>(lime)

lime 彩虹引用 6 级标题

颜色标识为:lime! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|草绿色强调#(lime!)

>(lime!)

green 彩虹引用 6 级标题

颜色标识为:green ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|绿色#(green)

>(green)

green 彩虹引用 6 级标题

颜色标识为:green! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|绿色强调#(green!)

>(green!)

aqua 彩虹引用 6 级标题

颜色标识为:aqua ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|青绿色#(aqua)

>(aqua)

aqua 彩虹引用 6 级标题

颜色标识为:aqua! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|青绿色强调#(aqua!)

>(aqua!)

cyan 彩虹引用 6 级标题

颜色标识为:cyan ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|青色#(cyan)

>(cyan)

cyan 彩虹引用 6 级标题

颜色标识为:cyan! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|青色强调#(cyan!)

>(cyan!)

blue 彩虹引用 6 级标题

颜色标识为:blue ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|蓝色#(blue)

>(blue)

blue 彩虹引用 6 级标题

颜色标识为:blue! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|蓝色强调#(blue!)

>(blue!)

sea 彩虹引用 6 级标题

颜色标识为:sea ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|海蓝色#(sea)

>(sea)

sea 彩虹引用 6 级标题

颜色标识为:sea! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|海蓝色强调#(sea!)

>(sea!)

sea 彩虹引用 6 级标题

颜色标识为:steel ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|钢青色#(steel)

>(steel)

sea 彩虹引用 6 级标题

颜色标识为:steel! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|钢青色强调#(steel!)

>(steel!)

purple 彩虹引用 6 级标题

颜色标识为:purple   ℹ️了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|紫色#(purple)

>(purple)

purple 彩虹引用 6 级标题

颜色标识为:purple!   ℹ️了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|紫色强调#(purple!)

>(purple!)

rose 彩虹引用 6 级标题

颜色标识为:rose ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|洋红色#(rose)

>(rose)

rose 彩虹引用 6 级标题

颜色标识为:rose! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|洋红色强调#(rose!)

>(rose!)

pink 彩虹引用 6 级标题

颜色标识为:pink ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|粉色#(pink)

>(pink)

pink 彩虹引用 6 级标题

颜色标识为:pink! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|粉色强调#(pink!)

>(pink!)

gold 彩虹引用 6 级标题

颜色标识为:gold ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|金色#(gold)

>(gold)

gold 彩虹引用 6 级标题

颜色标识为:gold! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|金色强调#(gold!)

>(gold!)

brown 彩虹引用 6 级标题

颜色标识为:brown ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|棕色#(brown)

>(brown)

brown 彩虹引用 6 级标题

颜色标识为:brown! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|棕色强调#(brown!)

>(brown!)

gray 彩虹引用 6 级标题

颜色标识为:gray ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|灰色#(gray)

>(gray)

gray 彩虹引用 6 级标题

颜色标识为:gray! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|灰色强调#(gray!)

>(gray!)

theme1 彩虹引用 6 级标题

颜色标识为:theme1 ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|主题主色#(theme1)

>(theme1)

theme1 彩虹引用 6 级标题

颜色标识为:theme1! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|主题主色强调#(theme1!)

>(theme1!)

theme2 彩虹引用 6 级标题

颜色标识为:theme2 ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|主题辅助色#(theme2)

>(theme2)

theme2 彩虹引用 6 级标题

颜色标识为:theme2! ℹ️ 了解颜色标识 了解更多

[+] 更多信息

xxxxxxxxxx11/* 这是代码块 */

这是一个 #彩虹引用|主题辅助色强调#(theme2!)

>(theme2!)

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

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

分栏引用

#Markdown 粉|🤟#「希望可以横块分块(或分栏)方式显示同类内容,但 Markdown 标准中好像没有这样的灵活的排版方式~」

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

语法:在「引用」前一段落添加「水平分割线」---

其中,添加一条水平分割表示双栏,两条表示三栏,三条表示四栏

双栏引用的 Markdown 语法示例

​x1---2 3> 分栏 14 5> 分栏 2示例_双栏引用双栏显示:

分栏 1

双栏显示:

分栏 2

示例_三栏引用三栏显示:

第 1 行第 1 栏

三栏显示:

第 1 行第 2 栏

三栏显示:

第 1 行第 3 栏

示例_四栏引用四栏显示:

第 1 行第 1 栏

按钮

>(red!)

四栏显示:

第 1 行第 2 栏

按钮

>(green!)

四栏显示:

第 1 行第 3 栏

按钮

>(blue!)

四栏显示:

第 1 行第 4 栏

按钮

>(purple!)

示例_引用内嵌套的分栏引用引用内嵌套分栏引用嵌套的分栏 1:

第 1 行第 1 栏

按钮

>(red!)

嵌套的分栏 2:

第 1 行第 2 栏

按钮

>(green!)

嵌套的分栏 3:

第 1 行第 3 栏

按钮

>(blue!)

嵌套的分栏 4:

第 1 行第 4 栏

按钮

>(purple!)

>(gray)

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

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

折叠吧引用

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

#VLOOK|👀#(theme2) 通过对 Markdown 「引用」> 语法进行了扩展,实现对引用内容的动态的折叠、展开操作!

语法:> [folder] title ,即在正常的引用语法的首行内容前,添加折叠引子

其中,

[folder]:折叠引子,[+] - 默认为折叠,[-] - 默认为展开

title:折叠引子的标题,与折叠引子以「英文空格」进行分隔

 

使用了该语法后,该行下方的二级引用块即可进行折叠/展开

示例 1_-实际应用效果

[+] 以下是默认折叠的「引用」内容

这里默认为折叠的引用内容

[+] 可支持列表内引用的折叠

这里列表内被折叠的引用内容

[+] 可支持多重引用的折叠

[+] 这里是第三重引用折叠的内容

这是第三重引用的内容

[-] 以下是是默认展开的「引用」内容

这里默认为展开的引用内容。

示例 1_ 对应的 Markdown 源码内容xxxxxxxxxx31> [+] 默认为折叠的引用的标题2> > 这是被折叠的第 1 行的引用内容3> > 这是被折叠的第 2 行的引用内容

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

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

引用排版细分示例 1_引用内嵌普通引用

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

我是引用内嵌的普通引用

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

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

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

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

示例 3_列表内嵌引用

无序或有序列表内嵌的普通引用,会调整为「自适配宽度」样式,并且不会默认转换样式(详见插件调校参数中的 dc-quote ),具体如下:

theme2 普通引用 6 级标题

这是一个普通引用的内容

无序或有序列表内嵌的「彩虹引用」,会调整为「自适配宽度」样式,具体如下:

theme2 彩虹引用 6 级标题

这是一个 #彩虹引用|主题辅助色#(theme2) ,颜色标识为:theme2 ℹ️ 了解颜色标识

>(theme2)

紧跟在插图、表格、代码块等内容后的引用,样式会调整为与这些内容属于「关联」关系的样式,参考样例。

°MermaidMermaid 图表自动编号与题注

#Markdown 粉|🤟#「文档中的 Mermaid 图表,也希望可以像插图那样添加编号和题注」

#VLOOK|👀#(theme2) 无须任何设置,即可自动对文档内所有「Mermaid 图表」进行统一的自动编号,编号内容举例:插图 1 插图 2 ,命名和编号与插图一致。同时,还增强了在演示时的辅助特性 … 了解详情 ❯

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

若没有指定题注,VLOOK™ 会自动创建带有以 Mermaid 图表内文字内容为关键信息的自动题注

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

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

Mermaid 样式优化与扩展

#Markdown 粉|🤟#「如果不喜欢 Mermaid 默认的样式,还希望自动适配 Dark Mode,怎么办?」

#VLOOK|👀#(theme2) 自动提供了深度的样式优化。

统一和优化样式:

自动针对 Mermaid 的 饼图、流程图、状态机图、顺序图、类图、甘特图 进行样式优化,并支持 Dark Mode

Mermaid 的流程图

流程图示例(以上的「分支流程」内容由下图进行接续)

子图分支分支分支重要分支条件1条件2条件3条件4可选子流程存档A(同页)开始准备节点数据文件判断?结束手工输入手动操作B (离页)A(同页)

分支流程示例(接续上图)

B (离页)节点结束Mermaid 的类图

类图示例

InheritanceInheritanceComposition**Composition*Dependency*Composition*Dependency*Composition*InheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritanceInheritance人_Person姓名性别年龄学生_Student所属学校所属班级学号+交作业()老师_Techer所属学校老师证号+授课()班级_Class所属学校所属年级班名学校_School学校名称所属省份所属城市学校类型公司抽象部门市场类部门策划部销售部生产类部门研发部实施部IT部支持类部门质量部财务部行政人事部Mermaid 的状态图

针对「流程图」标记扩展:通过特定命名规范衍生出「状态机图」(PS:因为官方的状态机图还不够成熟)

由 Mermaid 流程图语法衍生的状态图

状态集初始汇聚Act / 变更处理说明Act / 变更处理说明Act / 变更处理说明Act / 变更处理说明状态 C状态 B横向状态图状态 A状态 DMermaid 的顺序图

针对「顺序图」的标记扩展:

支持标记不同类型的角色(人、重要系统、外部系统),以呈现出不同的样式;将 #opt#(purple) #alt / else#(red) #loop#(cyan) #par#(orange) 标签优化不同的外观样式,并根据当前浏览器的语言进行自动翻译。

多种不同角色的顺序图,更清晰、更友好

@人物角色系统角色**重要系统角色--外部系统角色平行发送消息11平行发送消息22平行发送消息33发送消息4par[平行消息]内部动作5显示在外部系统左侧备注说明显示在外部系统右侧备注说明跨对象备注说明发送消息A6同步返回消息A17异步返回消息A28alt[抉择1][抉择2]发送消息X9opt[可选]loop[循环]@人物角色系统角色**重要系统角色--外部系统角色

#📒|参考#(green!) 更多脚本化图表样式,以及结合 VLOOK™ 相关的脚本编写规范内容详见《脚本化图表 for Markdown》。

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

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

°音频

#Markdown 粉|🤟#「希望 Markdown 可以支持音频,这样我就可以制作电子有声书了~」

#VLOOK|👀#(theme2) 目前 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示例 1_-标准模式(默认)

音频播放控件默认为标准模式

示例 2_Mini 模式

◄ 点击播放

除音频基本的控制外,同样支持 W3C 标准的控制功能!

通过在「音频 URL」中添加 VLOOK™ 规范的参数实现,具体如下:

音频控制高级应用说明可定制特性VLOOK™ 规范的 URL 参数示例启用 Mini 模式的播放控件controls=mini启用 播放/暂时 模式(默认为 播放/结束)pause=true#⚠️|注意#(red!)仅 Mini 模式下有效显示音频时长duration=true#⚠️|注意#(red!)仅 Mini 模式下有效开启自动播放autoplay=true开启循环播放loop=true循环播放音频示例开启预加载preload=true预加载音频示例

#小提示#(orange!)

因为是与图片的语法一样,所以在音频以「标准模式」显示时,也支持「自动编号、题注」 … 了解详情 ❯

#📒|参考#(green!)

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

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

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

°视频

#Markdown 粉|🤟#「希望 Markdown 可以支持视频,这样我就可以制作多媒体的文档了~」

#VLOOK|👀#(theme2) 目前 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)

#💡|小提示#(orange!)

因为是与图片的语法一样,所以在视频也支持「自动编号、题注」 … 了解详情 ❯

#📒|参考#(green!)

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

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

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

°代码块代码块自动编号与题注

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

#VLOOK|👀#(theme2) 无须任何设置,即可自动对文档内所有「代码块」进行统一的自动编号,编号内容举例:代码块 1 代码块 2

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

若没有指定题注,VLOOK™ 会自动以代码块内容(头尾片断)作为题注默认只对行数超过 1 行的代码块自动编号和添加题注,若希望调整该行数规则可通过「插件调校参数」 lmc 进行调整示例 1xxxxxxxxxx11 ps -ef|grep zypper|grep -v ar|awk '{print $2,$3,$8,$9}'示例 2

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

xxxxxxxxxx41Program HelloWorld(output);2begin3    writeln('Hello, world!')4end

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

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

代码块增强

#Markdown 粉|🤟#「用 Markdown 生成的文档中的代码块,希望可以一键复制内容~」

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

示例

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

xxxxxxxxxx321// ================================================== //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 (gray)

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

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

°刮刮卡

#Markdown 粉|🤟#「用 Markdown 制作交互式的培训文档时,希望能将一些关键信息(如:答案)先隐藏,点击再显示」

#VLOOK|👀#(theme2) 通过对 Markdown 行内代码(Code)语法 ` ` 进行了扩展,轻松满足「培训、猜迷互动」等场景的排版需求!

语法:`*{提示文本}(隐藏文本 "颜色")`

提示文本:可选,刮刮卡打开前显示的提示信息,默认为 ***隐藏文本:被刮刮卡遮盖的原始信息颜色:可选,指定刮刮卡打开前的预置颜色标识,不指定则默认为 (gray) 。预置颜色标识与「彩虹标签」的颜色标识基本保持一致(无 black )

#💡|小提示#(orange!)

若须修改默认颜色标识,可通过「插件调校参数」dc-coat 指定;打印输出前,可根据提示选择 显示 或 隐藏 刮刮卡的内容。示例_刮刮卡语法示例效果(点击以下的「刮刮卡」显示原始内容)`*{}(这是刮刮卡的内容)`*{}(这是刮刮卡的内容)`*{ 提示信息 }(这是刮刮卡的内容)`*{ 提示信息 }(这是刮刮卡的内容)`*{}(这是刮刮卡的内容 "red")`*{}(这是刮刮卡的内容 "red")`*{ }(这是刮刮卡的内容 "orange")`*{ }(这是刮刮卡的内容 "orange")`*{ }(这是刮刮卡的内容 "yellow")`*{ }(这是刮刮卡的内容 "yellow")`*{ }(这是刮刮卡的内容 "lime")`*{ }(这是刮刮卡的内容 "lime")`*{ }(这是刮刮卡的内容 "green")`*{ }(这是刮刮卡的内容 "green")`*{ }(这是刮刮卡的内容 "aqua")`*{ }(这是刮刮卡的内容 "aqua")`*{ }(这是刮刮卡的内容 "cyan")`*{ }(这是刮刮卡的内容 "cyan")`*{ }(这是刮刮卡的内容 "blue")`*{ }(这是刮刮卡的内容 "blue")`*{ }(这是刮刮卡的内容 "sea")`*{ }(这是刮刮卡的内容 "sea")`*{ }(这是刮刮卡的内容 "steel")`*{ }(这是刮刮卡的内容 "steel")`*{ }(这是刮刮卡的内容 "purple")`*{ }(这是刮刮卡的内容 "purple")`*{ }(这是刮刮卡的内容 "rose")`*{ }(这是刮刮卡的内容 "rose")`*{ }(这是刮刮卡的内容 "pink")`*{ }(这是刮刮卡的内容 "pink")`*{ }(这是刮刮卡的内容 "gold")`*{ }(这是刮刮卡的内容 "gold")`*{ }(这是刮刮卡的内容 "brown")`*{ }(这是刮刮卡的内容 "brown")`*{ 点开•刮刮卡 }(这是刮刮卡的内容 "gray")`*{ 点开•刮刮卡 }(这是刮刮卡的内容 "gray")`*{ 这是一条长长的刮刮卡 }(这是刮刮卡的内容 "theme1")`*{ 这是一条长长的刮刮卡 }(这是刮刮卡的内容 "theme1")`*{ 点开•这一条很长很长的刮刮卡 }(这是刮刮卡的内容 "theme2")`*{ 点开•这一条很长很长的刮刮卡 }(这是刮刮卡的内容 "theme2")

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

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

°任务列表任务列表自动编号

#Markdown 粉|🤟#「目前 GFM 标准的任务列表(to-do)默认会取消其列表编号,这真不太友好~」

#VLOOK|👀#(theme2) 只要使用了 VLOOK™ 的主题,这都不是问题。

▼▼▼ 示例效果详见下面的章节介绍 ▼▼▼

任务组完成状态

#Markdown 粉|🤟#「多级任务组的情况下,如果子任务中部分完成,部分未完成,这个任务组的状态 GFM 标准做不到啊~」

#VLOOK|👀#(theme2) 子任务,甚至是子任务的子任务,都可以自动根据其完成状态,自动标识其上级任务组的状态。

激活插件后,自动根据「子任务项」的完成状态调整「上级任务项」的「任务组状态」任务组状态支持:未完成、已完成、部分完成。示例 1

这是部分完成的一级任务列表项 1

这是二级任务列表项 1.1

这是部分完成的二级任务列表项 1.2

这是已完成的三级任务列表项 1.2.1

这是已完成的四级任务列表项 1.2.1.1

这是已完成的四级任务列表项 1.2.1.2

这是三级任务列表项 1.2.2

这是已完成的二级任务列表项 1.2

这是部分完成的一级任务列表项 2

这是二级任务列表项 2.1

这是二级任务列表项 2.2

这是一级任务列表项 3

示例 2

这是部分完成的一级任务列表项

这是二级任务列表项

这是已完成的二级任务列表项

这是已完成的三级任务列表项

这是四级任务列表项

这是已完成的二级任务列表项

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

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

The End 1 主要是指图片(如:jpg、png 等),以及脚本化图表(如:Mermaid 的流程图、状态机图、顺序图、甘特图、类图等) ↩


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3