在WordPress中使用Markdown进行写作的正确姿势

前言

在wordpress中使用markdown语法来进行写作,是很多wordpress博主都要想到的一点。虽然说现在wordpress已经“原生”支持wordpress语法,但是还是有很多的瑕疵,也并不实用,当然也有众多的markdown的插件:

其中我用过最好的是 WP Editor.MD 插件,很感谢插件的作者,该插件的功能和界面都比较令人舒服,曾经想让我一度一直使用下去了,但是由于未知的错误(可能是和别的插件的影响),导致该插件偶尔会发生崩溃,直接导致——网站无法编辑文章页面(好吧,我真的认为很好用,但是没办法呀..)。

而其他国外开发者的插件,比如大名鼎鼎的jetpackc插件集,虽然功能很强大,但是由于是国外的,连接速度比较慢,使用效果差不多为负吧。

另外,大部分的markdown软件都会改变你的文章编辑页面,从而使你不能够插入原生的html文本来进行预览(加入需要某些高级功能),对于需要爱搞事的童鞋来说可能并不是很友好。

所以,在经过又一次的文章编辑页面奔溃后,果断选择一条其他的路径来实现wordpress达到markdown原生编辑的目标。

实现目的

为什么要用markdown,我个人认为markdown很好地诠释了写博客的核心,那就是便捷,专注,使大家能够专注于写作而不用考虑其他没用的东西,现在大部分的热点平台都在使用markdown的编辑器,比如csdn、简书、知乎等大平台。相比于传统的编辑器,markdown能够让使用者上手一段时间然后就可以轻松地写任何你想要表达的内容了,而不用为插入一些插入图片,或者公式,或者调整文字格式而进行的一些多余的操作。

我实现的方式并不是做一个类似于有markdown编辑功能的插件,因为插件虽然是一劳永逸,但是后期问题还是会很多,研究方向重点并不是web,所以并不想在这方面消耗太多的时间。因此选择粘贴html文本的形式来实现markdown功能。

基本的操作是,通过VScode编写markdown格式的文本,也就是在VScode中写文章,随时保存到本地(文章的安全性)。通过Markdown Preview Enhanced插件来实现markdown的实时预览:

此文章就是这样写的,左面写文章,右面既可以进行预览,写文章的时候与原生的markdown编辑器没有区别,然后通过该插件的转为html转化这篇文章为html网页格式,选择offline形式即可。

这样打开你写好文章的html文本,找到并选择其中的内容部分将内容部分粘到wordpress文章编辑页面中的文本即可。

代码高亮

通过上面步骤的复制粘贴,在wordpress文章中可以正常显示,但是可能会出现一些问题,那就是代码不能够高亮。原因很简单,是因为我们没有相应的css文件。

css代码:

      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

将显示在网页中的css中的代码粘贴到你的wordpress站点即可,至于怎么去粘,粘到哪里,有两种方式。 1、通过自定义css页面将css文件粘到css页面即可。2、在主题编辑中修改.php文件,将相应的代码粘过去即可。

需要注意的是:1、这些代码中有可能与你主题的一些元素发生冲突,如果发生了冲突,我们需要做的就是修改这些代码的作用域即可(css代码的作用域)。2、代码css不全,有些代码没有相应的css,这个只需要去prism.js寻找即可。

公式显示

在决定使用粘贴html源码的时候,曾以为公式的显示应该也是只要css文件就可以,但实际上公式的渲染稍微复杂一些,需要js文件和css文件的配合以及一些基础文件。如果你在vscode中对公式进行了渲染,将渲染好的公式的html文件粘到wordpress文章中的文本中,你会发现:

这没有什么卵用!!!

通过观察正确公式的css代码,你会发现,这些代码都是由js文件和css文件共同产生的,如果直接通过渲染好的html想在你的服务器上产生同样的效果,那是不可能的。

其实有种方法,可以在你的wordpress网站上搭建一个latex公式的服务,将相应的css和js文件上传引用即可,但是这样的话,是不能通过粘贴html的形式来进行文章的直接粘贴。

我的解决方案是,在用VScode编写文章的时候,不去编写公式方面的内容。如果需要公式,将html粘贴过去后。然后在可视化窗口中,利用wordpress中的QuickLatex插件编写相应公式到相应位置就可以了。

我在这个阶段遇到QuickLatex渲染的公式在文章中不能正常显示的问题(比如公式图片偏小,或者位置不对)。解决方法也是通过修改相应的css文件即可,注意不要牵一发而动全身,注意限定作用域!

图片显示

引用图片链接即可,可以使用图窗工具,也可以自己搭建。网上有很多优秀的图云网站,收费或不收费。

总结

这篇文章只是我为了在wordpress比较舒服地写文章的一些方法的尝试。个人认为比较稳定,复杂度也不是很高。与这个相关的测试(图片cdn加速以及公式显示测试)写在最近的文章中了,如果有需要可以看看。

这是我在wordpress上进行写作的方法,希望对大家有帮助。

此文由腾讯云爬虫爬取,文章来源于Oldpan博客

欢迎关注Oldpan博客公众号,持续酝酿深度学习质量文:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI科技大本营的专栏

AI 技术讲座精选:如何利用 Python 读取数据科学中常见几种文件?

前 言 如果你是数据行业的一份子,那么你肯定会知道和不同的数据类型打交道是件多么麻烦的事。不同数据格式、不同压缩算法、不同系统下的不同解析方法——很快就会让你...

3454
来自专栏FreeBuf

伪装在系统PAM配置文件中的同形异义字后门

0x00. 前言 受到FreeBuf早前相关同形异体字攻击文章的启发,故有此文。 目前主流的Linux发行版本都支持Unicode,这也给了利用同形异义字迷惑系...

3299
来自专栏数据和云

盘点 Oracle 11g 中新特性带来的10大性能影响(下)

还记得我们前些天盘点的Oracle 11g 的10大性能影响(上)吗? Oracle的任何一个新版本,总是会带来大量引人瞩目的新特性,但是往往在这些新特性引入之...

3225
来自专栏GopherCoder

专栏:016:功能强大的“图片下载器”

1203
来自专栏沈唁志

如何简单计算PHP网站是否已经最高负载

1455
来自专栏aCloudDeveloper

在word 2010中采用EndNote X7插入引用

本文只供入门操作,记于此以防自己忘记,或帮助走过路过的你解决一时之需,即便是只能帮助到一个人,我的辛苦也就没有白费。 用EndNote向Word中直接插入参考文...

1857
来自专栏magicsoar

python下的Box2d物理引擎的配置

/******************************* I come back! 由于已经大四了,正在找工作 导致了至今以来第二长的时间内没有更新博客...

2306
来自专栏阮一峰的网络日志

全文Feed的终极解决方案

但是,世界上的大部分Feed,都是摘要Feed,甚至是标题Feed。我们只好自己动手,制作全文Feed。

872
来自专栏伪君子的梦呓

用 Python 制作微信好友个性签名词云图

0.前言 上次查看了微信好友的位置信息,想了想,还是不过瘾,于是就琢磨起了把微信好友的个性签名拿到,然后分词,接着分析词频,最后弄出词云图来。 1.环境说明 W...

3689
来自专栏数据小魔方

用R语言抓取网页图片——从此高效存图告别手工时代

今天这个标题实在是有点言过其实了,对于R的爬虫知识,我只是领会了一点儿皮毛。 主要看不懂正则表达式,特别是那种一个括号里要匹配多种类型文本的语句,特像火星文,估...

40111

扫码关注云+社区