日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

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開發(fā)人員，如何使用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代碼解析，導致無法顯示。

如需顯示以'<‘開頭的代碼，將'<‘寫成’<’即可。

    本站是提供個人知識管理的網絡存儲空間，所有內容均由用戶發(fā)布，不代表本站觀點。請注意甄別內容中的聯系方式、誘導購買等信息，謹防詐騙。如發(fā)現有害或侵權內容，請點擊一鍵舉報。
    轉藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多