免插件实现WordPress支持Markdown-续笔记自媒体

众所周知 WordPress 内建编辑器并不支持Markdown功能,也不存在一款较为理想的Wordpress插件支持Markdown。但人类的探索从未止步,终于有一个新的方法免插件实现让Wordpress完美支持Markdown语法。

集成后的功能如下:

  • 实时预览:即见即所得,甚至你可以作为一个专用的 markdown 编辑器来使用;
  • 代码高亮:程序员最爱,需要在前台做代码高亮;
  • 代码分离:Markdown 的代码和 html 代码分离,互不影响,并且会将 markdown 代码保存下来,以便下次继续编辑。

实现原理:

在 post 页面添加一个 textarea,监听 input 事件,事件中将文本框的内容取出,用 marked.js 进行转码,将转码后的 html 放在系统中的 tinyMCE 中。 在保存时将 textarea 中的文本存入 media data 中,下次可以继续编辑。

开始集成

  • 下载 marked.js 和 makemarkdown.js //点此下载|续笔记
  • 将 marked.js,makemarked.js 拷贝到 ~\wp-content{你的主题目录}\js\ 目录下

marked.js 是一套 js 库,用于将 markdown 代码转换成 html。makemarked.js 用于监听文本框事件,来实时调用 marked.js 来转换 markdown 代码。

在 function.js 中加入以下代码:

目前后台的工作已经 ok,代码高亮需要在前台设置,参见后续文章。