『WordPress』自定义代码高亮

关于wordpress的代码高亮,以前的解决方案着实让人哭笑不得。最初为了代码高亮,直接截图。然后实在是受不了了,安装了代码高亮插件,但是效果差强人意,样式太丑,弃用了。最后,将代码从编辑器复制到Evernote里面,然后再复制到wordpress里面,真是累啊。

今天朋友推荐了个css库,可以直接使用这些css,来进行代码高亮,这是原文地址:

http://archerzz.ninja/ios/code-highlight.html

本文,将讲解作为一名iOS开发人员,如何使用xcode风格的代码高亮,以及注意事项。

正文:

一、下载官方库

首先,下载官方的js与css库:

https://highlightjs.org/download/

然后,将highlight.pack.js上传到服务器上(能通过URL访问即可),然后看到highlight目录下的style文件夹,里面放的是各种风格的代码高亮样式。

二、修改xcode.css样式

找到xcode.css,这个样式是xcode中的default主题风格,即白色背景的那种风格。但在博客中,白色背景并不友好,一般会给一定的底色,所以,打开xcode.css,对代码做如下修改:


.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fff; // 将这一行的#fff改为#e9e9e9(浅灰色)
  color: black;
  -webkit-text-size-adjust: none;
}

三、上传xcode.css

上传的方式与highlight.pack.js一样,路径随便选,只要能访问到就行。

四、在wordpress中引入上传的文件

进入wordpress后台,找到【外观】->【编辑】,在右侧选择顶部(header.php),将以下代码放到</head>之前。


<link rel="stylesheet" href="上传的xcode.css路径">
<script src="上传的highlight.pack.js路径"></script>
<script>hljs.initHighlightingOnLoad();</script>

五、关闭wordpress默认pre样式

这一步完了以后,还需要关闭wordpress自带的pre样式,否则会与xcode.css中的样式冲突。

  1. 进入wordpress后台,找到【外观】->【编辑】,在右侧选择样式表(style.css);

  2. 全局搜索pre,找到以下代码并删除(如果怕删错,可以先备份):


pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
    padding: 1em;
    overflow: auto;
    max-width: 100%;
}

  1. 如果代码字体大小或样式不喜欢,可以在将pre下面的code做如下改动:
code, kbd, tt, var {
    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

  1. 删除后,更新文件

六、如何使用

在需要插入代码的地方,将wordpress的富文本编辑器从【可视化】切换到【文本】,然后使用以下代码包住需要显示的代码


<pre><code class='html'> // 需要什么语言,class中就写什么语言,不清楚可以看官方文档
// 放的代码,如
<head></head>
</code></pre>

七、html代码的高亮显示

如果需要高亮现实html或者以'<‘开头的代码,如<head>,<?php等,需要对'<‘进行转义,否则会被当成html代码解析,导致无法显示。

如需显示以'<‘开头的代码,将'<‘写成’&lt;’即可。

发表评论

电子邮件地址不会被公开。