Nodejs 建立自己的博客发表文章时代码段自动高亮或者加标注

Nodejs 建立自己的博客发表文章时代码段自动高亮或者加标注

3 回复

Node.js 建立自己的博客发表文章时代码段自动高亮或者加标注

在使用 Node.js 构建博客应用时，实现代码段的自动高亮或加标注是一个常见的需求。这不仅能提升用户体验，还能让代码更加易于阅读。本文将介绍如何通过使用流行的库来实现这一功能。

1. 安装依赖

首先，你需要安装一个支持代码高亮的库，比如 highlight.js 或者 prism.js。这里我们以 highlight.js 为例：

npm install highlight.js

2. 引入和初始化

在你的前端页面中引入 highlight.js 的 CSS 和 JS 文件。你也可以选择从 CDN 引入：

<!-- 在 HTML 中引入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>

然后，在页面加载完成后初始化 highlight.js：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightBlock(block);
    });
});

3. 使用 Markdown

为了方便地插入代码段，你可以使用 Markdown 语法。在 Markdown 中，你可以这样写代码块：

这是一个代码示例：
```javascript
console.log("Hello, World!");


当你渲染这些 Markdown 内容时，确保它们被转换为包含 `<code>` 和 `<pre>` 标签的 HTML。

#### 4. 实现 Markdown 渲染

如果你使用的是 Express 框架，可以使用 `marked` 库来解析 Markdown：

```bash
npm install marked

在你的服务器端代码中：

const express = require('express');
const marked = require('marked');

const app = express();

app.get('/post/:id', (req, res) => {
    const markdownContent = `这是一个代码示例：
    \`\`\`javascript
    console.log("Hello, World!");
    \`\`\``;

    const htmlContent = marked(markdownContent);

    res.send(`
        <html>
            <head>
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
            </head>
            <body>
                ${htmlContent}
                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        document.querySelectorAll('pre code').forEach((block) => {
                            hljs.highlightBlock(block);
                        });
                    });
                </script>
            </body>
        </html>
    `);
});

app.listen(3000, () => console.log('Server running on port 3000'));

以上步骤展示了如何在 Node.js 中构建一个简单的博客应用，并且在展示文章时实现代码段的自动高亮。希望这对你的项目有帮助！


代码高亮我是用kindeditor+SyntaxHighlighter结合的

当然可以。为了实现代码段自动高亮或者加标注的功能，我们可以使用一些现有的库，比如 highlight.js 或者 Prism.js。这里我将展示如何使用 highlight.js 来实现这个功能。

示例代码

首先，你需要安装 highlight.js：

npm install highlight.js

然后，在你的博客项目中引入 highlight.js 并设置它来高亮代码段。以下是一个简单的例子：

HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Blog</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
</head>
<body>
    <div id="content">
        <!-- 文章内容 -->
        <pre><code class="language-javascript">
            // JavaScript 代码示例
            function helloWorld() {
                console.log('Hello, world!');
            }
        </code></pre>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            hljs.highlightAll();
        });
    </script>
</body>
</html>

解释

  1. 引入 highlight.js 的 CSS 和 JS 文件：

    • 通过 CDN 引入 highlight.js 的 CSS 文件，以确保代码块能被正确样式化。
    • 引入 highlight.js 的 JS 文件，以便可以使用其提供的功能。

  2. HTML 中的代码段：

    • 使用 <pre> 和 <code> 标签包裹代码，并指定 class="language-javascript" 等语言类型，这样 highlight.js 就知道如何高亮这些代码。

  3. 初始化 highlight.js：

    • 使用 document.addEventListener("DOMContentLoaded", function () { hljs.highlightAll(); }); 在文档加载完成后调用 hljs.highlightAll() 方法来处理所有代码块并应用高亮效果。

这样，当你在博客中添加代码段时，它们将会自动高亮显示。你可以根据需要更改语言类名（如 language-python、language-java 等）来支持不同语言的代码高亮。

回到顶部