如何在浏览器中使用Nodejs将markdown转换为html?

如何在浏览器中使用Nodejs将markdown转换为html?

赶脚下面这个项目不靠谱啊 https://github.com/evilstreak/markdown-js https://github.com/evilstreak/markdown-js/releases

6 回复

在浏览器中直接使用Node.js将Markdown转换为HTML并不是一个直接的方法，因为Node.js通常是在服务器端运行的。不过，你可以通过一些方法实现这一目标，比如使用Web Workers或者通过后端API来处理转换。

一种可行的方法是创建一个简单的后端API服务，该服务可以接收Markdown文本并返回相应的HTML。然后，前端可以通过AJAX请求与这个API进行交互。以下是一个基本的实现步骤：

后端（Node.js）

首先，你需要安装marked库，这是一个流行的Markdown解析器。

npm install marked

然后，创建一个简单的Express应用来提供Markdown到HTML的转换服务：

// server.js
const express = require('express');
const marked = require('marked');

const app = express();

app.use(express.json());

app.post('/convert-markdown', (req, res) => {
    const markdown = req.body.markdown;
    const html = marked(markdown);
    res.send({ html });
});

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

启动服务器：

node server.js

前端（浏览器）

接下来，你可以编写前端代码来发送Markdown数据到后端，并获取生成的HTML。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Markdown to HTML</title>
</head>
<body>
    <textarea id="markdown-input" rows="10" cols="50"></textarea>
    <button onclick="convertMarkdown()">Convert</button>
    <div id="html-output"></div>

    <script>
        async function convertMarkdown() {
            const markdown = document.getElementById('markdown-input').value;
            const response = await fetch('http://localhost:3000/convert-markdown', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ markdown })
            });

            const data = await response.json();
            document.getElementById('html-output').innerHTML = data.html;
        }
    </script>
</body>
</html>

在这个例子中，用户可以在文本区域输入Markdown文本，点击按钮后，前端会发送一个POST请求到后端服务，后端将Markdown转换成HTML，再将结果返回给前端显示。

这种方法利用了Node.js作为后端服务，而浏览器则负责展示和用户交互。这样既利用了Node.js的能力，也保持了前端的灵活性。


marked 在浏览器里应该也能跑

https://github.com/chjj/marked 好像也不行的。。。

http://www.oschina.net/search?q=markdown&scope=project&tag1=0&tag2=0&lang=28&os=0

mdwiki

要在浏览器中使用Node.js将Markdown转换为HTML，你可以借助一些库来实现。这里推荐使用marked库，它是一个快速、灵活且全面的Markdown解析器和编译器，非常适合在浏览器环境中使用。

示例代码

首先，你需要在你的HTML文件中引入marked库。你可以通过CDN直接引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <textarea id="markdown-text" rows="10" cols="50">
        # Hello, Markdown!
        This is a **bold** text and this is *italic*.
    </textarea>
    <br>
    <button onclick="convert()">Convert to HTML</button>
    <div id="html-content"></div>

    <script>
        function convert() {
            const markdownText = document.getElementById('markdown-text').value;
            const htmlContent = marked.parse(markdownText);
            document.getElementById('html-content').innerHTML = htmlContent;
        }
    </script>
</body>
</html>

解释

  1. 引入marked库：

    • 我们通过CDN引入了marked库，这样你就可以在浏览器中使用这个库了。

  2. 创建文本区域：

    • 创建一个<textarea>用于输入Markdown文本。

  3. 按钮点击事件：

    • 当用户点击“Convert to HTML”按钮时，会触发convert()函数。

  4. 转换Markdown到HTML：

    • 在convert()函数中，我们获取<textarea>中的Markdown文本，并使用marked.parse()方法将其转换为HTML。
    • 最后，我们将生成的HTML插入到一个<div>元素中。

这样，你就可以在浏览器中实时地将Markdown文本转换为HTML了。

回到顶部