使用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>

结果展示：
在这里插入图片描述

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

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

highlight.js和marked.js
提取码：823U

# javascript # 开发语言 # ecmascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

myaifast-1705 麦芽AI 团队不做的 5 件事：开源边界 / 多模型 / 通用助手

我是麦芽AI 创始人陈墨。2025 年 9 月，我写过一篇《麦芽AI 的 3 个非共识设计决策：为什么我们不做"更聪明的 AI"》（myaifast-1605）——那篇讲了3 个我们"不做的决策"。今天这篇文章，更彻底——直接列出 5 件我们"不做"的事不全面开源（只开源 MCP 桥接层）不做模型切换 UI（不做"ChatGPT / Kimi 一键切"）不做通用 AI 助手梦（不做"全能秘书"）不

avatar 2048 AI社区
cover

传统运维能否被 AI 改写？基于 Intel Berkeley 实验室数据的 DolphinDB MCP 实战

avatar 2048 AI社区

M3 Max 96GB 本地部署 Qwen3.6-35B-A3B：打造 SolidWorks 智能机械设计与企业知识库 AI 工作站

目前已经存在针对 Apple Silicon 优化的 MLX 量化版本，例如 Qwen3.6-35B-A3B-OptiQ-4bit，可以直接使用 MLX 运行，无需将模型转换成 GGUF。它采用 MoE（Mixture of Experts）架构，总参数规模约 35B，但每个 Token 实际激活的参数规模约为 3B，因此非常适合 Apple Silicon 本地推理。该版本针对 Apple Si

avatar 2048 AI社区