MarkDown是非常实用的轻量级标记语言，通过一些简单的标记就可以实现文本的快速格式化。在工作中使用MarkDown撰写文档将能够很大程度上提升效率。当然，由于这一特性，MarkDown在博客文章撰写尤其是技术博客撰写中也有很大的优势。

许多先进的博客框架已经将MarkDown语法集成在了自己的编辑器中，例如著名的Hexo、Ghost、Jekyll、Octopress等。但是老旧的WordPress却一直没有将MarkDown集成在自己的编辑器中，即使是在最新的版本中也只能兼容少量的MarkDown语法。

当然，WordPress提供了许多MarkDown的插件，这些插件我也试用过，大都有着这样或那样的问题，试用过后觉得并不能够完美的编辑MarkDown。直到看到了风景侠的文章(链接)，终于找到了解决问题的思路，即在WordPress的后台集成MarkDown编辑器。原文中有不少疏漏，在本文中已经纠正并优化。

原理

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

应用

下载marked.js文件，放入主题对应的js目录下。marked.js是一套js库，用于将markdown代码转换成html。这个marked.js来源于Jeffrey的开源项目(链接)，当然你也可以在Bootstrap中文网找到对应的下载(链接)。我的是:

/wp-content/themes/zivers/js/

在同一目录下创建markdown-editor.js文件。markdown-editor.js 用于监听文本框事件，来实时调用 marked.js 来转换 markdown 代码。内容如下：

function markdownEditorChanged() {
    var editor = document.getElementById("markdown");
    if (tinyMCE.activeEditor) {
        tinyMCE.activeEditor.setContent(marked(editor.value));
    }
}

function previewMarkdown() {
    var editor = document.getElementById("markdown");
    myWindow=window.open('','','width=200,height=100')
    myWindow.document.write("This is 'myWindow'")
    myWindow.focus()
    myWindow.opener.document.write("This is the parent window")
}

最后，在functions.php中加入以下hook，完成创建和保存MarkDown编辑内容：

function create_markdown() {
    add_meta_box( 'markdown_box', 'Markdown', 'markdown_html', 'post', 'normal', 'high' );
}

function markdown_html( $object, $box ) { ?>
        <textarea name="markdown" id="markdown" cols="60" oninput ="markdownEditorChanged()" rows="15" style="width: 100%; height:100%"><?php echo htmlspecialchars (get_post_meta( $object->ID, 'markdown', true )); ?></textarea>
<?php }

function save_markdown( $post_id, $post ) {
    if ( !current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    $meta_value = get_post_meta( $post_id, 'markdown', true );
    $new_meta_value = $_POST['markdown'];

    if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, 'markdown', $new_meta_value, true );

    elseif ( $new_meta_value != $meta_value )
        update_post_meta( $post_id, 'markdown', $new_meta_value );

    elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, 'markdown', $meta_value );
}


function markdown_script() {
    wp_enqueue_script('markdown', get_template_directory_uri() . '/js/marked.js' );
    wp_enqueue_script('makemarkdown', get_template_directory_uri() . '/js/markdown-editor.js');
}

add_action( 'admin_enqueue_scripts', 'markdown_script');

效果