不要著急,最好的總會在最不經意的時候出現。
Don't worry, the best will always appear in the most casual time.
心配しないで、最高のものが常に最もカジュアルな時間に表示されます。
Ne vous inquiétez pas, le meilleur apparaîtra toujours au moment le plus décontracté.
걱정하지 마십시오. 최고는 항상 가장 우연한 시간에 나타납니다.
Не волнуйтесь, лучшее всегда будет появляться в самое случайное время.

:
Loading...
大纲
prev
next
next
 
 
 
 
VLOOK™
让你的 Markdown 有了新看法
──
快速参考手册
#最新版本|V9.19#idle

MAX丨孟兆
COPYRIGHT © 2016-2020. MAX°DESIGN.

VLOOK™<br>让你的 Markdown 有了新看法<br>──<br>快速参考手册<br>#最新版本|V9.19#idle<br><br>MAX丨孟兆<br>COPYRIGHT © 2016-2020. MAX°DESIGN.VLOOK™ 是什么适用场景特性清单![VLOOK™ 特性清单]"环境要求:VLOOK™ V9.7+,Typora mac版 V0.9.9.31+ / Win版 V0.9.83+"特性介绍排版增强多主题样式封面、封底标题、插图、表格、表格行自动编号表格前添加 6 级标题会激活表格行的自动编号,效果如下自动生成插图、表格、代码块、音/视频的题注表格单元格合并![示例一:单元格并列合并、行合并]"注:须使用最新版的 Typora 和 VLOOK"![示例二:表头跨行合并1]![示例三:表头跨行合并2]表格列格式设置![表格设置列格式后的混合排版效果]![表格设置列格式后混合排版效果(格式嵌套)]彩虹标签单标签风格双标签风格mermaid 样式优化mermaid 的流程图mermaid 的状态图mermaid 的顺序图图片反色、增加边缘空白指定图片在 Dark 模式时反色显示指定图片添加边缘空白统一多级列表编号任务列表支持自动编号文档导航大纲导航逐章导航逐段导航插图导航这是长图片示例:演示辅助聚光灯表格十字光柱在新标签打开插图、表格、代码块内容互动支持音频、视频音频音频播放控件默认为:标准模式音频播放控件可指定为:Mini 模式视频代码块增强引用内容可设置为折叠长内容自动折叠文档内容检查与优化自动识别缺失的图片页内链接检查重名章节标题检查外部链接强制在新标签打开视觉与交互Dark 模式字体风格选择更友好的脚注更美观的公式行内公式多行公式打印样式适配快捷键操作打赏如何使用第1步:下载、配置第2步:应用主题第3步:植入插件许可协议The End

VLOOK™ 是什么

#最新版本|V9.19#msg #适用编辑器|Typora#notice #开源协议|MIT# #开发语言|JavaScript/HTML/CSS#spare #官网|https://github.com/madmaxchow/VLOOK#tips

VLOOK™ 是针对由 Typora1(目前最好的跨平台 Markdown 编辑器,没有之一)导出的 HTML 文件进行增强的插件。

VLOOK™ 也许是目前最好的 Markdown 增强插件之一,也是开源中国(OSChina.net)推荐的国产开源产品。

VLOOK™ 属于开源软件,遵从 MIT 许可证

[+] VLOOK™ 许可协议

MIT许可证

版权所有 (c) 2018-2020 MAX°DESIGN | Max Chow

在此授予任何获得此软件和相关文档文件(“软件”)副本的人免费许可,以无限制地处理本软件,包括但不限于使用,复制,修改,合并,发布,分发,再授权和/或出售本软件的副本,并允许本软件的授予人员遵从以下情况:

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

本软件按“原样”提供,不提供任何以表达或暗示,包括但不限于销售,适用于特定用途和不侵权的保证。在任何情况下,作者或版权所有人不对因软件或软件的使用或其他事宜产生的任何索赔,损害或其他责任(无论是在合同,侵权或其他方面的诉讼中)负责。

[+] Markdown 是什么?

  • 2004年,John Gruber 创造了 Markdown,一种专门针对网络写作的文本标记语言。使用 Markdown,你只需在写作过程中插入少量的标记符号,就能很轻松地进行排版(例如设置标题、加粗、列表、引用等)。
  • Markdown文档以纯文本格式存储,这意味着,它们可以用几乎任一种文本编辑器打开。同时,又能通过 Markdown 编辑器导出为带排版的富文本文档、HTML 网页等等。纯粹、简洁、易用、灵活,都是人们喜欢 Markdown 的原因。
  • 目前 Markdown 的标准化项目是 CommonMark

[+] 60 秒学会、10 分钟深入学习 Markdown 语法:

  1. 标准化 CommonMark 语法参考:60秒学会 Markdown 语法10 分钟深入学习 Markdown
  2. GitHub 采用 Flavored Markdown 的语法参考:Typora 目前采用该标准 详细

适用场景

如果你也有以下一个或多个需求或痛点,就可以放心地尝试基于 Markdown 的解决方案(如 Typora + VLOOK)进行文档的编辑、发布、管理:

特性清单

VLOOK™ 充分挖掘和扩展了 Markdown 和 Typora 的语法和功能,并结合现代网络化的文档编辑和出版中涉及的文档的 格式排版文档导航演示辅助内容交互 等方面的需求,为你提供基于 Markdown 的文档编辑、文档发布、文档阅读者提供 一致简洁友好 的体验。

#提示#tips 你正在浏览在这个网页就是由 Typora 编辑并植入 VLOOK™ 插件所生成,并应用了 VLOOK™ 的所有的特性

![VLOOK™ 特性清单]"环境要求:VLOOK™ V9.7+,Typora mac版 V0.9.9.31+ / Win版 V0.9.83+"
VLOOK™ 的特性及简介
一、排版增强               
封面、封底
配合主题样式,让你用 Markdown 写的文档也能焕发专业气质
多主题样式
让你的文档尽显个性,同时提供主题定制服务
标题、插图、表格、表格行支持自动编号
“0”配置,跟 Word 说 ByeBye 吧~
自动生成插图、表格、代码块、音/视频的题注
OMG!配合插图、表格、代码块、音/视频的自动编号,高效高颜值!还有独特的双题注~
表格单元格合并
这个是用 Markdown 人的真痛点,在这时为你提供了优雅的解决方法
表格列格式设置
Markdown 的表格也能快速设置列的格式(如加粗、高亮、斜体、下划线),同样为你提供了优雅的解决方法
彩虹标签
可自定义多个配色的标签、双标签,让你的 Markdown 文档排版更专业、更标准化
mermaid 样式优化
全面深度优化 mermaid 图表,并提供补丁修正其跨平台的兼容性问题
图片反色、增加边缘空白
可指定在 Dark 模式时反色,还能增加边缘空白,让图片的呈现更和谐、阅读体验更佳
统一多级列表自动编号
将多级有序、无序列表的编号进行了统一,以更聚焦内容的结构化
任务列表支持自动编号
让任务列表和多级列表的自动编号两者兼得
二、文档导航               
大纲导航
最为熟悉和常用的文档导航方式,支持折叠
逐章导航
在长文档中特别好用,随时眯一眼就知道当前章节、上/下章节是什么了
逐段导航
这个很 GEEK,可以通过键盘按文档的逐段进行浏览,习惯用 VI / VIM 的人应该会欢呼!
插图导航
让你快速在快速浏览文档的所有插图,并能直接跳到文档中对应的位置
三、演示辅助               
聚光灯
太COOL了!在投影时可以让大家快速聚焦在关键内容上了
表格十字光柱
方便你与大家讨论长表格、大表格时,快速聚焦指定单元格,及对应的行和列
在新标签打开插图、表格、代码块
在长文档中的来回翻页查看插图、表格、代码示例是很崩溃的事,现在你可以让它们在浏览器的不同标签中显示了
四、内容互动               
支持音频、视频
你的 Markdown 文档从此可以看视频、听音频了,音频还支持迷你模式,应用的潜力等你来发挥~
代码块增强
在这你会发现连闷骚的代码都透着动感,高亮当行、复制~
引用内容可设置为折叠
引用内容很长很多?现在可以指定是否默认收起,读者点击才展示引用内容……在 VLOOK™ 的加持下,这里都不是事
长内容自动折叠
长图、长表格、长代码会占用太多屏幕空间?现在可以统统自动折叠,静待你的二维展开指令
文档内容检查与优化
文档中的页内链接、图片链接失效了,现在 VLOOK™ 会悄悄告诉你的
更友好的脚注
用 Markdown 也可以像 Kindle 那样以弹窗方式来看脚注
五、视觉与交互               
Dark 模式
这个不用多说了,懂的人都会喜欢。也可手动切换回标准的 Light 模式
字体风格选择
AMAZING! 不同的字体风格为你的文档带来不同的调性~
更美观的公式
让你的各种公式长得与 VLOOK™ 的不同主题更搭
打印样式适配
使用 VLOOK™ 提供的打印功能,确保文档样式适合商务办公场景下的打印输出
快捷键操作
支持键盘快捷键操作,又可以再装个逼了~
跨平台支持
能自适应在 PC 、平板、手机上进行浏览
自动识别链接类型
自动识别对文档的内部链接、外部链接,鼠标在链接上悬停时通过不同的角标图示进行区分
七语种界面
界面提示说明、题注前缀等内容,均支持:简/繁/英/法/俄/日/韩(依赖于浏览器的当前语言设置)

特性介绍

排版增强

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

多主题样式

VLOOK™ 已为你内置了多套原创、独具风格的主题样式2,能满足日常大多不同的应用场景和视觉偏好:

内置高颜值实用的主题

[+] 我要怎样才能使用这些内置的主题?

下载并添加主题文件(vlook-*.css)到 Typora 主题目录后,在导出 HTML 前通过 Typora 的「主题」菜单选择以「VLOOK」为前缀的主题,如:VLOOK™ hope

── 更多使用指引详见《如何使用

 

#私人定制#目前 VLOOK™ 项目也现已开放了主题的 私人定制 服务(#微信|MaxChow#tips),定制样品示例如下:

私人定制主题

封面、封底

应用了 VLOOK™ 的主题后,即可通过 Markdown 的标准语法(须按 VLOOK™ 约定的使用规范)即可激活对应主题的封面、封底。

[+] 这样就能激活封面!

在文档的最开始输入一个 6 级标题###### 这是封面标题即可激活,同时已内置对特定类型信息的自动排版,具体如下:

[+] 标题

  • 默认格式就是标题格式,直接输入就可以了;

  • 可结合 HTML 的上标、下标方式进行大标题、小标题的延伸应用:

    • 上标:<sup>上标内容</sup>
    • 下标:<sub>下标内容</sub>

[+] 文档类型、密级

可使用 VLOOK™ 的双标签风格写法来实现,举例:

  • `#文档密级|对外公开#tips`
  • `#文档密级|内部公开#notice`
  • `#文档密级|机密资料#caution`

[+] 作者

使用 Markdown 的「粗体」格式标记出「作者信息」即可(会自动添加前缀「by」、加粗),举例:**我是作者**

[+] 版权信息

使用 Markdown 的「斜体」格式标记出「版权信息」即可(会自动缩小字号、加粗),举例:*(C)2020. 版权所有*

以下是本文档封面的完整 Markdown 语法示例内容:

#提示#tips 封面内如何换行? 可直接输入 HTML 的换行标签<br>即可,或直接使用快捷键 Shift + ENTER ↵

[+] 这样就能激活封底!

在文档的最末处输入一个 6 级标题###### 这是封底结语即可激活,同时已内置对特定类型信息的自动排版。

以下是本文档封底的完整 Markdown 语法示例内容:

~ SO EASY!

标题、插图、表格、表格行自动编号

如果你使用过 Word 的标题、图表的自动编码功能,就会惊喜地发现,基于 Markdown 也能做到,甚至能做得更好~
既不需要进行额外的设置和语法支持,甚至还能对表格行进行自动行号编号,一起来看看吧。

[+] 标题自动编号

所有 VLOOK™ 的主题都会自动对 1 ~ 5级 标题进行自动编号;

编号的格式就是你在本文各级章节标题所看到的那样;

因为6级 标题在 VLOOK™ 中应用于封面和封底、段落小标题的排版等,所以不在自动编号范围内。

[+] 插图自动编号

支持对文档内所有的插图,包括图片、mermaid 图表进行统一的自动编号,编号格式为:图 XX

正如你在前面看到的那些介绍内置主题的图片那样。

[+] 表格、表格行自动编号

支持对文档内所有表格进行统一的自动编号,编号格式为:表 XX

要激活表格行的自动编号,须在表格前添加任意层级的标题,或为有序 / 无序列表下的缩进表格,如:###### 这是一个表格

表格前添加 6 级标题会激活表格行的自动编号,效果如下
列1列2列3列4
第一行左对齐(长内容)居中对齐右对齐(长内容)
第二行(长内容)左对齐居中对齐(长内容)右对齐

#提示#tips听说你还想给插图、表格添加题注?好消息是 VLOOK™ 也支持,接着看就能又甩你一个新技能~

自动生成插图、表格、代码块、音/视频的题注

你只需要按 GFM 添加图片的 Markdown 语法,VLOOK™ 就会自动为你的图片添加图注。
如果你要为表格、mermaid 图表,甚至还要同时支持两个题注,这些都可以使用 VLOOK™ 扩展的类似添加图片的语法就能轻松实现~

[+] 这样做,你就能为图片自动生成题注

以 GFM 添加图片的 Markdown 语法为基础:![图片标题](图片URL "可选子标题")

  • 图片标题:即为默认题注,如:![这是图片的默认题注](图片URL)
  • 可选子标题:若填写了可选子标题,该可选子标题就会自动生成为第 2 题注,如:![这是图片的默认题注](这是图片的第2题注)

#注意#以上语法中的「可选子标题」与「图片URL」间须以英文空格    SPACE    进行分隔

[+] 这样做,也能为表格、mermaid 图表、代码块添加题注

  • 懒人方案:

    • 在表格、mermaid 图表、代码块前直接编写题注内容;
    • 然后将内容设置为六级标题(例如:###### 这条是表格题注),同时该六级标题内容在生成题注后,不会被隐藏。
  • 扩展语法、双题注方案:

    • 在表格、mermaid 图表、代码块前增加题注描述,使用语法是 VLOOK™ 扩展 GFM 的添加图片的 Markdown 语法;
    • 语法:`![默认题注]"第2题注",其中的「第 2 题注」内容为可选;
    • 该语法的所有内容由 VLOOK™ 转换后被隐藏,若要保留原始标题内容,可另起一行进行描述。

有关 表格、mermaid 图表 的题注效果效果可以继续看下面表格单元格合并的表格样例

表格单元格合并

表格是文档中最多见的元素,虽然 GFM 扩展了 Markdown 的语法实现了对表格的支持,但对排版上的支持还是比较弱。
目前 Markdown 粉们呼声最多的就是单元格合并了~

现在 VLOOK™ 已为你带了简洁、优雅的单元格跨行、跨列合并的解决方案:

[+] 跨列合并(横向)语法

单元格内容为两个连续的英文等号==进行标识,该单元格将会与左邻的单元格进行合并,以此类推。

[+] 跨行合并(纵向)语法

单元格内容为两个连续的英文句号..进行标识,该单元格将会与上方的单元格进行合并,同时还支持表头的跨行合并。

![示例一:单元格并列合并、行合并]"注:须使用最新版的 Typora 和 VLOOK"
普通列头#标签|测试#列合并(2列)==行合并(2行)列合并(3列)====
行合并(3行)普通单元格普通单元格普通单元格普通单元格普通单元格跨行(全合并)
..行合并(2行)#标签|测试#列合并(4列)======..
....普通单元格普通单元格普通单元格普通单元格..
普通单元格行合并(3行)普通单元格普通单元格普通单元格普通单元格..
普通单元格..#标签|测试#普通单元格普通单元格普通单元格普通单元格..
普通单元格..普通单元格普通单元格普通单元格普通单元格..
![示例二:表头跨行合并1]
列头行合并(2行)列头列合并(2列)==列头行合并(2行)列头列合并(3列)====
..二级列头二级列头..二级列头二级列头二级列头
普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格
普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格
![示例三:表头跨行合并2]
列头行合并(2行)列头行合并(3列)列头列合并(3列)====普通列头普通列头
....二级列头1二级列头2二级列头3....
....三级列头1三级列头2三级列头3....
普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格普通单元格

#注意#如果你还需要对表格的列格式进行设置(如整列加粗、斜体等),VLOOK™ 也提供了同样好的支持,详见以下的表格列格式设置

表格列格式设置

表格是文档中最多见的元素,虽然 GFM 扩展了 Markdown 的语法实现了对表格的支持,但对排版上的支持还是比较弱。

VLOOK™ 除了为你带来单元格合并的能力外,还支持设置表格整列格式的能力~

![表格设置列格式后的混合排版效果]
加粗列#标签#斜体列下划线高亮列删除线列
单元格单元格单元格单元格#标签#单元格单元格#标签组|标签#单元格
单元格单元格单元格单元格内有加粗内容单元格内有加粗内容
单元格单元格单元格单元格内有行内代码内容单元格内有行内代码内容
![表格设置列格式后混合排版效果(格式嵌套)]
加粗+斜体+下划线列高亮+下划线加粗+高亮列删除线+加粗列
单元格单元格单元格#标签#单元格单元格#标签组|标签#单元格
单元格单元格单元格内有加粗内容单元格内有加粗内容
单元格单元格单元格内有行内代码内容单元格内有行内代码内容

[+] 应用表格列格式的使用规范

只须在表头按以标准的 Markdown 或 GFM 的格式设置语法设置对应的格式即可实现整列格式化,支持格式如下:

**加粗***斜体*<u>下划线</u>==高亮==~~删除线~~

彩虹标签

VLOOK™ 基于 Markdown 的行内代码标记` ` ,扩展语法来支持 标签(tag) 功能,并能同时支持 单标签双标签(嵌套标签)

单标签风格

双标签风格

mermaid 样式优化

VLOOK™ 针对比较受关注的 mermaid 图表提供了样式的统一和优化,并提供跨平台跨浏览器的兼容性补丁。

[+] 统一和优化样式

支持 mermaid 的 饼图、流程图、状态图、顺序图、类图、甘特图,同时还能自动适配 Dark 模式

除了样式优化外,还对书写规范进行了统一,效果比其官网的要好上许多许多~

  • 基于流程图衍生出状态机图;
  • 针对顺序图,支持不同角色类型(人、系统、重要系统、外部系统),重绘不同的外观样式;
  • 针对顺序图的 #opt#spare #alt / else# #loop#notice 标签优化不同的外观样式,以及自动翻译为当前浏览器的语言。

[+] 跨平台跨浏览器的兼容性补丁

操作系统涉及 Windows、macOS、Linux,分辨率涉及到普通和高清,浏览器涉及主流的 Chrome / Firefox / Edge。

mermaid 的图表在以上复杂情况下的一致性还是做得不够到位,所以 VLOOK™ 提供了一个非官方的兼容补丁,为大家提供一个更好的浏览体验

mermaid 的流程图

![流程图]"(以上的「分支流程」内容由下图进行接续)"

子图
情况1
情况2
重要分支
流程组节点
普通节点
A
开始
条件判断
结束
分支流程
A

![分支流程(接续上图)]

分支流程
普通节点
结束
mermaid 的状态图

![由 mermaid 流程图语法衍生的状态图]

初始
复杂变更
变更条件说明
变更条件说明
非正常/次要变更条件说明
非正常/次要变更条件说明
状态A
状态B
状态C
状态D
mermaid 的顺序图

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

@人物角色系统角色**重要系统角色**--外部系统角色--同步发送消息1同步发送消息1异步发送消息2内部动作显示在外部系统左侧备注说明显示在外部系统右侧备注说明跨对象备注说明发送消息A同步返回消息A1异步返回消息A2alt[ 条件分组分支1 ][ 条件分组分支2 ]发送消息Xopt[ 可选分组 ]loop[ 循环分组 ]@人物角色系统角色**重要系统角色**--外部系统角色--

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

图片反色、增加边缘空白

应用了 VLOOK™ 主题的文档,针对图片提供了更加精细的排版特性。

指定图片在 Dark 模式时反色显示

图片默认样式(不指定在 Dark 模式时反色)

指定切换至 Dark 模式后反色后会长这样(指定了在 Dark 模式时反色)

指定图片添加边缘空白

[+] 图片 URL 参数语法说明

  • 图片 URL 无参数时:先在 URL 后添加英文问号?后,再添加需要的 URL 参数: ![图片题注](xxxxx.png?invert=in-dark)
  • 图片 URL 已有参数时:多个参数间用英文特殊符号&进行分隔: ![图片题注](xxxxx.png?invert=in-dark&padding=true)

统一多级列表编号

对所有有序无序的多级列表编号进行了统一以有序编号为主,无序编号为辅,简化多级内容的编写。

[+] 列表分级编号样式效果

  • 一级列表内容

  • 一级列表内容

    • 二级列表内容

      • 三级列表内容

        • 四级列表内容

          • 五级列表内容

            • 六级列表内容
  • 三级列表内容

Markdown 原始内容参考如下:

任务列表支持自动编号

GFM 标准的任务列表(to-do)默认会取消其列表编号。
VLOOK™ 主题会保持任务列表特性基础上,恢复列表编号的显示,并与上面统一多级列表编号保持一致。

举例如下:

文档导航

VLOOK™ 提供了对文档章节、插图提供了多种形式的导航和快速定位的工具,全面改善和提高发布的 HTML 文件的浏览体验和效率。 敬请你根据需要和喜好随时、轻松享用~

![文档导航工具及适用场景]

导航工具适用场景
大纲导航适用于目标明确,跨多个章节的快速定位
逐章导航适用于前后章节相关度高,按章节顺序一章一章进行浏览
逐段导航适用于文档评审或演示,按段落一段一段进行聚焦式浏览
插图导航适用于按图索骥,通过浏览文档中的插图(图片、mermaid 图表)来直接跳到文档中对应的位置

大纲导航

在封面时,点击左上角的大纲按钮打开大纲导航面板。不在封面时,会自动贴在文档左侧固定显示大纲导航面板。
支持对章节进行折叠 / 展开。

#注意#编写 Markdown 文档时,须在封面后添加目录标记[TOC]才能在导出的 HTML 中生成大纲面板。

逐章导航

进入文档正文区后,会自动在顶部显示逐章导航条,在封面时会自动收起隐藏,支持对 1~5 级章节进行逐章浏览。
从左到右分别为:前一章节当前章节后一章节,正如你现在看到顶部的导航栏那样。
鼠标点击对应的章节直接跳转到对应的章节开始位置,也可通过左 / 右方向键进行操作。

#注意#编写 Markdown 文档时,须在封面后添加目录标记[TOC]才能在导出的 HTML 中生成逐章导航面板。

逐段导航

在进行文档评审或演示时,可以激活逐段导航,对单段内容进行聚焦。
通过鼠标双击文档任意段落激活逐段导航模式,并通过快捷键进行上 / 下改变当前聚焦的段落。

![逐段导航的浏览操作方式(致敬 VI / VIM)]

快捷键功能
J下一个段落
K上一个段落
H往前十个段落
L往后十个段落

插图导航

[+] 支持的插图类型

  • 浏览器支持的所有图片(jpg / png / gif / bmp / ..)
  • 脚本化图表(mermaid3,从V9.0开始移除对 flowchart.js4、JS Sequence Diagrams5的支持)
这是长图片示例:

普通的图片示例(长图会自动折叠)

演示辅助

VLOOK™ 独创性地为 Markdown 导出的 HTML 提供了强大的演示辅助工具,让面向 Markdown 的 Typora + VLOOK 成为更具生产力的交互式文档出版工具。

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

![演示辅助工具及适用场景]

演示辅助工具适用场景
聚光灯对局部内容进行聚焦,如:插图、多个段落内容
表格十字光柱针对表格内容,特别是行 / 列关联性强的表格,快速关联任意单元格的横向、纵向单元格序列
新标签打开插图、表格、代码块针对须频繁在多个插图、表格、代码块间进行切换时使用,大大减少不必要的文档内跳转

聚光灯

在进行文档评审或演示时,可以通过激活聚光灯来让观众聚焦于文档的特定区域和内容。

通过工具栏上的「聚光灯」按钮打开 / 关闭,也可通过快捷键 S 进行操作,同时还可以通过按下 ⇧ Shift 键调节大小。

#小提示#tips聚光灯在新标签打开的页面中也可以使用喔~

表格十字光柱

鼠标点击表格上的任意单元格后,会自动显示十字光柱,高亮其横向、纵向关联对应的单元格序。

查看示例效果

#小提示#tips表格十字光柱在新标签打开的页面中也可以使用喔~

在新标签打开插图、表格、代码块

支持在新标签中打开文档中的 插图表格代码块,鼠标悬念在这些文档内容上时会在左上角显示「在新标签打开」的按钮,点击即可。

查看示例效果

内容互动

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

支持音频、视频

音频

支持的音频格式:MP3 (.mp3)、Ogg (.ogg)、Wav (.wav)、M4a (.m4a)

语法与 Mardown 的插入图片保持一致(在标准模式控件时可支持自动题注)。
语法:![音频题注](音频URL "音频第2题注"),如:![这是音频](audio.mp3)

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

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

音频播放控件可指定为:Mini 模式

← 点击播放

![音频内容支持定制的内容]

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

[+] 音频 URL 参数语法说明

  • 音频 URL 无参数时:先在 URL 后添加英文问号?后,再添加需要的 URL 参数: ![音频题注](xxxxx.mp3?controls=mini)
  • 音频 URL 已有参数时:多个参数间用英文特殊符号&进行分隔: ![音频题注](xxxxx.ogg?controls=mini&loop=true)

视频

支持的格式:Ogg (.ogv)、MPEG4 (.mp4)、WebM (.webm)

语法与 Mardown 的插入图片保持一致,可支持自动题注
语法:![视频题注](音频URL "视频第2题注"),如:![这是视频](video.webm)

视频示例

![视频内容支持定制的内容]

可定制特性URL 参数示例
开启自动播放autoplay=true 
开启循环播放loop=true 
开启预加载preload=true预加载视频示例
指定视频宽度width=xxx指定视频的宽度(单位:px)
指定视频高度height=xxx指定视频的高度(单位:px)

#提示#tips视频 URL 参数语法与音频一致

代码块增强

更实用、更美观的代码块样式,支持高亮当前行、一键复制代码,还能自动适配 Dark 模式

#注意#须先启用显示代码块行号配置。启用方式:「Typora → 文件 → 偏好设置 → Markdown → 代码块 - 显示行号」

![VLOOK™ 的代码块示例]"语法着色器: C++"

引用内容可设置为折叠

对 Markdown 「引用」> 引用内容进行简单的扩展,实现对引用内容的动态的折叠 / 展开操作,还可以设置默认姿势是折叠,还是展开。

举例如下:

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

  • 在作为折叠引子的内容前增加:[+]<空格>[-]<空格>

    • [+]指该标题下的引用内容默认为「收起」状态;
    • [-]指该标题下的引用内容默认为「展开」状态;
  • 然后换行后添加一个新的嵌套的引用块,该嵌套的引用块即为该引子对应要折叠 / 展开的内容。

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

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

这是第三重引用的内容

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

默认为展示的引用内容

扩展的 Markdown 语法参考如下:

 

长内容自动折叠

文档中的长插图、长表格、长代码会占用过多的屏幕空间,通过 VLOOK™ 可以实现对这些长内容的自动折叠;

• 长图片查看示例

• 长的表格查看示例

• 长代码查看示例

文档内容检查与优化

自动识别缺失的图片

识别出无法加载的图片,并替换为图片缺失提示图,示例如下:

缺失的图片

 

页内链接检查

自动检查页面内部链接的正确性,若存在无效的页内链接,则通过弹窗提示。

 

重名章节标题检查

自动检查文档是否存在重名的标题,以提示作者检查是否会存在页内链接不能跳转到重名的标题位置的可能性。

#注意#重名章节标题的警告提示信息须启动浏览器的开发者工具或调试工具后,打开其控制台窗口进行查看。

 

外部链接强制在新标签打开

为提高文档阅读与交互体验,对于外链(如:http、https、ftp等),自动强制设置为在新标签页中打开。

视觉与交互

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

                                        ── MAX丨孟兆

Dark 模式

所有 VLOOK™ 的主题,都会自动根据浏览器的配置,自动适配显示 Light / Dark 模式,也支持手动方式进行切换。

Light / Dark 效果预览

#提示#tips如果你的图片在 Dark 模式下显得不够和谐,可以尝试选择让图片在 Dark 模式时自动反色

字体风格选择

支持 衬线非衬线 两套字体风格,可根据个人喜好进行切换,后续将会引入更多字体风格。

衬线与非衬线分别优先使用开源的 思源黑体思源宋体,建议下载安装获得最佳的视觉体验。

[+] 字体下载地址

更友好的脚注

默认情况下,Typora 导出的 HTML 在查看脚注时会在文档中来回跳转。

通过 VLOOK™ 插件优化后的脚注,可以直接在当前页面位置弹层的方式进行显示,可点击文末右上角的链接查看效果6

更美观的公式

行内公式

 

多行公式

打印样式适配

使用 VLOOK™ 提供的定制打印功能,可以在打印输出时自动优化页面排版和样式,以适应用打印输出。

快捷键操作

![全局快捷键]

快捷键功能
D开启 / 关闭 Dark 模式
O显示 / 隐藏大纲面板
A切换字体样式,详见字体风格选择
I显示 / 隐藏插图导航
P打印文档
S打开 / 关闭聚光灯
<上一章
>下一章
JKHL内容块浏览操作,详见逐段导航
ESC关闭弹出的界面、聚光灯、内容块聚焦等

![插图导航快捷键]"注:打开插图导航后生效"

快捷键功能
/ <前一张插图
/ >后一张插图

![聚光灯快捷键]"注:打开聚光灯后生效"

快捷键功能
⇧ Shift调整聚光灯大小

打赏

若喜欢 VLOOK™ 的话,可以请 Max 喝杯咖啡~

如何使用

第1步:下载、配置

第2步:应用主题

第3步:植入插件

强烈建议使用 Chrome、Firefox、Edge 浏览器访问

许可协议

MIT许可证

版权所有 (c) 2018-2020 MAX°DESIGN | Max Chow

在此授予任何获得此软件和相关文档文件(“软件”)副本的人免费许可,以无限制地处理本软件,包括但不限于使用,复制,修改,合并,发布,分发,再授权和/或出售本软件的副本,并允许本软件的授予人员遵从以下情况:

上述版权声明和本许可声明应包含在本软件的所有副本或重要部分中。

本软件按“原样”提供,不提供任何以表达或暗示,包括但不限于销售,适用于特定用途和不侵权的保证。在任何情况下,作者或版权所有人不对因软件或软件的使用或其他事宜产生的任何索赔,损害或其他责任(无论是在合同,侵权或其他方面的诉讼中)负责。

The End

1 Typora 是非常棒的跨平台的 Markdown 编辑器,支持直接预览与编辑,更详细的特性详见官网
2 可以根据源码目录下 LESS 文件为样例进行自定义扩展,访问 VLOOK™ 的 github 主页了解更多。
3 mermaid 是一个用于画流程图、状态图、顺序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。详见 mermaid官网,或 VLOOK™ 的示例文档《脚本化图表 for Markdown
4 flowchart.js 基于 SVG 的流程图插件,它仅需几行代码即可在 Web 上完成流程图的构建。可以从文字表述中画出简单的 SVG 流程图,也可以画出彩色的图表。详见 flowchart.js 官网,或 VLOOK™ 的示例文档《脚本化图表 for Markdown》。
5 JS sequence diagrams 是一个方便建立UML的顺序图(序列图or循序图)在线工具,使用简单。详见 JS Sequence Diagrams 官网,或 VLOOK™ 的示例文档《脚本化图表 for Markdown》。
6 这是 VLOOK™ 优化后的脚的信息