Prism highlight.js高亮代码 手动添加行号 一键复制
文章目录
- 学习链接
- Prism高亮代码（html版）
- 官网下载js和css
- 代码1
- 效果
- 代码2
- 效果
- Prism高亮代码（vue版）
- 基础使用
- 安装prismjs
- vue组件中使用
- 配合babel-plugin-prismjs使用
- 安装prismjs
- 配置babel.config.js
- main.js中引入prismjs
- vue组件中使用
- highlight.js高亮代码（html版本）
- 代码
- 效果
- 原生js实现手动添加行号
- 代码
- 效果
- highlight.js高亮代码（vue版）
- 效果
- 代码
- 安装highlight.js
- vue组件中引入highlight.js 和 主题样式
- ArticleView.vue
- Clipboard.js实现一键复制
- 基础使用
学习链接
漂亮的代码语法高亮插件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>Documenttitle><link rel="stylesheet" href="./prism/prism.css">
head><body><div style="width:500px;margin: 10px auto;"><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>
<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>
<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>Documenttitle><link rel="stylesheet" href="./prism/prism.css">
head><body><div style="width:500px;margin: 10px auto;" id="div1"><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>
<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>
<script src="./prism/prism.js">script>
<script>setTimeout(()=>{$('#div1').append($(`public class Result {private Integer code;private String msg;private T data;}
`))// 会全局注册一个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高亮代码
基础使用
已添加行号插件，未添加复制代码插件的dom示意图
添加行号 和 一键复制插件的dom示意图
安装prismjs
Prism官网上有这部分内容
npm i prismjs
vue组件中使用
- 需要引入prismjs
- 需要引入prismjs的样式
- 需要引入对应的语言，它默认只引入了js、css、markup、clike这几种语言
- 需要使用language-xxx的类名，来指定语言
- 下面还引入了其它的插件的例子：行号插件 和 一键复制插件
<style lang="scss">body {margin: 0;
}/* 整个滚动条 */
::-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;
}/* 滚动条样式，参考： */
/* 滚动条轨道 */
::-webkit-scrollbar-track {background-color: #dbeffd;border-radius: 32px;
}ul,
li {margin: 0;padding: 0;list-style: none;
}.article {width: 800px;margin: 0 auto;margin-top: 50px;.article-content {padding: 15px;border-radius: 5px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);}}
style><template><div class="article "><div id="div01">div><el-button @click="doTest">div01el-button><pre id="pre01" class="language-java"><code class="line-numbers" data-prismjs-copy="复制代码" data-prismjs-copy-success="复制成功" data-prismjs-copy-timeout="1000">
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}code>pre><pre id="pre02" class="line-numbers"><code class="language-java">
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}code>pre><pre id="pre03" class="line-numbers"><code>
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}code>pre><div ref="artcileContentRef" class="article-content" id="article-content" v-html="htmlContent">div>div>
template><script>
import { getArticle } from '@/api/articleApi'/* 引入prismjs */
import prismjs from 'prismjs'
/* 引入样式主题 */
import 'prismjs/themes/prism-okaidia.css'/* 如果要支持高亮java语言的话，需要引入这个，其它的语言需要引入prism-{language}否则，无法处理java语言。 */
import 'prismjs/components/prism-java'; /* 引入行号插件，对应的js和css都要引入, 然后在code或pre上添加line-numbers这个类名就行了 */
import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'import 'prismjs/plugins/toolbar/prism-toolbar.js'
import 'prismjs/plugins/toolbar/prism-toolbar.css'
/* 在引入拷贝到剪贴板这个插件之前，要先引入上面这个prism-toolbar.js和prism-toolbar.css然后，代码的右上角在高亮操作之后，就会出现拷贝代码的按钮，不过是英文的，可以使用data-prismjs-copy等属性修改为中文 */
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.js'console.log(Prism);
console.log(Prism === prismjs); // true 说明它会全局注册一个Prism对象供我们使用/* 输出：// ['manual', 'disableWorkerMessageHandler', 'util', 'languages', 'plugins', 'highlightAll', 'highlightAllUnder', 'highlightElement', 'highlight', 'tokenize', 'hooks', 'Token', 'filename'] */
console.log('Prism', Object.keys(Prism)); const code = `var data = 1;`;
const html = Prism.highlight(code, prismjs.languages.javascript, 'javascript'); // 它默认已经引入了css/javascript，不需要引入js语言
/* 输出：var data = 1; */
console.log(html);const code2 = `SpringApplication.run(VueApp.class);`;
const html2 = Prism.highlight(code2, prismjs.languages.java, 'java'); // 如果未引入java语言，这里会报错：Error: The language "java" has no grammar.
/* 输出： SpringApplication.run(VueApp.class);*/
console.log(html2);export default {name: 'ArticleView2',data() {return {htmlContent: '',content: '',}},created() {getArticle(this.$route.params.articleId).then(data => {this.htmlContent = data.htmlContentthis.$nextTick(()=>{/* 给文章里的代码添加行号，否则只有前面写在html里的code才有行号 */let preBlocks = document.querySelectorAll('pre')preBlocks.forEach(preBlock => {if(!preBlock.classList.contains('line-numbers')) {preBlock.classList.add('line-numbers')}})// 当渲染完成之后，高亮所有代码（注意，只有pre或code里带了language-xxx语言的才会处理）Prism.highlightAll()})})},mounted() {// 虽然在created里面已经发出请求了，这里获取的innerHTML是空的（不要被控制台的打印的this.$refs['artcileContentRef']迷惑了）// 因为上面getArticle是用的Promise，是异步的。所以不能在这里去做高亮的操作。应该在created里面发出请求并且得到响应后的$nextTick中去做高亮操作console.log('articleContentRef',this.$refs['artcileContentRef'],this.$refs['artcileContentRef'].innerHTML);},methods: {doTest() {let div01 = document.querySelector('#div01')div01.innerHTML = `@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}
`// Prism.highlightElement(div01) // 不能传入div01// Prism.highlightElement(document.querySelector('#pre04')) // 不能传入pre,它会把code给删了，虽然代码内容拆了并且样式还在Prism.highlightElement(document.querySelector('#pre04 code'))}},components: {}
}
script>
配合babel-plugin-prismjs使用
文章中的代码，并没有加上行号，是因为没有加上line-numbers这个类名，使用js加上类名就可以了。
安装prismjs
npm install prismjs
配置babel.config.js
在babel.config.js中添加如下插件，其它配置项，可以直接看prism这个包的源码里面找到对应的名字，写在这里就可以了。
module.exports = {presets: ['@vue/cli-plugin-babel/preset'],"plugins": [["prismjs", {"languages": ["javascript", "css", "markup","java", "sql","yml","properties"],"plugins": ["line-numbers","copy-to-clipboard",'previewers'],"theme": "okaidia","css": true}]]
}
main.js中引入prismjs
import Vue from 'vue'
import App from './App.vue'
import router from './router'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';import 'prismjs' // 引入即可，它会注册一个Prism对象到window上面Vue.config.productionTip = falseVue.use(ElementUI);new Vue({router,render: h => h(App)
}).$mount('#app')vue组件中使用
<style lang="scss">body {margin: 0;
}/* 整个滚动条 */
::-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;
}ul,
li {margin: 0;padding: 0;list-style: none;
}.article {width: 800px;margin: 0 auto;margin-top: 50px;.article-content {padding: 15px;border-radius: 5px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16);}}
style><template><div class="article "><div id="div01">div><el-button @click="doTest">div01el-button><pre id="pre01" class="language-java"><code class="line-numbers" data-prismjs-copy="复制代码" data-prismjs-copy-success="复制成功" data-prismjs-copy-timeout="1000">
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {}code>pre><pre id="pre02" class="line-numbers"><code class="language-java">
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}code>pre><pre id="pre03" class="line-numbers"><code>
@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}code>pre><pre class="language-css"><code>div {/* Only the previewer for color and time are enabled */color: red;transition-duration: 1s;/* The previewer for angles is not enabled. */transform: rotate(10deg);
}code>pre><div ref="artcileContentRef" class="article-content" id="article-content" v-html="htmlContent">div>div>
template><script>
import { getArticle } from '@/api/articleApi'export default {name: 'ArticleView2',data() {return {htmlContent: '',content: '',}},created() {console.log(Prism);getArticle(this.$route.params.articleId).then(data => {this.htmlContent = data.htmlContentthis.$nextTick(()=>{Prism.highlightAll()})})},mounted() {},methods: {doTest() {let div01 = document.querySelector('#div01')div01.innerHTML = `@SpringBootApplication
@MapperScan("com.zzhua.mapper")
public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class);}
}
`// Prism.highlightElement(document.querySelector('#pre04')) // 使用这个方法代码有高亮，但没有加行号Prism.highlightAll() // 使用这个方法，有高亮，有行号}},components: {}
}
script>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>Documenttitle><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><script src="./hljs/highlight.min.js">script><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('Hello World!
', { language: 'xml' }).valueconsole.log(html); // 输出：<h1>Hello World!</h1>setTimeout(() => {$('#div1').append($(`public class Result {private Integer code;private String msg;private T data;}
`))// 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实现手动添加行号
参考：B站视频->给你的网页代码框添加一个行号吧！！！
代码
主要的实现思路：使用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>Documenttitle><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/cdn-assets@11.7.0/styles/atom-one-dark.min.css"><script src="//unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js">script><script>window.onload = () => {hljs.highlightAll()/* <span>Hello World!</span> */console.log(hljs.highlightAuto('Hello World!').value); /* <span>Hello World!</span> */console.log(hljs.highlight('Hello World!', {language: 'xml'}).value); let EL_NUMBER_LINE = document.getElementById('number-line')/*打印如下：@SpringBootApplication@MapperScan("com.zzhua.mapper")public class VueApp {public static void main(String[] args) {SpringApplication.run(VueApp.class); SpringApplication.run(VueApp.class);}}*/console.log(document.getElementById('code').childNodes[0].innerHTML);let LINE = document.getElementById('code').childNodes[0].innerHTML.split('\n').lengthconsole.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，具体使用可参考：tocbot生成文章目录
- 使用原生js手动添加了行号，修改了滚动条样式
- 实现代码高亮，注意实现代码高亮其实就是把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 class="article-content" id="article-content" v-html="htmlContent">div><div id="toc-content">div>div>
template><script>
import { getArticle } from '@/api/articleApi'// 引入highlight.js和主题样式
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.htmlContentthis.$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').lengthlet 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>
Clipboard.js实现一键复制
思路：先把要复制的内容用textarea装起来，并用id标识它，然后这个textarea绝对定位，left放很远，top放很远。然后使用一个按钮，按钮的目标id指向这个标识，然后使用clipboard的复制功能即可，可以参考：markdown-it基本使用。
clipboardjs官网
基础使用
JavaScript | 文本复制工具clipboard.js的使用详解（使用clipboard复制ajax请求的数据）
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>target-inputtitle><meta name="viewport" content="width=device-width, initial-scale=1" />head><body> <input id="foo" type="text" value="这是input元素的value值" /><button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制button> <br/><hr/><textarea id="bar">这里的文本可被复制或者剪切textarea><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字button><br/><hr/><div>这是div元素里的文字div><button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字button><br/><hr/><button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字button><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js">script><script>//4. 实例化clipboardvar clipboard = new ClipboardJS('.btn');//5. 复制成功的响应事件【按F12控制台可见】clipboard.on('success', function (e) {console.log(e);//打印动作信息（copy或者cut）console.info('Action:', e.action);//打印复制的文本console.info('Text:', e.text);//打印triggerconsole.info('Trigger:', e.trigger);});//6. 复制失败的响应事件clipboard.on('error', function (e) {console.log(e); console.error('Action:', e.action);console.error('Trigger:', e.trigger);});script>body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！