WordPress的Markdown支持

如果只是简单的支持的话,三款插件可以做到在WordPress中替换WordPress编辑器为Markdown编辑器,并且能够实现前端支持Markdown显示,然后可以支持语法高亮和时序图等等。

插件支持法-方便不可定制

wp-githuber-md
比较新,前端支持、带编辑器(可切换古腾堡和Markdown编辑器)、可配置语法高亮、时序图(语法可选择项多)。推荐使用

WP-Editor.md
老牌,前端支持、带markdown编辑器,配置语法高亮、时序图(不可定制)。编辑器不能切换、语法高亮不能定制。简单实用,可以使用。

Jetpack
安装官方插件,启动markdown for WordPress,不带编辑器,只是纯支持,太臃肿一堆无用的功能。国内使用不方便不推荐。

在Jetpack插件的设置界面,将“使用Markdown语法编写纯文本文章”的选项勾上。

WordPress无插件实现代码高亮[简单易操作]

ADD:2020年01月12日 参考文章WordPress无插件实现代码高亮。可以直接按照这个使用。

WordPress离线Markdown同步方法[自行修改代码法]

本站的所有文章,都是使用本地Markdown编辑器MWeb写的,然后离线一键发布到WordPress网站的。及其的方便和快捷,本地会自动读取WordPress的目录,添加标签,还有发布状态等。

为了实现本地效果和WordPress效果一致,我修改了MWeb的本地Markdown渲染效果。然后修改了WordPress的文章页面css渲染效果。最后直接发布的HTML样式的正文,这样WordPress就减少了生成Markdown的过程,提高了加载速度。 但是离线的本地还是原始Markdown,修改起来非常的方便。
优势:

  • 本地是Markdown格式,修改起来非常方便,发布的时候会自动上传图片,支持oss,cdn
  • WordPress网站是HTML样式,加快解析速度。网站后台不用替换编辑器,小修改很方便。
  • 同步MWeb和WordPress显示效果,所见即所得。

本地Markdown和WordPress支持

首先使用MAC的Markdown编辑软件MWeb,一款Markdown写作神器,支持离线发布到WordPress、印象笔记、语雀以及其他一些程序。

1、首先修改MWeb预览样式CSS文件
按需要修改MWeb的预览样式CSS文件,达到自己的需要,本站的样式就是自己定制的。

2、然后修改WordPress主题的文章CSS文件
2.1 按照Markdown渲染的CSS文件的样式,继续修改WordPress主题文章CSS样式,让他们能够相符合。
2.2 添加代码高亮的JS文件,添加时序支持.js,流程图支持.js文件到WordPress模板文件夹中,或者使用公共CDN进行引用。

3、使用MWeb离线发布MD文章,不要选择Markdown模式
注意发布是不要选择Markdown模式不要选择Markdown模式不要选择Markdown模式。这样就减少了页面调用文件渲染的时间,加速文章打开。会直接调用HTML代码,而不是实时在WordPress后台渲染了。

第一种方法:修改MWeb渲染文件,在修改WordPress渲染文件

MWeb预览样式CSS文件->WordPress主题的文章CSS文件: MWeb样式改成WordPress样式?
Note right of WordPress主题的文章CSS文件: WP导入语法高亮、时序图、流程图JS文件
WordPress主题的文章CSS文件-->MWeb预览样式CSS文件: 保持二者同步

第二种方法:曲线救国复制HTML代码

MWeb预览样式CSS文件->WordPress主题的文章CSS文件: MWeb样式改成WordPress样式?
Note right of WordPress主题的文章CSS文件: WP导入语法高亮、时序图、流程图JS文件
WordPress主题的文章CSS文件-->MWeb预览样式CSS文件: 保持二者同步

已完成

  • MWeb的实时预览样式修改
  • WordPress的Markdown支持,纯HTML代码样式
  • WordPress的无插件代码着色支持

待完成

  • WordPress的时序图和路程图的支持(差点忘了这个,不过也简单)

暂时只写了思路和过程,具体的代码没有整理,有点乱暂时不发出来了。效果可以查看本站,都是无插件实现的Markdown效果代码着色效果,以及时序图和流程图支持。实现方法比较特殊,加载速度会快,但需要MWeb和WordPress配合使用。
注:MWeb只支持macOS。

大吉猫

记录自己使用过的软件,学习过的资料,还有可能对大家有用的东西

相关推荐

MWeb预览样式设计

一个可爱的二级标题 我是充满爱的正文内容,我是充满爱的正文内容,我是充满爱的正文内容,我是行内代码内容,我 …

暂无评论

微信扫一扫,分享到朋友圈

WordPress的Markdown支持