使用 Markdown 写作可以帮助我们更加专注于内容本身。之前用的 JP Markdown(原名Jetpack Markdown)还不错,不过最近发现了一个更加好用的插件 – WP Markdown Editor,编辑界面美观,同时也实现了 Markdown 实时预览编辑,大大增强了写作体验。

WP Markdown Editor

WP Markdown Editor 我是强力推荐的,我目前也使用该插件。

WP Markdown Editor 安装后界面如下,简洁美观,包含几个常规的 Markdown 按钮,并且支持预览,还可以分栏写作、实时预览效果,完全可以满足日常的使用需求。

WP Markdown Editor编辑界面WP Markdown Editor编辑界面

曾几何时使用的 JP Markdown,本质上只是提供了 Markdown 功能,并不提供编辑器功能,因此只能使用纯文本编辑模式,说实在还是很不方便的(例如不支持tab),因此我经常是在别的 Markdown 软件上写好内容,然后再粘贴到 WordPress 中。而如今,用上 WP Markdown Editor,可以实时预览,终于能安心的直接在 WordPress 上进行 Markdown 写作了。

WP Markdown Editor实时预览功能WP Markdown Editor实时预览功能

插件安装后只有一个选项,“将 Markdown 用于评论”(仅作用于 WordPress 自身的评论功能)。

WP Markdown Editor设置WP Markdown Editor设置

千言万语一句话:快来使用 WP Markdown Editor 在 WordPress 中书写 Markown 吧!

插入图片

启用 WP Markdown Editor 后,点击“添加媒体”,将图片插入文章时,插入的仍然还是 HTML 代码(<img src="..." alt="..." width="..." height="..." class="..." />)。

稍做修改,我们就可以改为插入 Markdown 代码(![...](...)),在主题的 functions.php 中增加如下代码:

add_filter( 'image_send_to_editor', 'new_image_send_to_editor', 21, 8 );
function new_image_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ) {
    return "![$alt]($url \"$caption\")";
}

改完后,通过“添加媒体”插入图片,就会插入相应的 Markdown 代码了。

代码高亮

对程序员来说,代码高亮是相当重要的一部分,可惜的是,目前测试的几个插件中,与 Markdown 的结合还不够完美(如果有好的插件请留言推荐)。

WP Markdown Editor 是采用 Jetpack 的 Markdown 模块 实现内容解析的,因此 Markdown 中的代码块,如:

``` c
void main() {
    printf("hello, world\n");
}
```

会被解析为如下 HTML:

  1. <pre><code class=“c”>
  2. void main() {
  3. printf(“hello, world\n”);
  4. }
  5. </code></pre>
HTML

有了这样的解析结果,就可以利用一些插件来实现代码高亮了,如 WP Code Highlight.js,可完美地对解析后的 HTML 代码进行处理从而实现代码高亮。但缺点是功能不足,例如没有显示行号、工具栏(复制代码、新窗口中打开代码)。

另一款还可以与 Markdown 结合使用的代码高亮插件是 SyntaxHighlighter Evolved,是一般我们在其他网站上看到的代码高亮效果,有行号,有工具栏,但该插件存在几个问题。

首先是该插件会将 Markdown 中的代码块转化为 shortcode 的形式,如上面的代码块会转换为如下代码再存入数据库中:

[code lan="c"]
void main() {
    printf("hello, world\n");
}
[/code]

在页面中显示的时候,这段代码还需要经过插件再次处理才能正常显示,这也就意味着如果停用该插件,那么在页面中就会直接显示 shortcode 代码,而不是解析后的 HTML 代码了。不过要是一直使用该插件,倒也没问题,并不会影响使用

最主要的问题是,该插件会将 Markdown 代码块中的引号进行转义,那么 printf("hello, world\n"); 就会显示为printf(&quot;hello world\n&quot;); 这显然不是我们想要的结果。可通过修改代码来解决该问题,将 syntaxhighlighter\syntaxhighlighter.php 中第 975 行:

  1. $code = ( false === strpos( $code, ‘<‘ ) && false === strpos( $code, ‘>’ ) && 2 == $this->get_code_format($post) ) ? strip_tags( $code ) : htmlspecialchars( $code );
php

改为:

  1. $code = ( false === strpos( $code, ‘<‘ ) && false === strpos( $code, ‘>’ ) ) ? strip_tags( $code ) : htmlspecialchars( $code );
php

就可以了。

Google Code Prettify本博客使用 Google Code Prettify 来实现代码高亮,手动实现,没有用到插件,并且做了一些定制开发,增加了复制代码功能。实现思路是引入 google code prettify 文件,先使用 js 将 <pre><code>....</code></pre> 修改为 <pre class="prettyprint lang-c">....</pre>,然后再调用 prettyPrint(),具体可以看本站的源码,实现上还是比较简单的。Google Code Prettify 只是提供了代码高亮,本身没有提供工具栏(复制代码等功能)。

WP Markdown Editor 存在的小问题

WP Markdown Editor 还存在几个小问题:

  1. 养成时刻保存的好习惯,关闭窗口时不会有提示,没保存就蛋疼了;
  2. Markdown 中的代码块如果包含 &nbsp; &quot; 等转义符,保存后会转换为相应的 HTML 实体,破坏了原本的代码,这是 Jetpack 的 Markdown 模块的问题,我稍微看了下,暂时还未找到解决方法(除了搞前端的,一般不会被这问题所影响倒是);
  3. 不要使用文章列表页的“快速编辑”,否则文章内容会变成解析后的 HTML 代码(这是由于这类 Markdown 插件是用 post_content_filter 字段存储 Markdown 文本的,如果使用快速编辑会导致将该字段被清空),暂且也没发现解决方法。

特别是“快速编辑”这个问题,如果不慎使用了,会使得再次编辑文章时就不是 Markdown 格式了,非常麻烦。避免这种情况的发生,可以在主题的 functions.php 中加入如下代码禁用快速编辑:

  1. /*
  2. * 禁用快速编辑功能
  3. * 否则会导致 Markdown 格式的文章内容变为 HTML 代码
  4. */
  5. add_filter( ‘post_row_actions’, ‘power_remove_row_actions’, 10, 2 );
  6. function power_remove_row_actions( $actions )
  7. {
  8. if( get_post_type() === ‘post’ ) {
  9. unset( $actions[‘inline hide-if-no-js’] );
  10. }
  11. return $actions;
  12. }
php

其他 WordPress Markdown 插件

在我所了解的 WordPress Markdown 插件中,还不错的有 JP Markdown 和 PrettyPress,但都不是很推荐使用,感兴趣的可以下载试试。

JP Markdown 主要是提供了 Markdown 的解析功能,不带编辑器。

PrettyPress 提供了实时预览功能,并且支持在 MARKDOWN、VISUAL、HTML 三种形式中转换。但实际上,在转换过程中很经常会打乱原来的内容,特别是代码,另外也存在一些小问题。

总结

目前看来,WordPress Markdown 插件中,WP Markdown Editor 是不二之选。

Enjoy Markdown.

 

摘自:http://www.powerxing.com/wordpress-markdown-plugin/