为什么用了markdown转化到页面还是显示标签？ Nodejs相关处理疑问

为什么用了markdown转化到页面还是显示标签？ Nodejs相关处理疑问

最近在学习 node 开发 web 根据 一个简单的博客 自己在做一个blog 但是在加入markdown之后页面还是显示的是html的代码 我的代码 页面的代码有特殊需要处理的么？ 也没有escape属性啊 <%- %> 这样写不可以么？

4 回复

为什么用了Markdown转化到页面还是显示标签？Node.js相关处理疑问

最近在学习Node.js开发Web应用。根据一个简单的博客项目（N-blog），我自己也在做一个博客。但是当我尝试将Markdown文本转换为HTML并显示在页面上时，发现页面仍然显示的是HTML标签而不是解析后的结果。

问题描述

具体来说，在我的博客中，我使用了marked库来处理Markdown文本，但最终显示在页面上的仍然是原始的Markdown代码和HTML标签，而不是预期的渲染效果。

代码示例

假设你已经安装了marked库，可以使用以下代码进行Markdown到HTML的转换：

const marked = require('marked');

function convertMarkdownToHtml(markdownContent) {
    return marked.parse(markdownContent);
}

// 示例Markdown内容
const markdownContent = `
# 这是一个标题

这是一个段落，包含一些 **粗体** 文字和 *斜体* 文字。
`;

// 转换Markdown到HTML
const htmlContent = convertMarkdownToHtml(markdownContent);

console.log(htmlContent);

页面渲染问题

如果你在Express或其他服务器端框架中使用Markdown，确保正确地将生成的HTML插入到模板中。例如，使用EJS模板引擎时，你应该使用<%- %>标签来输出未转义的HTML内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Post</title>
</head>
<body>
    <%- htmlContent %>
</body>
</html>

解决方案

  1. 确保正确引入marked库： 确保你在项目中正确安装并引入了marked库。可以通过npm安装：

    npm install marked

  2. 检查Markdown文本的传递方式： 在Express或其他框架中，确保Markdown内容被正确地传递给模板引擎，并且在模板中正确渲染。

  3. 确保使用正确的模板语法： 使用模板引擎的正确语法来输出未转义的HTML内容。例如，在EJS中使用<%- %>标签。

通过以上步骤，你应该能够解决Markdown文本在页面上显示为HTML标签的问题。希望这些信息对你有所帮助！


转化后在页面显示只是多了一对<p>标签 其他的好像没有转

最开始的一行代码不能转换，后面可以正常转换成html的标签 ，有人知道原因么

从你的描述来看，问题可能出在Markdown转换器的使用上。如果你希望将Markdown文本正确地转换为HTML，并且渲染到页面中，你需要确保使用正确的Markdown转换库，并正确调用它。

示例代码

假设你已经安装了marked库（一个常用的Markdown解析库），你可以这样处理：

  1. 安装marked库：

    npm install marked

  2. 在Node.js服务器端进行Markdown转换：

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

const app = express();

// 假设你有一个markdown文件或字符串
const markdownContent = '# Hello, World!\n\nThis is a test.';

// 使用marked转换markdown到HTML
const htmlContent = marked(markdownContent);

app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Blog Post</title>
        </head>
        <body>
            <div>${htmlContent}</div>
        </body>
        </html>
    `);
});

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

注意事项

  • 确保在客户端渲染HTML：如果你直接在EJS模板中嵌入Markdown内容，确保它已经被转换为HTML，而不是以纯文本形式输出。

  • 使用<%-而不是<%=：在EJS模板中，如果想要输出不转义的HTML内容，应该使用<%-标签而不是<%=, 因为后者会自动对内容进行转义。

    <%- htmlContent %>

以上步骤应该能帮助你解决Markdown文本在网页中显示为原始标签的问题。

回到顶部