文章目录
学习链接
漂亮的代码语法高亮插件Prism.js简单使用文档
Prism官网
Prism高亮代码（html版）
官网下载js和css
代码1
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入prism.css -->
<link rel="stylesheet" href="./prism/prism.css">
</head>
<body>
<div style="width:500px;margin: 10px auto;">
<!-- 一定要满足下面代码的dom结构，然后，再引入从prism官网下载的js -->
<!-- 试了一下：将language-语言, 加在pre这个标签里面也是可以的; 将line-numbers加在code这个标签里也是可以的，都是一样的效果 -->
<pre class="line-numbers">
<code class="language-css">p { color: red }</code>
</pre>
<pre>
<code class="language-java">
package com.zzhua;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {
public static void main(String[] args) {
SpringApplication.run(VueApp.class);
}
}
</code>
</pre>
</div>
</body>
<!-- 引入jquery操作dom -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
// 使用代码添加行号(这里是使用jquery给所有的 pre标签 加上 line-number 这个类名，也可以如上面自己手动加入这个类名)，然后，再去引入prism.js，让prism生成行号相关的dom结构出来
$('pre').each(function () {
$(this).addClass('line-numbers');
})
</script>
<!-- 让prism.js处理代码高亮 -->
<script src="./prism/prism.js"></script>
</html>
代码2
但通常使用这个插件的时候，是通过异步加载数据再渲染成html的，所以需要在加载完成之后，再高亮代码
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入prism.css -->
<link rel="stylesheet" href="./prism/prism.css">
</head>
<body>
<div style="width:500px;margin: 10px auto;" id="div1">
<!-- 一定要满足下面代码的dom结构，然后，再引入从prism官网下载的js -->
<!-- 试了一下：将language-语言, 加在pre这个标签里面也是可以的; 将line-numbers加在code这个标签里也是可以的，都是一样的效果 -->
<pre class="line-numbers">
<code class="language-css">p { color: red }</code>
</pre>
<pre>
<code class="language-java">
package com.zzhua;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {
public static void main(String[] args) {
SpringApplication.run(VueApp.class);
}
}
</code>
</pre>
</div>
</body>
<!-- 引入jquery操作dom -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
// 使用代码添加行号(这里是使用jquery给所有的 pre标签 加上 line-number 这个类名，也可以如上面自己手动加入这个类名)，然后，再去引入prism.js，让prism生成行号相关的dom结构出来
$('pre').each(function () {
$(this).addClass('line-numbers');
})
</script>
<!-- 让prism.js处理代码高亮 -->
<script src="./prism/prism.js"></script>
<!-- 让prism.js处理代码高亮 -->
<script>
setTimeout(()=>{
$('#div1').append($(`
<pre class="line-numbers">
<code class="language-java">
public class Result {
private Integer code;
private String msg;
private T data;
}
</code>
</pre>
`))
// 会全局注册一个Prism对象，里面有方法：highlight、highlightAll、highlightElement、highlightAllUnder等书方法
console.log(Prism)
// Prism.highlightAll(); // 也可以这样
let blocks = document.querySelectorAll("pre code");
blocks.forEach((block) => {
Prism.highlightElement(block);
});
}, 2000)
</script>
</html>
Prism高亮代码（vue版）
Vue页面代码高亮展示之Prism语法高亮工具
Vue中使用Prism来显示代码高亮
babel-plugin-prismjs -> www.npmjs.com
Nuxt3中使用prismjs高亮代码
highlight.js高亮代码（html版本）
highlight.js -> www.npmjs.com
JS库之Highlight.js高亮代码
程序员必备的代码高亮插件 Highlight.JS
highlight.js官网
1. 发现highlight.js官网下面的原来可以直接点击选择语言和主题，实时预览效果的阿
2. 在线选字体，使用在线链接：谷歌在线字体
也可以试试：highlight.js中文网，也可以在线预览效果的
代码
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<style>
.box {
width: 500px;
margin: 10px auto;
}
pre code.hljs {
display: block;
padding: 0;
overflow-x: auto;
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 400;
}
</style>
<!-- 可以直接引入cdn -->
<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> -->
<!-- 可以在官网下载 -->
<script src="./hljs/highlight.min.js"></script><!-- 导入这个highlight.min.js，不要导入highlight.js，不然还要注册语言，有点麻烦 -->
<link rel="stylesheet" href="./hljs/styles/atom-one-dark.min.css">
<script>
window.onload = function () {
// 它会在全局注册一个hljs，里面有highlightAll、highlightElement、highlightBlock、highlight等方法
console.log(hljs);
hljs.highlightAll()
html = hljs.highlight('<h1>Hello World!</h1>', {
language: 'xml' }).value
console.log(html); // 输出：<span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
setTimeout(() => {
$('#div1').append($(`<pre><code>
public class Result {
private Integer code;
private String msg;
private T data;
}
</code>
</pre>`))
// hljs.highlightAll() // 也可以这样
let blocks = document.querySelectorAll("pre code");
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
}, 1000)
}
</script>
</head>
<body>
<div class="box">
<pre>
<code class="language-java">
package com.zzhua;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {
public static void main(String[] args) {
SpringApplication.run(VueApp.class);
}
}
</code>
</pre>
<div id="div1"></div>
</div>
</body>
</html>
原生js实现手动添加行号
代码
主要的实现思路：使用highlight.js给pre code添加高亮后，获取code标签下的所有html，在这个html里面，行与行之间有换行符的存在，按换行符分割，创建li，把行号添加进去，塞到ul里面，然后，使用定位把行号定到左边去。滚动条的样式是固定代码。
以下代码的资源代码都是在线的，可以随时复制粘贴测试使用，比较方便，这个字体也是在线的，可能要翻墙才能用吧
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 整个滚动条 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条上的滚动滑块,参考： 滚动条样式修改->https://blog.csdn.net/coder_jxd/article/details/124213962 */
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
/* 关键代码 */
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent);
border-radius: 32px;
}
/* 添加行号插件后，它默认把滚动条给覆盖了，所以将padding-left改成margin-left */
[class*=v-md-prism-] {
margin-left: 72px !important;
padding-left: 0 !important;
}
/* 滚动条样式，参考： */
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #dbeffd;
border-radius: 32px;
}
* {
margin: 0;
padding: 0;
font-size: 18px;
font-family: 'Dancing Script';
list-style: none;
}
body {
height: 100vh;
padding-top: 10px;
}
#code-box {
width: 500px;
border-radius: 6px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
#code {
padding-left: 61px;
background-color: #282c34;
}
#number-line {
position: absolute;
color: #cdcdcd;
padding: 0px 15px 18px 10px;
text-align: right;
width: 30px;
margin-top: 18px;
font-size: 14px;
font-family: 'Courier New', Courier, monospace;
border-right: 1px solid #7d7d7d;
}
</style>
<link rel="stylesheet" href="//unpkg.com/@highlightjs/[email protected]/styles/atom-one-dark.min.css">
<script src="//unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script>
window.onload = () => {
hljs.highlightAll()
/* <<span class="hljs-selector-tag">span</span>>Hello World!</<span class="hljs-selector-tag">span</span>> */
console.log(hljs.highlightAuto('<span>Hello World!</span>').value);
/* <span class="hljs-tag"><<span class="hljs-name">span</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">span</span>></span> */
console.log(hljs.highlight('<span>Hello World!</span>', {
language: 'xml'}).value);
let EL_NUMBER_LINE = document.getElementById('number-line')
/*
打印如下：
<span class="hljs-variable">@SpringBootApplication</span>
<span class="hljs-variable">@MapperScan</span>(<span class="hljs-string">"com.zzhua.mapper"</span>)
public class VueApp {
<span class="hljs-selector-tag">public</span> <span class="hljs-selector-tag">static</span> <span class="hljs-selector-tag">void</span> <span class="hljs-selector-tag">main</span>(String[] args) {
<span class="hljs-selector-tag">SpringApplication</span><span class="hljs-selector-class">.run</span>(VueApp.class); <span class="hljs-selector-tag">SpringApplication</span><span class="hljs-selector-class">.run</span>(VueApp.class);
}
}
*/
console.log(document.getElementById('code').childNodes[0].innerHTML);
let LINE = document.getElementById('code').childNodes[0].innerHTML.split('\n').length
console.log(LINE);
for (let i = 1; i <= LINE; i++) {
let li = document.createElement('li')
let lineNum = document.createTextNode(i)
li.appendChild(lineNum)
EL_NUMBER_LINE.appendChild(li)
}
}
</script>
</head>
<body>
<div id="code-box">
<ul id="number-line"></ul>
<pre id="code"><code>@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {
public static void main(String[] args) {
SpringApplication.run(VueApp.class); SpringApplication.run(VueApp.class);
}
}</code></pre>
</div>
</body>
</html>
highlight.js高亮代码（vue版）
效果
-
原文内容是通过WangEditor编辑保存的，可以参考：WangEdtior富文本编辑器
-
目录用的tocbot，还没怎么会用这个玩意
-
手动添加了行号，修改了滚动条样式
-
实现代码高亮，注意实现代码高亮其实就是把code标签里的代码让highlight.js处理后，然后使用highlight.js提供的主题样式加花里胡哨的颜色。
代码
安装highlight.js
npm install highlight.js
vue组件中引入highlight.js 和 主题样式
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'
ArticleView.vue
<style lang="scss">
@import 'tocbot/src/scss/tocbot';
@import url('https://fonts.font.im/css?family=Roboto');
/* 整个滚动条 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/* 滚动条上的滚动滑块,参考： 滚动条样式修改->https://blog.csdn.net/coder_jxd/article/details/124213962 */
::-webkit-scrollbar-thumb {
background-color: #49b1f5;
/* 关键代码 */
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent);
border-radius: 32px;
}
/* 添加行号插件后，它默认把滚动条给覆盖了，所以将padding-left改成margin-left */
[class*=v-md-prism-] {
margin-left: 72px !important;
padding-left: 0 !important;
}
/* 滚动条样式，参考： */
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #dbeffd;
border-radius: 32px;
}
.article {
width: 600px;
margin: 10px auto;
.article-content {
width: 725px;
padding: 15px;
// border: 1px solid red;
border-radius: 5px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
}
#toc-content {
position: fixed;
top: 20px;
right: 50px;
}
}
/* 行号相关样式 */
pre {
background-color: #282c34;
border-radius: 6px;
position: relative;
.line-numbers {
position: absolute;
color: #e0e0e0;
font-size: 16px;
margin: 16px 0;
padding-right: 10px;
width: 30px;
text-align: right;
font-family: 'Roboto', sans-serif;
border-right: 1px solid #c5c5c5;
}
}
code {
font-family: 'Roboto', sans-serif;
border-radius: 6px;
padding-left: 0 !important;
margin-left: 3em !important;
}
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
</style>
<template>
<div class="article">
<!-- <div style="height: 500px;"> </div> -->
<div class="article-content" id="article-content" v-html="htmlContent"></div>
<div id="toc-content"></div>
</div>
</template>
<script>
import {
getArticle } from '@/api/articleApi'
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'
console.log(hljs);
import tocbot from 'tocbot'
console.log('tocbot', tocbot);
export default {
name: 'Article',
data() {
return {
htmlContent: ''
}
},
created() {
getArticle(this.$route.params.articleId).then(data => {
this.htmlContent = data.htmlContent
this.$nextTick(() => {
// console.log('$nextTick...');
let articleContent = document.querySelector('#article-content')
let headingTag = ['h1', 'h2', 'h3']
let children = Array.from(articleContent.children)
for (let i = 0; i < children.length; i++) {
const e = children[i];
e.id = `h-${
i}`
}
hljs.highlightAll()
let codes = document.querySelectorAll('code')
console.log(codes);
for (let i = 0; i < codes.length; i++) {
const codeBlock = codes[i];
// console.log(codeBlock.innerHTML);
let lineTotal = codeBlock.innerHTML.split('\n').length
let ul = document.createElement('ul')
ul.classList.add('line-numbers')
for (let i = 1; i <= lineTotal; i++) {
let li = document.createElement('li')
let lineNum = document.createTextNode(i)
li.appendChild(lineNum)
ul.appendChild(li)
}
codeBlock.parentNode.prepend(ul)
}
tocbot.init({
// Where to render the table of contents.
tocSelector: '#toc-content',
// Where to grab the headings to build the table of contents.
contentSelector: '#article-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3, h4, h5, h6',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: true,
});
})
})
},
mounted() {
// console.log('mounted');
},
components: {
}
}
</script>