使用highlight.js和marked.js格式代码和高亮代码

港控/mmm° 2023-10-14 18:39 28阅读 0赞

#### 使用highlight.js和marked.js格式代码和高亮代码 ####

###### highlight.js是什么？ ######

highlight.js 是一个语法高亮的 JavaScript 库，它可以帮助开发者轻松地为他们的网站或 Web 应用程序添加语法高亮功能。它支持多种编程语言，并提供各种主题和自定义选项。它可以集成到网页中，使代码块更加易于阅读和理解。

###### marked.js是什么? ######

marked.js 是一个用于转换 Markdown 语法为 HTML 的 JavaScript 库。它提供了简单易用的接口，使开发者可以将 Markdown 文本转换成 HTML 格式，从而在网页上渲染和显示。marked.js 兼容大多数的 Markdown 语法规范，并支持自定义扩展和插件。它可以在前端和后端环境中使用，是一个流行的 Markdown 转换库。

##### 使用它们配合生成和csdn一样的代码块 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="highlight.js"></script>
        <script src="marked.min.js"></script>
        <link rel="stylesheet" href="highlight.css">
    </head>
    <body>
        <textarea id="textarea1">  //找来的代码片段
            public class BubbleSort {
                public static void bubbleSort(int[] arr) {
                    int n = arr.length;
                    for (int i = 0; i < n - 1; i++) {
                        for (int j = 0; j < n - i - 1; j++) {
                            if (arr[j] > arr[j + 1]) {
                                // 交换位置
                                int temp = arr[j];
                                arr[j] = arr[j + 1];
                                arr[j + 1] = temp;
                            }
                        }
                    }
                }
    
                public static void main(String[] args) {
                    int[] arr = {64, 34, 25, 12, 22, 11, 90};
                    System.out.println("排序前的数组：");
                    for (int num : arr) {
                        System.out.print(num + " ");
                    }
    
                    bubbleSort(arr);
    
                    System.out.println("\n排序后的数组：");
                    for (int num : arr) {
                        System.out.print(num + " ");
                    }
                }
            }
        </textarea>
        <button onclick="zhuanhuan()">转换</button>
        <div id="box" style="background-color: #454444;"></div>
    </body>
        <script>
       		//初始化高亮d代码
            hljs.highlightAll();
    
            //markdown解析，代码高亮设置
            marked.setOptions({
          
                highlight: function (code, language) {
          
                    const validLanguage = hljs.getLanguage(language) ? language : 'javascript';
                    return hljs.highlight(code, {
          language: validLanguage}).value;
                },
            });
    
    		//点击
            function zhuanhuan(){
          
            	//获取textarea值
                var text = document.getElementById("textarea1").value
                console.log(text)
                //转换为marked格式并且显示在页面
                var text = document.getElementById("box").innerHTML = marked(text)
    
            }
        </script>
    </html>

结果展示：  
![在这里插入图片描述][1555089b28ab41098cfd95b43e4c0af8.png_pic_center]

代码块样式很丑，但可以自己去官网探索，码块的样式风格可以更改,可以去官网地址查看：[https://highlightjs.org/static/demo/  
][https_highlightjs.org_static_demo_]

#### highlight.js和marked.js资源文件分享 ####

[highlight.js和marked.js][highlight.js_marked.js]  
提取码：823U

[1555089b28ab41098cfd95b43e4c0af8.png_pic_center]: https://img-blog.csdnimg.cn/1555089b28ab41098cfd95b43e4c0af8.png#pic_center
[https_highlightjs.org_static_demo_]: https://highlightjs.org/static/demo/
[highlight.js_marked.js]: https://pan.baidu.com/s/1ZtgiNq74c5Bvu6lBu6FTfw