Prism & highlight.js高亮代码

学习链接

漂亮的代码语法高亮插件Prism.js简单使用文档
Prism官网

Prism高亮代码(html版)

官网下载js和css

官网下载地址>>

Prism & highlight.js高亮代码_第1张图片

代码1

效果

Prism & highlight.js高亮代码_第2张图片

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的,所以需要在加载完成之后,再高亮代码

效果

Prism & highlight.js高亮代码_第3张图片

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高亮代码

highlight.js -> www.npmjs.com
JS库之Highlight.js高亮代码
highlight.js官网
[ 插件 ] 程序员必备的代码高亮插件 Highlight.JS

你可能感兴趣的:(前端学习,java,mybatis,开发语言)