引言

在前端和后端开发中，我们经常需要处理代码高亮和Markdown渲染的需求。"highlight.js" 和 "markdown-it" 库是两个在这方面表现出色的工具。本文将深入探讨它们的使用方法、特点，以及如何结合它们让我们的代码和文档更为生动。

"highlight.js" 简介

1. 什么是 "highlight.js"？

"highlight.js" 是一个轻量级的语法高亮库，支持多种编程语言，能够在网页中将代码块着色，使其更易读。它广泛应用于各类文档和博客中，为代码展示提供了良好的用户体验。

2. 特点与用法 

  • 简单易用： 通过引入 "highlight.js" 的样式和脚本文件，即可快速实现代码高亮。

  • 支持多种语言： 提供了丰富的语法高亮支持，涵盖了常见的编程语言。

  • 自动检测： 可以自动检测页面中的 <pre><code> 标签，并对其中的代码块进行高亮处理。

示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="path/to/styles/default.css">
    <script src="path/to/highlight.pack.js"></script>
</head>
<body>
    <pre><code class="javascript">
        function greet() {
            console.log("Hello, world!");
        }
    </code></pre>

    <script>
        hljs.initHighlightingOnLoad();
    </script>
</body>
</html>

"markdown-it" 库简介

1. 什么是 "markdown-it"？

"markdown-it" 是一款轻量级的Markdown解析器，用于将Markdown文本转换为HTML。它支持标准的Markdown语法，并提供了插件系统，使得我们可以方便地扩展其功能。

2. 特点与用法

  • 标准兼容： 严格遵循Markdown标准，保证解析结果的一致性。
  • 插件支持： 具备强大的插件系统，可以根据需求灵活添加各种功能。
  • 易扩展： 使用简单，同时支持自定义规则，满足不同项目的需求。
const md = require('markdown-it')();

const result = md.render('# Hello, *world*!');
console.log(result);

 

结合使用 "highlight.js" 和 "markdown-it"

1. 安装和配置

首先，通过 npm 安装两个库：

npm install highlight.js markdown-it

const hljs = require('highlight.js');
const md = require('markdown-it')({
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(lang, str).value;
            } catch (__) {}
        }

        return ''; // 使用额外的默认转义
    }
});

 2. 结合使用

const markdownText = `
# Code Highlighting Example

\`\`\`javascript
function greet() {
    console.log("Hello, world!");
}
\`\`\`
`;

const result = md.render(markdownText);
console.log(result);

结语

"highlight.js" 和 "markdown-it" 是前端和后端开发中优秀的工具，它们为代码高亮和Markdown渲染提供了强大的支持。通过本文的介绍，希望读者能够更深入地了解它们的用法，并在实际项目中灵活运用，使得代码和文档更为生动有趣。如有疑问或建议，欢迎在评论区留言。

# 前端 # javascript # html
Logo
2048 AI社区

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

更多推荐

上下文工程驱动

但即便是最聪明的人，如果不清楚自己要做的事情的上下文，也很难给出令人满意的交付。两款产品可能在做完全相同的事情，一款给人感觉充满魔力，但另一款却像个廉价的演示品。技术术语的更迭，不仅是语言表达的更替，更代表着思维范式的转变。上下文工程这一新术语，之所以能引起业内共鸣，折射的是智能体复杂性的演化和应对策略的转变，是对现实中算法和工程挑战的一种集体回应，尤其是在垂直/领域的智能体。在大模型能力日益强大

avatar 2048 AI社区

上下文工程驱动

但即便是最聪明的人，如果不清楚自己要做的事情的上下文，也很难给出令人满意的交付。两款产品可能在做完全相同的事情，一款给人感觉充满魔力，但另一款却像个廉价的演示品。技术术语的更迭，不仅是语言表达的更替，更代表着思维范式的转变。上下文工程这一新术语，之所以能引起业内共鸣，折射的是智能体复杂性的演化和应对策略的转变，是对现实中算法和工程挑战的一种集体回应，尤其是在垂直/领域的智能体。在大模型能力日益强大

avatar 2048 AI社区

飞算Java AI：从安装到项目生成·一天助你成为Java高手

这款智能化开发工具能自动完成环境配置、代码生成、项目构建等核心流程，让新手只需一天，就能从 “Java 小白” 进阶到 “独立生成项目” 的水平。飞算 Java AI 提供了 Windows、Mac、Linux 三种系统的适配版本，且内置了 Java 开发所需的 JDK、Maven 等基础工具，新手无需手动配置复杂环境，只需三步即可完成安装。省去手动配置环境变量的麻烦）；启动飞算 Java AI

avatar 2048 AI社区