Markdown在后台转换HTML后，Nodejs环境下浏览器显示不了

Markdown在后台转换HTML后，Nodejs环境下浏览器显示不了

显示原始的代码

<pre><p>page</p></pre>

正常应该是

<pre><p>page</p></pre>
8 回复

Markdown在后台转换HTML后，Nodejs环境下浏览器显示不了

在使用Node.js进行Markdown到HTML的转换时，有时会遇到浏览器无法正确显示转换后的HTML内容的情况。这通常是由于一些特殊字符或HTML标签没有被正确处理导致的。

示例问题

假设你有一个简单的Markdown文件example.md，内容如下：

# Page Title

This is a paragraph.

你使用一个流行的库如marked来将Markdown转换为HTML：

const marked = require('marked');

const markdown = `
# Page Title

This is a paragraph.
`;

const html = marked(markdown);
console.log(html);

运行上述代码后，你可能会得到如下输出：

<h1>Page Title</h1>
<p>This is a paragraph.</p>

但当你尝试在浏览器中显示这段HTML时，可能发现它并没有按照预期的方式显示。例如，你可能看到的是原始的HTML代码而不是格式化的文本。

解决方案

这个问题通常可以通过确保HTML在服务器端正确渲染并发送到客户端来解决。以下是一个完整的Node.js示例，展示如何正确处理Markdown到HTML的转换并在浏览器中显示：

  1. 安装依赖：

    npm install marked express

  2. 创建服务器文件 server.js：

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

const app = express();
const port = 3000;

// 设置静态文件目录
app.use(express.static('public'));

// 处理Markdown文件并返回HTML
app.get('/markdown', (req, res) => {
    const markdown = `
    # Page Title

    This is a paragraph.
    `;
    const html = marked(markdown);
    res.send(html);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

  3. 创建一个简单的HTML文件 index.html 放在 public 目录下：

    <!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>
</head>
<body>
    <div id="content"></div>

    <script>
        fetch('/markdown')
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerHTML = data;
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

  4. 启动服务器：

    node server.js

  5. 打开浏览器访问 http://localhost:3000，你应该能看到正确的Markdown转换结果。

通过这种方式，你可以确保Markdown在服务器端被正确转换为HTML，并且在浏览器中能够正确显示。


贴代码出来看看，或者是不是有错误信息？

我想发图的，可是好像发不了！

是jade么 jade需要用到!=不然会自动转义

是ejs啊！愁死了，不知道啥问题

<pre>&lt;p&gt;page&lt;/p&gt;</pre>

这样的字符串里边, &gt 对应的是 > “greater than”, &lt 是 “littler than”.

对照这边的表格看看实体符号理解应该没错吧? http://www.w3school.com.cn/html/html_entities.asp

我的问题不是这个哦？

当你在Node.js环境中将Markdown转换为HTML后，浏览器无法正确显示的情况可能有几个原因。主要问题可能是生成的HTML没有被正确地解析或渲染。以下是一些常见的解决方法：

  1. 确保Markdown库正确安装并使用： 确保你已经安装了marked或markdown-it等Markdown处理库。以markdown-it为例，你可以这样安装它：

    npm install markdown-it

  2. 将Markdown转换为HTML： 使用markdown-it将Markdown文本转换为HTML字符串。

  3. 确保HTML正确渲染： 如果你在Node.js服务器端处理Markdown，并将结果发送到客户端浏览器，确保你发送的HTTP响应包含完整的HTML文档，而不仅仅是转换后的HTML片段。

以下是一个简单的示例代码，演示如何在Node.js中使用markdown-it将Markdown转换为HTML，并确保浏览器能够正确显示：

const express = require('express');
const markdownIt = require('markdown-it')();

const app = express();
const port = 3000;

app.get('/', (req, res) => {
    const markdownText = '# Hello\nThis is a paragraph.';
    const htmlContent = markdownIt.render(markdownText);
    res.send(`
        <!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>
        </head>
        <body>
            ${htmlContent}
        </body>
        </html>
    `);
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

在这个例子中，当用户访问根路径时，服务器会将Markdown文本转换为HTML，并返回一个完整的HTML文档给浏览器。这样可以确保浏览器能够正确解析和显示HTML内容。

回到顶部