1.到https://highlightjs.org下载highlightjs文件
选择
bash、c、cpp、csharp、css、java、javascript、json、python、shell、sql、xml、yaml
2.引入js和css
引入 highlight.js 的样式:
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.10.0/styles/default.min.css" rel="stylesheet">
引入 Markdown-it 和 highlight.js
<script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.2/markdown-it.js"></script>
<script src="highlight.min.js"></script>
3.完整例子demo.html,其中example.htm存放的是markdown内容,使用fetch获取example.htm内容再渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown-it Browser Example</title>
<!-- 引入 highlight.js 的样式 -->
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.10.0/styles/default.min.css" rel="stylesheet">
<!-- 引入 Markdown-it 和 highlight.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.2/markdown-it.js"></script>
<script src="highlight.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>
// 创建 Markdown-it 实例并使用 markdown-it-highlight 插件
var md = window.markdownit();
md.set({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(lang, str, true).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
// 示例 Markdown 文本
fetch('example.htm')
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Network response was not ok.');
})
.then(markdownContent => {
// 这里处理Markdown内容
console.log(markdownContent);
const markdownText = markdownContent;
// 渲染 Markdown 为 HTML
const html = md.render(markdownText);
// 将渲染后的 HTML 插入到页面中
document.getElementById('content').innerHTML = html;
// 初始化 highlight.js
hljs.highlightAll();
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
</script>
</body>
</html>