Markdown 编辑器推荐


  2020 年 9 月 15 日更新:已经换成了 VSCode 作为 Markdown 编辑器,虽然资源占用比较高,不过图片加载流畅,支持 yaml 头并且 支持自定义 CSS。

##正文

  本站建立有一段时间了,我也用 markdown 写了点东西(其实大部分都是 html (ಥ _ ಥ))。

  虽说markdown是以文本形式编辑的标记语言,不过 markdown 渲染的结果却并非完全按照写作者的想法而来。

  特别是对于我这种基本都在用 html 标签而不是用 markdown 本身语法的人来说,渲染结果和想象的不一致是个非常头疼的问题。

  比如之前遇到了使用2次理应是平级的 <ul> 标签,渲染器却无论如何也要渲染成嵌套列表的情况。

  再有就是渲染器有时候会把 html 标签当成代码块的情况。

  并且 jekyll 环境搭建不是很方便,并且不能做到实时渲染,所以最初都push了多次才能完美显示。

  所以我就开始寻找一些纯粹的,可以实时预览的 markdown 编辑器。

  起初我使用了 farbox,farbox 的渲染可以说是一言难尽,,。

  然后我就使用了在线的 MdEditor,MdEditor 基本上和 Github Page 渲染的一致,功能也很强大,不过因为是 js+html+css 写的,所以性能不是很好.

  作业部落的 CmdMarkdown 和其他在线编辑器也是同理,并且 CmdMarkdown 的离线版就是网页版套一个壳。

  然后就是 Notepad++ 插件,但是这个插件的渲染引擎默认的样式表和 Chrome 的差别很大。

  marktext,MarkEditor 等编辑器默认(且不可更改)使用 GFM 换行方式,这种方式会让 <ruby> 元素显示的很奇怪:

截图

注意中间巨大的空隙,Haroopad 可以切换到正常效果


  CuteMarkEd 不支持自定义 css。

  还有其他几个,多多少少都不是很满意,包括预览结果对拖动跟进不到位,编辑后预览返回顶部,最后就剩下了 Haroopad。

主界面

  Haroopad 是一个韩国人使用 NW.js 开发的 markdown 编辑器。由于 NW.js 的原因,理所当然的支持多平台。

  Haroopad 支持语法高亮,自定义主题(css),实时预览,自动补全 markdown,导出为 HTML 等等。

  不过 Haroppad 也有个共性问题:不支持 yaml 头(只有少数几个编辑器支持)。

  鉴于 NW.js 的内核显示效果和实际的一致,支持外部css,所以可以忽略这个问题。




使用过程需要注意的问题


注意事项 否则
必须使用较严格的 HTML  
元素必须被正确嵌套 标签被转义
非空元素必须被正确的关闭 标签被转义
属性的值必须使用引号 标签被转义
   
不要有多余的起始/结束标签 排版混乱
不要让空标签出现在行末 标签被忽略
空标签后需添加换行 下一行被忽略
统一代码缩进方式 排版混乱
段与段之间需要2个换行 行与行粘连
特殊字符和 HTML 标签使用转义符 当作元素
首行缩进使用 &emsp; 不显示缩进



常用 HTML 标签


删除线

下划线

引用 (斜体)

缩写

短语引用 (不换行)

段落引用

(换行)


代码引用

分隔线


斜体

有序列表 (<ol>) 无序列表 (<ul>)

页面导航链接

上下角标

H2O xn


<del> 删除线</del>

<ins>下划线</ins>

<cite>引用</cite> (斜体)

<abbr title="缩写内容">缩写</abbr>

<q>短语引用</q> (不换行)

<blockquote>段落引用</blockquote> (换行)

代码引用
<code>
<pre>

分隔线
<hr>

<i>斜体</i>

有序列表 (<ol>) 无序列表 (<ul>)

页面导航
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

上下角标

H<sub>2</sub>O
x<sup>n</sup>



Markdown 语法范例


参见 Markdown Test