- 对于我这种分享技术博客的人来说，代码高亮是非常需要的
1.png
- 这是我之前的代码高亮，是不是看着脑壳痛😝，是不是挤挤更健康？就是背景布局黑色，代码内容白色
- 后面使用代码高亮插件，这样子可以非常方便渲染任何一种编程语言，包括一些关键字着色，以及代码的缩进等
- 顺便分享一些高性能的JavaScript代码高亮插件，我这里例举一些挺不错的插件(我说的是我感兴趣的)
- Highlight
- 官网：https://highlightjs.org/
- 一个用于在任何WEB页面上高亮着色显示各种示例源代码语法的项目
- 兼容任意js框架，支持多语言混合，支持Node.js
- Prism
- 官网：http://prismjs.com/
- 目前最为轻量级的代码高亮插件
- 支持大部分流行的编程语言，并且支持多种主题样式，开发者只需要引用CSS文件和JS文件即可完成
- 这里我选择了轻量级的Prism代码高亮插件
- 首先在官网下载自己需要的js的插件以及css的样式，比如换行插件等
- 然后下载插件以及样式表
- 引入css样式
<link href="prism.css" rel="stylesheet">- 代码内容部分
- language-后面是语言，我写的是css，直接需要什么语言就改什么语言就行了
<pre class="language-css"><code> .qaqgzsljxh{ position: relative; color: #FF6666; } .qaqgzsljxh::after{ content: ''; width: 100%; height: 2px; position: absolute; top: 100%; left: 0; background-color: currentColor; transform: scale(0); transition:all .3s; } .qaqgzsljxh:hover::after{ transform: scale(1); transform-origin: center; } </code></pre>- 最后再引入插件
<script src="prism.js"></script>- 然后我们再来看一下效果
- 👍完美
【为代码片段添加代码高亮显示】
完结
随机文章
该文章已经关闭评论,评论请前往留言信箱