logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

wordpress自定义代码高亮 | // TODO:

 草莓和车厘子 2016-09-30

『WordPress』自定义代码高亮

saitjr 四月 19, 2015 wordpress No Comments

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

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

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

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

正文：

一、下载官方库

首先，下载官方的js与css库：

https:///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%;
}

3. 如果代码字体大小或样式不喜欢，可以在将pre下面的code做如下改动：

code, kbd, tt, var {
	font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

4. 删除后，更新文件

六、如何使用

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


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

七、html代码的高亮显示

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

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

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 草莓和车厘子 > 《WordPress》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多