【前端】向blog或網站中添加語法高亮顯示代碼方法總結

時間 2019-11-10

標籤前端 blog 網站添加語法顯示代碼方法總結欄目網站開發简体版

原文原文鏈接

向blog或網站中添加語法高亮顯示的代碼方法總結javascript

文章目錄css

預備知識

目標

第一類方法：嵌入

第二類方法：外部引用

第三類方法：忽略HTML和PHP

　　最近在寫代碼時遇到一個問題，就是如何讓代碼像在IDE或專業編譯器同樣可以高亮顯示在網頁或博客中（以下圖顯示），上網查了不少資料，下面是我對學習到的方法的概括總結。html

　　下面的方法基本上都是利用第三方javascript插件實現的，所以沒必要擔憂方法有多難，只要拿過來使用就能夠了。在講述方法以前先介紹一下與之條件：java

預備知識git

HTML和CSS的基本知識

目標github

在博客或網頁中讓嵌入代碼高亮顯示.
在Wordpress中自動忽略HTML和PHP代碼.

　　方法主要有兩類，一種是引入第三方的JavaScript和高亮語法插件，讓pre和code標籤中的代碼高亮顯示，另外一種方法是直接嵌入主流網站的語法代碼。瀏覽器

第一類方法：嵌入async

　　嵌入方式是最方便快捷的，不少網站都提供了代碼導出的功能，它能夠自動引入專業網站的高亮代碼顯示方式，美觀大方。wordpress

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.