saitjr 四月 19, 2015 wordpress No Comments
關(guān)于wordpress的代碼高亮，以前的解決方案著(zhù)實(shí)讓人哭笑不得。最初為了代碼高亮，直接截圖。然后實(shí)在是受不了了，安裝了代碼高亮插件，但是效果差強人意，樣式太丑，棄用了。最后，將代碼從編輯器復制到Evernote里面，然后再復制到wordpress里面，真是累啊。
今天朋友推薦了個(gè)css庫，可以直接使用這些css，來(lái)進(jìn)行代碼高亮，這是原文地址：
本文，將講解作為一名iOS開(kāi)發(fā)人員，如何使用xcode風(fēng)格的代碼高亮，以及注意事項。
正文：
首先，下載官方的js與css庫：
然后，將highlight.pack.js上傳到服務(wù)器上（能通過(guò)URL訪(fǎng)問(wèn)即可），然后看到highlight目錄下的style文件夾，里面放的是各種風(fēng)格的代碼高亮樣式。
找到xcode.css，這個(gè)樣式是xcode中的default主題風(fēng)格，即白色背景的那種風(fēng)格。但在博客中，白色背景并不友好，一般會(huì )給一定的底色，所以，打開(kāi)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一樣，路徑隨便選，只要能訪(fǎng)問(wèn)到就行。
進(jìn)入wordpress后臺，找到【外觀(guān)】->【編輯】，在右側選擇頂部(header.php)，將以下代碼放到</head>之前。
<link rel="stylesheet" href="上傳的xcode.css路徑">
<script src="上傳的highlight.pack.js路徑"></script>
<script>hljs.initHighlightingOnLoad();</script>
這一步完了以后，還需要關(guān)閉wordpress自帶的pre樣式，否則會(huì )與xcode.css中的樣式?jīng)_突。
1. 進(jìn)入wordpress后臺，找到【外觀(guān)】->【編輯】，在右側選擇樣式表(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做如下改動(dòng)：
code, kbd, tt, var {
font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
4. 刪除后，更新文件
在需要插入代碼的地方，將wordpress的富文本編輯器從【可視化】切換到【文本】，然后使用以下代碼包住需要顯示的代碼
<pre><code class='html'> // 需要什么語(yǔ)言，class中就寫(xiě)什么語(yǔ)言，不清楚可以看官方文檔
// 放的代碼，如
<head></head>
</code></pre>
如果需要高亮現實(shí)html或者以'<‘開(kāi)頭的代碼，如<head>，<?php等，需要對'<‘進(jìn)行轉義，否則會(huì )被當成html代碼解析，導致無(wú)法顯示。
如需顯示以'<‘開(kāi)頭的代碼，將'<‘寫(xiě)成’<’即可。
聯(lián)系客服
