標籤：實現 推薦 pac 使用 efault att play href 效果
向blog或網站中添加文法高亮顯示的代碼方法總結
文章目錄
- 預備知識
- 目標
- 第一類方法：嵌入
- 第二類方法：外部參考
- 第三類方法：忽略HTML和PHP
最近在寫代碼時遇到一個問題，就是如何讓代碼像在IDE或專業編譯器一樣能夠高亮顯示在網頁或部落格中（如顯示），上網查了很多資料，下面是我對學習到的方法的歸納總結。
下面的方法基本上都是利用第三方javascript外掛程式實現的，因此不必擔心方法有多難，只要拿過來使用就可以了。在講述方法之前先介紹一下與之條件：
預備知識
目標
方法主要有兩類，一種是引入第三方的JavaScript和高亮文法外掛程式，讓pre和code標籤中的代碼高亮顯示，另一種方法是直接嵌入主流網站的文法代碼。
第一類方法：嵌入
嵌入方式是最方便快捷的，很多網站都提供了代碼匯出的功能，它可以自動引入專業網站的高亮代碼顯示方式，美觀大方。
GitHub gist
使用方法：
<!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>
實現效果：
Codepen pen
使用方法：
<!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高亮外掛程式
通過引入代碼高亮顯示外掛程式，同樣可以實現部落格以及其他網站內嵌程式碼的高亮顯示，以下是幾種主流的方法。我只展示了基本的使用方法，想詳細瞭解使用方法和介面，可以點選連結到官網。
Highlight.js
使用方法：
<!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>
實現效果：
Prism.js.
使用方法：
<!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>
實現效果：
Google Prettify
使用方法：
<!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 ，歡迎轉載。
【前端】向blog或網站中添加文法高亮顯示代碼方法總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
