前端技术(24) : markdown编辑预览

楽焫旒璡

已于 2024-12-16 09:20:59 修改

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 arcgis

于 2024-12-16 09:20:46 首次发布

原文链接：www.tongyiqianwen.com

前端专栏收录该内容

79 篇文章

订阅专栏

来自: 通义千问

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Markdown to HTML</title>
		<style>
		</style>
	</head>
	<body>

		<div id="markdown-content"></div>


	</body>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

	<script>
		// Markdown文本
		const markdownText = `
	# 欢迎使用Markdown渲染器
	这是一个简单的例子，展示如何将Markdown文本渲染为HTML。
	
	- 列表项1
	- 列表项2
	- 列表项3
	
	**加粗文本**, _斜体文本_, 和 \`\`代码块\`\`.
	`;

		// 将Markdown文本转换为HTML
		document.addEventListener('DOMContentLoaded', (event) => {
			const htmlContent = marked.parse(markdownText);
			document.getElementById('markdown-content').innerHTML = htmlContent;
		});
		// 将转换后的HTML插入到页面中
	</script>
</html>