首页
> 计算机技术
> 前端开发
> 其他
轻量化代码高亮插件Prism使用方法
原创 lihf8515于2025年01月13日 18:36发表
来源:本站 阅读:285
最近，在HTML页面显示源代码文本时需要使用到代码高亮，经过比较，个人感觉Prism这个轻量化的代码高亮插件很好用，用法也很简单。下面讲解具体使用方法。
一、首先访问Prism官网下载相关css文件和js文件，首先引入prism.css
<link rel="stylesheet" href="css/prism.css">
二、在页面最后，引入prism.js
<script src="js/prism.js"></script>
三、用<pre><code>两个标签将要高亮的源代码包裹，其中<pre class="line-numbers">指定类名line-numbers可以在高亮代码前显示行号，<code class="language-js">指定的类名即是源代码使用的语言，如这里的js脚本语言。
<pre class="line-numbers"><code class="language-js">
// 你的JavaScript代码
var str = "Hello, World!";
console.log(str);
</code></pre>
四、下面是完整的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prism代码高亮示例</title>
<link rel="stylesheet" href="css/prism.css">
</head>
<body>
<h1>Prism代码高亮示例</h1>
<br>
<pre class="line-numbers"><code class="language-js">
// 你的JavaScript代码
var str = "Hello, World!";
console.log(str);
</code></pre>
</body>
</html>
<script src="js/prism.js"></script>
阅读排行榜
皖公网安备34130202000765号