向blog或網站中添加語法高亮顯示的代碼方法總結
文章目錄
- 預備知識
- 目標
- 第一類方法：嵌入
- 第二類方法：外部引用
- 第三類方法：忽略HTML和PHP
最近在寫代碼時遇到一個問題，就是如何讓代碼像在IDE或專業編譯器一樣能夠高亮顯示在網頁或博客中（如下圖顯示），上網查了很多資料，下面是我對學習到的方法的歸納總結。
下面的方法基本上都是利用第三方javascript插件實現的，因此不必擔心方法有多難，只要拿過來使用就可以了。在講述方法之前先介紹一下與之條件：
預備知識
- HTML和CSS的基本知識
目標
- 在博客或網頁中讓嵌入代碼高亮顯示.
- 在Wordpress中自動忽略HTML和PHP代碼.
方法主要有兩類，一種是引入第三方的JavaScript和高亮語法插件，讓pre和code標簽中的代碼高亮顯示，另一種方法是直接嵌入主流網站的語法代碼。
第一類方法：嵌入
嵌入方式是最方便快捷的，很多網站都提供了代碼導出的功能，它可以自動引入專業網站的高亮代碼顯示方式，美觀大方。
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>github代碼嵌入</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<style type="text/css">
div{
margin: 8px;
}
</style>
</head>
<body>
<h1>github代碼嵌入</h1>
<div>
<script src="https://gist.github.com/dragonir/b3b43d791c259b597907069020f4b754.js"></script>
</div>
</body>
</html>
實現效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>codepen代碼嵌入</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
</head>
<body>
<h1>Codepen代碼嵌入</h1>
<pre>
<p data-height="265" data-theme-id="dark" data-slug-hash="MogbxY" data-default-tab="result" data-user="dragonir" data-embed-version="2" data-pen-title="MogbxY" class="codepen">See the Pen <a href="https://codepen.io/dragonir/pen/MogbxY/">MogbxY</a> by dragonir (<a href="https://codepen.io/dragonir">@dragonir</a>) on <a href="https://codepen.io">CodePen</a>.</p>
</pre>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
實現效果：
第二類方法：JavaScript高亮插件
通過引入代碼高亮顯示插件，同樣可以實現博客以及其他網站嵌入代碼的高亮顯示，以下是幾種主流的方法。我只展示了基本的使用方法，想詳細了解使用方法和接口，可以點擊鏈接到官網。
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>網頁嵌入代碼語法高亮</title>
<meta charset="utf-8">
<!--
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
-->
<link rel="stylesheet" type="text/css" href="./highlight/styles/railscasts.css">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<script src="./highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Highlight.js</h1>
<pre>
<code class="javascript">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre>
</body>
</html>
實現效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>prism.js</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<link rel="stylesheet" type="text/css" href="./prism/prism.css">
<script src="./prism/prism.js"></script>
</head>
<body>
<h1>prism.js</h1>
<pre>
<code class="language-javascript">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre>
</body>
</html>
實現效果：
使用方法：
<!DOCTYPE html>
<html>
<head>
<title>prettify.js</title>
<meta charset="utf-8">
<!--
Include the script tag below in your document:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
See Getting Started to configure that URL with options you need.
Look at the skin gallery and pick styles that suit you.
-->
<!--
Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed.
-->
<link rel="stylesheet" type="text/css" href="./assets/css/algorithm.css">
<script src="./prettify/loader/run_prettify.js"></script>
</head>
<body>
<h1>prettify.js</h1>
<pre>
<code class="prettyprint">
function selectionSort(arr){
var minIndex, temp, len = arr.length;
for(var i=0; i < len; i++){
minIndex = i;
for(var j=i+1; j < len; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
var num = new Array;
num = [1,5,2,8,4,9,3,0,4];
console.log(selectionSort(num));
</code>
</pre>
</body>
</html>
實現效果：
第三類方法：忽略HTML和PHP
為了顯示HTML和PHP代碼，瀏覽器必須要將顯示的代碼自動忽略，你可以使用在線轉換工具 Free Online HTML Escape Tool來轉換你需要顯示的HTML代碼。如果你是用的博客是wordPress的博客，WordPress plugin 可以實現此功能，但是它無法和Prism.js同時使用。
總結
現在就在你的博客或網站中嵌入好看的代碼吧，如果你想了解更多有用的WordPress的功能，推薦訪問this is the resource for you.
轉載請標明出處：http://www.cnblogs.com/dragonir/p/7426965.html，作者：Dragonir ，歡迎轉載。