在wordpressp上优雅的显示markdown文章

也许你跟我一样喜欢上了用markdown来书写和排版文章。有一种“像写代码一样写文章”的赶脚。只要打几个特殊的符号就能生成自己想样的那个样子的格式,马麻再也不用担心我用不好那些复杂难用的在线html编辑器了。

但是,遗憾的是目前没有几款特别好的markdown编辑器,更遗憾的wordpress对markdown的支持很不好。曾经尝试了wp上的markdown插件,每一次都折腾死去活来,灰头土脸而归。要么就是支持的格式不好,要么就是显示得乱七八糟,还不能自己修改和定义。

终于,我想出了一种“完美”的解决方案:markdown to html+customize markdown css

1.选择一款自己最喜欢的markdown编辑器

这里推荐一款我最喜欢的在线markdown编辑器。作业部落出品的mdeditor。很好的用户体验及preview主题,还有很不错的代码格式化高亮。如果是注册用户它还可以实时保存并且分类。更多功能就不多说了,感兴趣可以自己去挖掘。

假设你已经用你喜欢的md编辑器编辑好了你的文章,ok,将其导出html。

2.为wordpress编写特定的css文件为markdown文章配色

进入wordpress新建文章页,将编辑器由‘可视化’模式切换到‘文本’模式,将你导出的html内容复制到wordpress文章编辑器中,然后保存。可能默认的样子跟你在你的markdown编辑器的样子会有些差距。没关系,你只需要自己写一个专门针对markdown着色的css文件,引入到你的站点中即可。具体操作我将以本站(本

站用的twentytwelve主题)为例来讲:

  • 创建自定义css样式文件,这里取名markdown.css。针对当前主题,写入markdown样式。
  • 将该css文件放到wp-content/themes/[本站主题名]/css目录下
  • 找到wp-content/themes/[本站主题名]/header.php文件,在前面加上引用css的link语句:
<link id='markdown_css' rel="stylesheet" type="text/css" href="<?php $filePath = dirname(__FILE__)."/css/markdown.css"; echo "/".substr($filePath, strpos($filePath,"wp-content"));?>">  

备注

我把我为本站当前主题(twentytwelve)写的markdown.css提交到我的神奇小脚本(包括对应的less)中了,大家可以参考。