wordpress代码高亮显示

具体步骤为:

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>
  2. int main()
  3. {
  4.     std::cout << “Hello World!” << std::endl;
  5.     return 0;

『Wordpress』自定义代码高亮

# TODO: 

关于 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;’即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注