saitjr 四月 19, 2015 wordpress No Comments
關(guān)于wordpress的代碼高亮，以前的解決方案著實(shí)讓人哭笑不得。最初為了代碼高亮，直接截圖。然后實(shí)在是受不了了，安裝了代碼高亮插件，但是效果差強(qiáng)人意，樣式太丑，棄用了。最后，將代碼從編輯器復(fù)制到Evernote里面，然后再復(fù)制到wordpress里面，真是累啊。
今天朋友推薦了個css庫，可以直接使用這些css，來進(jìn)行代碼高亮，這是原文地址：
本文，將講解作為一名iOS開發(fā)人員，如何使用xcode風(fēng)格的代碼高亮，以及注意事項(xiàng)。
正文：
首先，下載官方的js與css庫：
然后，將highlight.pack.js上傳到服務(wù)器上（能通過URL訪問即可），然后看到highlight目錄下的style文件夾，里面放的是各種風(fēng)格的代碼高亮樣式。
找到xcode.css，這個樣式是xcode中的default主題風(fēng)格，即白色背景的那種風(fēng)格。但在博客中，白色背景并不友好，一般會給一定的底色，所以，打開xcode.css，對代碼做如下修改：
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #fff; // 將這一行的#fff改為#e9e9e9（淺灰色）
color: black;
-webkit-text-size-adjust: none;
}
上傳的方式與highlight.pack.js一樣，路徑隨便選，只要能訪問到就行。
進(jìn)入wordpress后臺，找到【外觀】->【編輯】，在右側(cè)選擇頂部(header.php)，將以下代碼放到</head>之前。
<link rel="stylesheet" href="上傳的xcode.css路徑">
<script src="上傳的highlight.pack.js路徑"></script>
<script>hljs.initHighlightingOnLoad();</script>
這一步完了以后，還需要關(guān)閉wordpress自帶的pre樣式，否則會與xcode.css中的樣式?jīng)_突。
1. 進(jìn)入wordpress后臺，找到【外觀】->【編輯】，在右側(cè)選擇樣式表(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>
如果需要高亮現(xiàn)實(shí)html或者以'<‘開頭的代碼，如<head>，<?php等，需要對'<‘進(jìn)行轉(zhuǎn)義，否則會被當(dāng)成html代碼解析，導(dǎo)致無法顯示。
如需顯示以'<‘開頭的代碼，將'<‘寫成’<’即可。
