大模型API的响应内容（markdown语法）在Html中显示
大模型的API响应内容一般都是markdown语法的，示例如下：
{
"created": 1703487403,
"id": "8239375684858666781",
"model": "glm-4",
"request_id": "8239375684858666781",
"choices": [
{
"finish_reason": "stop",
"index": 0,
"message": {
"content": "要创建一个使用 Flask 的简单 Web 应用，该应用从前端接收问题，然后调用大模型服务提供商的 API 获取回复，并将回复展示在前端，可以按照以下步骤进行： 1. **安装 Flask**： 首先，确保你已经安装了 Flask。如果没有安装，可以使用 pip 安装： ```bash pip install Flask ``` ",
"role": "assistant"
}
}
],
"usage": {
"completion_tokens": 217,
"prompt_tokens": 31,
"total_tokens": 248
}
}
在网页中显示Markdown文本，通常需要将Markdown转换为HTML，因为网页浏览器只能直接渲染HTML。
以下是一些常用的方法来实现这一功能：
1. 使用JavaScript库，可以使用JavaScript库如
marked.js、Showdown或Markdown-it来在客户端（浏览器）将Markdown转换为HTML。
示例：使用marked.js
首先，你需要在HTML文件中引入marked.js库：
<!DOCTYPE html>
<html>
<head>
<title>Markdown to HTML</title>
</head>
<body>
<div id="markdownContent"></div>
<!-- 引入marked.js -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var markdownText = '**# Hello Markdown\n\nThis is *markdown* text.**';
var htmlContent = marked.parse(markdownText);
document.getElementById('markdownContent').innerHTML = htmlContent;
});
</script>
</body>
</html>
在这个例子中，当文档加载完成后，marked函数将Markdown文本转换为HTML，并将其设置为div元素的内容。
2. 使用服务器端转换
如果你使用服务器端技术（如Node.js、Python、Ruby等），可以在服务器上将Markdown转换为HTML，然后发送HTML到客户端。
示例：使用Python Flask
首先，你需要安装Flask和一个Markdown库（如markdown2）：
pip install Flask markdown2
然后，创建一个简单的Flask应用：
from flask import Flask, render_template_string
import markdown2
app = Flask(__name__)
@app.route('/')
def home():
markdown_text = '# Hello Markdown\n\nThis is *markdown* text.'
html_content = markdown2.markdown(markdown_text)
return render_template_string('<div>{{ content }}</div>', content=html_content)
if __name__ == '__main__':
app.run(debug=True)
在这个Flask应用中，Markdown文本在服务器端转换为HTML，然后通过Jinja2模板渲染到网页中。
选择哪种方法取决于你的具体需求，比如是否需要客户端或服务器端处理、是否需要实时预览等。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本