在下面html预览功能实现页代码模板中，我们使用了marked.js和highlight.js两个库来实现Markdown文本到HTML的渲染，并提供了一个预览区域和一个编辑区域。当用户在编辑区域中输入Markdown文本时，我们使用marked.js和highlight.js库将其转换为HTML代码，并将HTML代码显示在预览区域中。
HTML预览功能实现页代码模板如下：
<!DOCTYPE html>
<html>
<head>
<title>预览功能实现页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 预览区域 -->
<div id="preview"></div>
<!-- 编辑区域 -->
<textarea id="editor"></textarea>
<!-- 引入marked.js和highlight.js库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/languages/javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/languages/css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js/lib/languages/htmlbars.min.js"></script>
<!-- 自定义样式 -->
<style type="text/css">
#preview {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
font-size: 16px;
line-height: 1.5;
}
#editor {
width: 100%;
height: 400px;
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
line-height: 1.5;
}
</style>
<!-- 自定义脚本 -->
<script type="text/javascript">
// 获取预览区域和编辑区域的DOM元素
var preview = document.getElementById('preview');
var editor = document.getElementById('editor');
// 监听编辑区域的输入事件
editor.addEventListener('input', function() {
// 获取编辑区域的内容并使用marked.js和highlight.js库进行渲染
var markdown = editor.value;
var html = marked(markdown, {
highlight: function(code, lang) {
// 使用highlight.js库对代码进行高亮
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
} else {
return hljs.highlightAuto(code).value;
}
},
breaks: true
});
// 将渲染后的HTML代码更新到预览区域
preview.innerHTML = html;
});
// 初始化编辑区域的内容
editor.value = '# 在这里输入Markdown文本';
editor.dispatchEvent(new Event('input'));
</script>
</body>
</html>
需要注意的是，代码中我们使用了CDN引入marked.js和highlight.js库，并且引入了highlight.js库的三个语言模块（JavaScript、CSS和HTMLBars）。在实际应用中，我们可以将这些库下载到本地并引入到项目中。
评论