Markdown 插件

🌙
手机阅读
本文目录结构

Markdown 插件可能有很多方向;

比如

  • 写邮件的Markdown Here
  • VScode/Sublime插件
    • MarkdownEditing:https://github.com/SublimeText-Markdown/MarkdownEditing
    • OmniMarkupPreviewer:https://github.com/timonwong/OmniMarkupPreviewer
  • vim的markdown插件
    • 如:vim-markdown / vim-instant-markdown / python-vim-instant-markdown

下面是以VScode为蓝本的插件介绍;

对于 Markdown 文件编辑来说,无非就是需要:

  • 实时预览
  • 生成 HTML 文件
  • 生成 PDF 文件
  • 语法检查(因为 Markdown 的标记相对简单,基本不用进行检查。)
  • 其他功能扩展(比如数学公式生成、目录生成器、样式修饰、脚注、其他特定功能或样式)

因为 Markdown 和它的扩展没有形成最终的统一,所以各种 Markdown 的扩展也是各做各的,各个平台支持力度也是不尽相同,往往都是一个扩展在这个平台支持,在另一个平台就不支持了。所以你在写 Markdown 的时候要考虑文章存放的平台,或者最终的用途(比如生成 HTML、PDF)是否能准确解析,不然会白费力气的:不支持的标记会变成普通文本使得看上去怪怪的。

那我们就开始一一来看看好了:

Markdown 实时预览

新版的 VScode 已经支持 Markdown 实时预览了。所以你是否需要预览插件就看你自己了,不过列出的几个:

  1. Instant Markdown
    • 以静态服务器的形式解析 Markdown 文件,会自动打开浏览器并支持实时预览。虽说很好用,但是总是突然就弹出浏览器界面,总是会让你心烦意乱。
  2. Auto-Open Markdown Preview
    • 随着新版 VScode 对 Markdown 的预览,基本不需要这款插件了,因为它的功能和 VScode 提供的预览方式是一样的。都是在侧边(编辑区)预览解析后的 Markdown 文件。
  3. Preview

Markdown 转 HTML

Markdown 转 HTML 可能是不少小伙伴需要的,实现方式上也很多,但就在 VScode 里直接实现来说,还是很有必要的,尤其当你不会构建转换环境的时候。

  1. Copy Markdown as HTML
    • 目前就看到这一款插件(如你有更好的选择,记得留言告诉大家哦!),不过它用起来不是很方便。你需要创建一个空的 HTML 文件,然后到 markdown 文件里按 Ctrl+Shift+P 呼出命令栏,然后选择Markdown: Copy as HTML命令得到 HTML 文件(这会儿 HTML 在剪切板里),然后再回到先前的 HTML 文件中粘贴并保存,这样才能最终转换成 HTML 文件,而且解析样式不能通过设置来自定义,要修改样式,要自己写 CSS 样式。不管如何到底也是成功装换了。

Markdown 转 PDF

我们都知道 Markdown 文件没有解析器是不能愉快阅读的(它不能在浏览器中打开直接解析),比起让人下载 Markdown 阅读器,不如直接转成 PDF 直接些,

相对原始 Markdown 阅读起来更容易些。做到写的人容易,读的人也容易,你好我好大家好!

  • Markdown PDF

    • 这个插件可以把你在编辑区打开的 Markdown 文件转换成 PDF 文件,而且命令就在鼠标右键菜单里:Convert Markdown to PDF使用起来非常方便,它会直接生成到 Markdown 所在的目录里(可通过设置指定生成目录(路径))。
    • 它还支持通过设置控制样式或者其他的显示(隐藏)内容。 设置:文件》首选项》设置》Markdown-pdf configuration里面有各项参数,你可以按照自己的需求进行自定义设置。其中:“markdown-pdf.outputDirectory"项就可以设置 PDF 生成保存的路径,默认是保存到当前路径 (markdown 文件所在路径)。它算是比较人性化的插件了吧。
  • md2pdf

Markdown 转 Word 及其他格式

我觉得转成 Word 也是某些小伙伴的刚需,所以也列出来:

  • vscode-pandoc
    • 算是专门转换 Markdown 的插件吧,支持把 Markdown 转成 HTML、PDF、Word,还没试过,大家可以看看。
  • md2reader
    • 把 Markdown 转换成EPUD/MOBI格式

Markdown 辅助编辑插件

Markdown 在某些方面还是比较难编辑的,比如:表格(相当于 HTML 的 table 标签) ,因此,就有了辅助编辑插件了,主要是通过快捷键或者鼠标右键菜单快速插入或者生成 markdown 标记。以方便不太熟悉 Markdown 标记的人或者想要快速生成标记的人的需求。

毕竟 VScode 也只是在编辑器的导航器中内置了加粗、斜体、删除线、列表等 4 个插入标记的功能按钮,并不能满足需求,所以你和我一样比较懒的话,辅助编辑插件是个不错的选择:

  • Markdown Shortcuts

    • 这个插件就支持通过快捷键和鼠标右键菜单快速生成 Markdown 标记, 它基本覆盖了标准的 Markdown 的所有标记符,很是方便,尤其是快速生成表格标记方面。
  • Markdown TOC

    • 这是生成目录用的(生成 [TOC] 标记)但是 [TOC] 并不是标准 markdown 标记,你要用的话要考虑下平台支持因素。

顺便说下:Markdown TOC这个插件做得不完美,它的鼠标右键菜单会在所有的语言的编辑区中出现(当你点击鼠标右键的时候),这会让人很烦;还有更烦人的是,使用这个插件,如果你是HEXO写博客的,点生成TOC时候,会把配置文件头都当作正常内容处理了;不怎么好;

Markdown 扩展标记支持插件

某些特殊的 Markdown 扩展标记是无法解析出来的(或者插入标记)。这就需要 Markdown 扩展标记插件来帮忙了。

  • Markdown+Math
    • 一个比较全面的工具吧,支持生成 HTML,支持插入标记,可能它的特色功能是数学公式、图形的插入解析,所以,如果你有这方面的需求,可以下下来使用。
  • Evernote
    • 支持把印象笔记的文件以 Markdown 格式打开(印象笔记是不支持 markdown 文件的)。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了