1. 生成静态html文件
使用Python中的markdown库将Markdown文本转换为HTML，并将生成的HTML结果保存到一个静态HTML文件中。下面是一个示例代码：
# -*- coding: utf-8 -*-
import markdown # pip install markdown
# Markdown语法文本
markdown_msg = """
# 这是一个标题
这是一些段落文本，包含**加粗**和*斜体*的样式。
## 子标题
- 项目 1
- 项目 2
- 项目 3
[链接到Google](https://www.google.com)
"""
html_output = markdown.markdown(markdown_msg)
# HTML模板
html_template = f"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown渲染结果</title>
<style>
body {{
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 20px;
}}
.markdown {{
background-color: #f9f9f9;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}}
</style>
</head>
<body>
<div class="markdown">
{html_output}
</div>
</body>
</html>
"""
# 将结果写入HTML文件
with open("output.html", "w", encoding="utf-8") as f:
f.write(html_template)
print("HTML文件已生成：output.html")
运行后，你将得到一个名为output.html的文件。打开该文件，你将看到已渲染的Markdown内容，按照样式正确显示。在浏览器中打开这个HTML文件即可查看效果。
2.HTML渲染
请求后端获取数据，引入了marked.js库，将Markdown格式文本转换为HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown 示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.markdown {
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Markdown 示例</h1>
<div class="markdown" id="markdown-content"></div>
<script>
// Markdown 文本(模拟后端获取到的数据)
const markdownText = `
# 这是一个标题
这是一些普通文本。
- 列表项 1
- 列表项 2
- 列表项 3
**加粗文本**
[链接到百度](https://www.baidu.com)
`;
// 将 Markdown 转换为 HTML
document.getElementById('markdown-content').innerHTML = marked(markdownText);
</script>
</body>
</html>
这样，Markdown内容将被渲染为HTML，在页面上展示。
3. THML动态渲染
动态将Markdown语法内容转换为HTML格式并进行展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渲染Markdown语法文本</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.5;
margin: 20px;
}
.markdown {
background-color: #f9f9f9;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Markdown 渲染示例</h1>
<!-- 输入Markdown内容 -->
<textarea id="markdown-input" rows="10" cols="80" placeholder="在这里输入Markdown文本"></textarea>
<!-- 渲染后的HTML -->
<div id="markdown-output" class="markdown"></div>
<!-- 转换按钮 -->
<button id="convert-button">转换 Markdown</button>
<script>
document.getElementById('convert-button').addEventListener('click', function() {
// 获取输入的Markdown文本
var markdownText = document.getElementById('markdown-input').value;
// 使用marked.js将Markdown文本转换为HTML
var htmlContent = marked(markdownText);
// 将生成的HTML内容插入到输出div中
document.getElementById('markdown-output').innerHTML = htmlContent;
});
</script>
</body>
</html>
