prism.js——讓網頁中的代碼更好看

時間 2020-08-21

標籤 prism.js prism 網頁代碼更好欄目 JavaScript 简体版

原文原文鏈接

粗放的代碼展現

有時候，網頁中會插入代碼。直接把代碼放入<pre></pre>標籤和<code></code>標籤裏，也算是能夠在頁面中顯示出來。javascript

好比下面這樣的：css

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>直接寫代碼</title>
</head>
<body>
	<pre>
		<code>
			function add(a, b){
				return a + b;
			}
		</code>
	</pre>
</body>
</html>

那麼效果如何呢？以下：html

能夠發現上面這樣是一種很糟糕的效果。java

對比React官網上的代碼展現

對比一下react官網上的代碼展現方式：node

反正我是更喜歡像react官網這樣來展現代碼。react

第一段代碼通過一個神祕的處理以後：微信

這是怎麼處理的呢？源碼變成什麼樣了呢？dom

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用prism美化網頁中的代碼</title>
	<link rel="stylesheet" href="../libaray/prismjs/prism.css">
</head>
<body>
<pre class="line-numbers"><code class="language-javascript">function add(a, b){
	return a + b;
}</code>
</pre>

<script src="../libaray/prismjs/prism.js"></script>
</body>
</html>

能夠看到新的網頁代碼中引入了兩個文件：prism.css和prism.js網站

使用prism.js美化網頁中的代碼

Prism is a lightweight, extensible syntax highlighter.this

Prism是一款輕量的，可擴展的語法高亮處理器。

react、MDN、SitePoint、css-tricks等網站都使用該項目

使用起來特別簡單：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Prism不一樣的使用方式</title>
		<!-- 引入prism.css文件 -->
		<link rel="stylesheet" href="./prism.css">
	</head>
	<body>
		<!-- 放置代碼位置 -->
		<!-- css代碼 -->
		<pre>
			<code class="language-css">
				body{
					background-color: red;
				}
			</code>
		</pre>
		
		<!-- JavaScript代碼 -->
		<!-- 使用行號插件和高亮插件 -->
		<pre>
			<code class="language-javascript line-numbers">
				function Person(name, age){
					this.name = name || 'pelli';
					this.age = age || 18;
				}

				Person.prototype.sayHi = function(){
					console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old');
				};
			</code>
		</pre>

<!-- JavaScript代碼 -->
<!-- 使用行號插件和高亮插件 -->
<pre>
<code class="language-javascript line-numbers">function Person(name, age){
	this.name = name || 'pelli';
	this.age = age || 18;
}

Person.prototype.sayHi = function(){
	console.log('Hi, I am ' + this.name + ', I am ' + this.age + ' years old');
};</code>
</pre>

		<!-- 引入prism.js文件 -->
		<script src="./prism.js"></script>
	</body>
</html>

效果以下：

除了以上介紹的簡單使用方式之外，還可以在node裏面使用，輸出處理好的dom字符串。相關內容，請看官網介紹。

prism.js——讓網頁中的代碼更好看

粗放的代碼展現

對比React官網上的代碼展現

使用prism.js美化網頁中的代碼

相關連接