今天遇到一个问题,从ChatGpt的API获取的文本格式为MarkDown,在HTML上使用textarea控件显示的时候就只是文字格式,并没有对MarkDown格式进行处理,今天就分享一下如何在Html上进行MarkDown格式文本的显示
1.创建一个HTML页面,包括textarea和一个用于显示Markdown内容的div:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea to Markdown</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<textarea style="font-size: 20px; width: 300px; height: 800px;" id="responseBox" name="responseBox" rows="4" cols="150" readonly>
2.将文本输入到div控件的.innerHTML属性上
html
Example Markdown
This is an example of Markdown text.
Item 1
Item 2
</textarea>
<button onclick="convertToMarkdown()">Convert to Markdown</button>
<div id="markdownDisplay"></div>
php
Copy code
<script>
function convertToMarkdown() {
var text = document.getElementById('responseBox').value;
var markdownContent = marked(text);
document.getElementById('markdownDisplay').innerHTML = markdownContent;
}
</script>
</body>
</html>
3.代码解释
textarea
元素用于输入或显示文本内容。button
元素用于触发转换操作。div
元素用于显示转换后的Markdown内容。- 使用JavaScript读取
textarea
的内容,并使用marked
库将其转换为Markdown HTML,然后在div
中显示。
在这里面使用的 https://cdn.jsdelivr.net/npm/marked/marked.min.js为MarkDown解释器的解析文件地址,如果无法使用有以下几种解决方式,我用的第一种,但是将地址更改了,CDN的解析地址可以自己再找一下,我是以下这个
html
<script src="https://unpkg.com/marked@13.0.2/marked.min.js"></script>
方法一:通过CDN引入
在HTML文件的 <head>
标签中添加以下脚本标签,从CDN加载 marked
库:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea to Markdown</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<textarea style="font-size: 20px; width: 300px; height: 800px;" id="responseBox" name="responseBox" rows="4" cols="150" readonly>
# Example Markdown
This is an example of **Markdown** text.
- Item 1
- Item 2
</textarea>
<button onclick="convertToMarkdown()">Convert to Markdown</button>
<div id="markdownDisplay"></div>
<script>
function convertToMarkdown() {
var text = document.getElementById('responseBox').value;
var markdownContent = marked(text);
document.getElementById('markdownDisplay').innerHTML = markdownContent;
}
</script>
</body>
</html>
方法二:使用npm安装(适用于Node.js项目)
1.首先,通过npm安装 marked
:
html
npm install marked
2.然后,在你的JavaScript文件中引入 marked
:
python
const marked = require('marked');
// 示例代码
function convertToMarkdown() {
var text = document.getElementById('responseBox').value;
var markdownContent = marked(text);
document.getElementById('markdownDisplay').innerHTML = markdownContent;
}
方法三:下载并本地引入
-
从
marked
的 GitHub仓库 下载marked.min.js
文件。 -
将
marked.min.js
文件放置在你的项目文件夹中,例如js
文件夹。 -
在HTML文件的
<head>
标签中添加本地路径的脚本标签:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea to Markdown</title>
<script src="js/marked.min.js"></script>
</head>
<body>
<textarea style="font-size: 20px; width: 300px; height: 800px;" id="responseBox" name="responseBox" rows="4" cols="150" readonly>
# Example Markdown
This is an example of **Markdown** text.
- Item 1
- Item 2
</textarea>
<button onclick="convertToMarkdown()">Convert to Markdown</button>
<div id="markdownDisplay"></div>
<script>
function convertToMarkdown() {
var text = document.getElementById('responseBox').value;
var markdownContent = marked(text);
document.getElementById('markdownDisplay').innerHTML = markdownContent;
}
</script>
</body>
</html>