wordpress中用markdown写作 – 亲测Markdown插件(Wp-HyperMD),解决图片居中,链接新窗口/新标签页打开等问题

wordpress中用markdown写作 – 亲测Markdown插件(Wp-HyperMD),解决图片居中,链接新窗口/新标签页打开等问题

markdown 是个好东西

平常写点文档、博客等,自从用了markdown,就再也不用word了。
markdown的优势,个人感觉较深的有几点:

  • 纯文本 – 可以很方便的用git/svn进行版本控制,甚至可以用diff生成patch;
  • 语法简单够用 – 简单到刚刚好,word那么多功能,常用的功能又有多少呢?markdown格式很简单,几分钟就能看明白,但又足够了;
  • 支持内嵌html – 复杂的格式,可以内嵌html,可简单可复杂。

对程序员来说,markdown可以说得上是居家旅行必备的好工具。

平常一般用atom编辑器,有道云写markdown文档,也想在wordpress中用markdown,就试用了wordpress的各种markdown插件。

试用wordpress中各种插件

试用了各种markdown插件,包括JP markdownWP-Markdown等等,发现很多markdown插件都不成熟,各种bug,不是排版有问题,就是语法高亮有问题。

找了找去,费了不少功夫,终于找到一个国人写的插件Wp-HyperMD,用起来不错,开发者以前也开发过WP Editor.mdmarkdown插件,用的人也不少,不过我实测WP Editor.md有个问题,代码语法高亮的行号与代码没能对齐,不知道什么原因,可能跟用的主题有关。好吧,我承认我是“行号主义者”,代码没有行号不能忍,换。

Wp-HyperMD可以说是WP Editor.md升级版。试用Wp-HyperMD插件语法高亮,排版都没有问题,现在功能可能比WP Editor.md少些,但普通用用足够了。

Wp-HyperMD安装使用

安装

插件库中查找Wp-HyperMD,安装启用。

设置

基本设置

语法高亮

Emoji

数学排版

绘图设置

使用

下面是Wp-HyperMD的使用界面,可以看到编辑页面本身就有呈现效果,很方便。

发布文章后,不错,大部分都没有问题,有两个小问题:

  • 图片未居中
  • 文章中的链接在本页打开

下面解决这些问题。

图片居中

或许跟主题有关,markdown的图片格式,默认靠左显示,不会居中。

![image](//qikegu.com/a.jpg)

当然也可以通过html来实现居中,但感觉太繁琐:

<div style="text-align:center;">
    <img src="//qikegu.com/a.jpg">
</div>

后来通过设置主题的css让图片居中,管理后台菜单外观 > 自定义,选择最下面的额外css,添加css:

article img {
    display:block;
    margin:0 auto;
}

这样markdown文档中,使用默认图片格式,也会居中。

链接新窗口或新标签页打开

markdown的链接格式,默认在本页面打开,生成的网址不包含target = '_blank',默认链接格式:

[奇客谷](//qikegu.com)

当然我们可以通过html格式,设置链接在新页面打开,但跟图片一样太繁琐了:

<a href="//qikegu.com" target="_blank">奇客谷</a>

解决方法,通过wordpress的hook方式,给文章中所有<a加上target="_blank",找到主题文件夹中的functions.php文件添加代码:

function autoblank($text) {
    $return = str_replace('<a', '<a target="_blank"', $text);
    return $return;
}
add_filter('the_content', 'autoblank');

markdown文档中使用默认的链接格式,链接也会在新页面中打开。

小结

完成


评论