wordpress代码高亮显示

hotboy920
从写博客到现在，都不记得到底换了多少个代码高亮插件，结果到现在还是没有一个好用的。每个都存在各种问题，有的是不兼容，有的是不再更新，有的是造成博客页面打不开，反正是各种换。现在又找到一种新的方法，本地+网络相结合，不再使用插件，希望能顶住较长一段时间。

具体步骤为：

1，拷贝文件 highlight.css 到主题目录下。

2，在主题头文件 header.php 的 </header>之后，</header> 之前添加：

  1. <link rel=“stylesheet” href=“<?php bloginfo(‘template_url’); ?>/highlight.css” />

3，记住以下两个网站：

在线代码高亮转换

在线C语言格式化

4，在上述两个网站中进行在线转换。将格式化后的代码进行高亮转换，然后复制 html 代码，粘贴到wordpress的文本框，记住一定要粘贴到文本框，最好不要粘贴到可视化框。

5，最后进行字体、字号调整等操作，以免在文本框粘贴时格式符太多，不容易查找粘贴位置。

高亮效果：

转换前：
#include <iostream>

int main()
{
std::cout << “Hello World!” << std::endl;
return 0;
}

转换后：

  1. #include <iostream>
  3. int main()
  4. {
  5.     std::cout << “Hello World!” << std::endl;
  6.     return 0;

『Wordpress』自定义代码高亮

# TODO: 

  code-highlight, 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)，将以下代码放到之前。

<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或者以’<’开头的代码，如，<?php等，需要对’<’进行转义，否则会被当成html代码解析，导致无法显示。

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