自定义HTML标签，在网页中直接写MarkDown和数学公式（Nodejs实现）

自定义HTML标签，在网页中直接写MarkDown和数学公式（Nodejs实现）

<x-md>

            markdown标签

<x-math>

            LaTeX标签

<x-qr>

            qr-code标签

<x-chart>

           作图标签

<x-clock>

           表，纪念apple watch发布（怎駡能不叫iWatch呢？）。

例子

点这里，View page source。

新增两个标签，看的懂并且有兴趣，可以联系我。


7 回复

自定义HTML标签，在网页中直接写MarkDown和数学公式（Nodejs实现）

在这篇文章中，我们将探讨如何使用Node.js来创建自定义HTML标签，并实现在网页中直接编写Markdown文本和数学公式的功能。

定义自定义HTML标签

我们定义了几个自定义HTML标签，用于不同的功能：

  1. <x-md> - 用于嵌入Markdown文本。
  2. <x-math> - 用于嵌入LaTeX数学公式。
  3. <x-qr> - 用于生成二维码。
  4. <x-chart> - 用于绘制图表。
  5. <x-clock> - 用于显示一个时钟。

示例代码

首先，我们需要安装一些必要的Node.js包。例如，我们可以使用marked库来解析Markdown，使用katex库来渲染LaTeX公式。

npm install marked katex

接下来，我们创建一个简单的Node.js服务器来处理这些自定义标签。

const http = require('http');
const fs = require('fs');
const marked = require('marked');
const katex = require('katex');

const server = http.createServer((req, res) => {
    fs.readFile('index.html', 'utf8', (err, data) => {
        if (err) throw err;

        // 处理<x-md>标签
        data = data.replace(/<x-md>([\s\S]*?)<\/x-md>/g, (match, p1) => {
            return marked.parse(p1);
        });

        // 处理<x-math>标签
        data = data.replace(/<x-math>([\s\S]*?)<\/x-math>/g, (match, p1) => {
            return katex.renderToString(p1);
        });

        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
    });
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

示例HTML文件

创建一个名为index.html的文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom HTML Tags Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css">
</head>
<body>
    <x-md>
        # Hello World
        This is a **Markdown** text.
    </x-md>

    <x-math>
        E = mc^2
    </x-math>
</body>
<script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"></script>
<script>
    document.querySelectorAll('x-math').forEach(node => {
        katex.render(node.textContent, node);
    });
</script>
</html>

解释

  1. <x-md>标签：通过正则表达式匹配并替换为对应的Markdown解析结果。
  2. <x-math>标签：通过正则表达式匹配并替换为对应的LaTeX公式渲染结果。
  3. 客户端脚本：使用Katex库在页面加载完成后动态渲染所有的<x-math>标签。

通过这种方式，我们可以在网页中直接使用自定义标签来插入Markdown文本和数学公式，从而提高开发效率和用户体验。


不明觉厉，想想，如果我要实现自定义标签功能的话，我会通过angular的directive去实现。

专业的说法： Web Components

React 里面实现的话，就是个class。Preprocessing ＋js function for trasnformation

Fibonacci 那个例子好酷

这个难度在哪

为了实现自定义HTML标签来解析Markdown和数学公式（使用LaTeX语法），我们可以使用Node.js来处理这些标签。以下是一个简单的实现方法：

实现步骤

  1. 创建一个Node.js服务器：用于接收请求并返回渲染后的HTML内容。
  2. 解析自定义标签：在服务器端解析<x-md>和<x-math>标签，并将它们替换为实际的内容。
  3. 使用库进行Markdown和数学公式的渲染：使用如marked库解析Markdown，使用katex库渲染LaTeX。

示例代码

1. 安装必要的依赖包

npm install marked katex express

2. 创建服务器端代码

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

// 渲染Markdown函数
function renderMarkdown(md) {
    return marked.parse(md);
}

// 渲染LaTeX函数
function renderMath(math) {
    try {
        return katex.renderToString(math, { throwOnError: false });
    } catch (error) {
        return `Error rendering math: ${error}`;
    }
}

// 处理请求
app.get('/', (req, res) => {
    const html = `
        <html>
            <head>
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css">
            </head>
            <body>
                <div>
                    <x-md>**Hello World!**</x-md>
                    <x-math>\(e^{i\pi} + 1 = 0\)</x-math>
                </div>
                <script src="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js"></script>
                <script>
                    document.querySelectorAll('x-md').forEach(node => {
                        node.outerHTML = renderMarkdown(node.innerHTML);
                    });
                    document.querySelectorAll('x-math').forEach(node => {
                        node.outerHTML = renderMath(node.innerHTML);
                    });
                </script>
            </body>
        </html>
    `;
    res.send(html);
});

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

解释

  1. 安装依赖：我们安装了marked、katex和express。
  2. 创建服务器：使用express创建了一个简单的HTTP服务器。
  3. 定义渲染函数：renderMarkdown用于将Markdown转换为HTML，renderMath用于将LaTeX数学公式转换为HTML。
  4. 处理请求：在响应请求时，服务器返回包含自定义标签的HTML。客户端脚本会找到所有<x-md>和<x-math>标签，并替换为实际内容。

通过这种方式，用户可以在网页中直接使用自定义标签来写Markdown和数学公式。

回到顶部