【js渲染markdown】
- remarkable
(CDN标签链接)[https://cdnjs.com/libraries/remarkable]
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.1/remarkable.js"></script>
<script>
// 创建 Remarkable 的实例
var md = new remarkable.Remarkable();
// Markdown 源文本
var source = '# Hello, world!';
// 将 Markdown 渲染为 HTML 并填充到指定元素中
document.getElementById('content').innerHTML = md.render(source);
</script>
html页面实时渲染
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.1/remarkable.js"></script>
</head>
<body>
<textarea id="markdown-input" rows="10" cols="50"></textarea>
<div id="markdown-output"></div>
<script>
// 创建 Remarkable 的实例;
var md = new remarkable.Remarkable();
var inputEl = document.getElementById('markdown-input');
var outputEl = document.getElementById('markdown-output');
// 将 Markdown 渲染为 HTML 并填充到指定元素中
// 监听输入框的变化事件
inputEl.addEventListener('input', function() {
var markdown = inputEl.value;
var html = md.render(markdown);
outputEl.innerHTML = html;
});
</script>
</body>
</html>
- marked
GitHub
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.getElementById('content').innerHTML =
marked.parse('# Marked in the browser\n\nRendered by **marked**.');
</script>
</body>
</html>
