使用highlight.js和marked.js格式代码和高亮代码-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_06593/article/details/142399879

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

使用highlight.js和marked.js格式代码和高亮代码项目地址: https://gitcode.com/Resource-Bundle-Collection/e142d

本仓库提供了一个资源文件，用于帮助开发者在使用highlight.js和marked.js时格式化代码并实现代码高亮。通过结合这两个工具，您可以轻松地在网页中展示格式化的代码，并使其具有语法高亮效果。

功能介绍

代码格式化：使用marked.js将Markdown格式的代码转换为HTML格式，便于在网页中展示。
代码高亮：通过highlight.js为代码块添加语法高亮，提升代码的可读性。

使用方法

引入依赖：在您的项目中引入highlight.js和marked.js库。
配置marked.js：使用marked.js解析Markdown代码，并将其转换为HTML格式。
应用highlight.js：在转换后的HTML代码中应用highlight.js，实现代码高亮效果。

示例代码

以下是一个简单的示例，展示了如何使用highlight.js和marked.js来格式化和高亮代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/highlight.js/styles/default.min.css">
    <script src="path/to/highlight.js/highlight.min.js"></script>
    <script src="path/to/marked.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        const markdown = `
        # 示例代码
        \`\`\`javascript
        function helloWorld() {
            console.log('Hello, World!');
        }
        \`\`\`
        `;

        const html = marked.parse(markdown);
        document.getElementById('content').innerHTML = html;
        hljs.highlightAll();
    </script>
</body>
</html>