語法高亮 Prism.js——讓網頁中的源代碼更好看
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
粗放的代碼展示有時候，網頁中會插入代碼。直接把代碼放入 比如下面這樣的： <!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>那么效果如何呢？如下：
可以發現上面這樣是一種很糟糕的效果。 對比React官網上的代碼展示對比一下react官網上的代碼展示方式：
反正我是更喜歡像react官網這樣來展示代碼。 第一段代碼經過一個神秘的處理之后：
這是怎么處理的呢？源碼變成什么樣了呢？ <!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.js美化網頁中的代碼Prism is a lightweight, extensible syntax highlighter. 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字符串。相關內容，請看官網介紹。 相關鏈接該文章在 2024/3/29 10:22:15 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
