prism.js渲染让页面代码更漂亮，加深代码

最新推荐文章于 2024-09-03 08:45:56 发布

木子李ll

最新推荐文章于 2024-09-03 08:45:56 发布

阅读量725

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_43209524/article/details/127330228

版权

基本信息
官网：https://prismjs.com/
Github：https://github.com/PrismJS/prism
npm：https://www.npmjs.com/package/prismjs

有时候，网页中会插入代码。直接把代码放入<pre></pre>标签和<code></code>标签里，也算是可以在页面中显示出来。

在这里插入图片描述

可以发现上面这样是一种很糟糕的效果。

在这里插入图片描述

如果我们使用prism.js后就美观很多

我们可以去prism.js官网下载自己需要语言的样式包
链接：https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+go+java+markup-templating+php+plsql+sql

在这里插入图片描述

选完成以后下载对应的文件

`使用方法常规 <script> 标签引入直接引入即可，具体见下面：`

// 引入资源
<link rel="stylesheet" href="../prismjs/prism.css">
<script src="../prismjs/prism.js"></script>


// 以下是具体代码
<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>