解析markdown文档并且代码高亮
要解析Markdown文档并实现代码高亮，你可以使用一些流行的JavaScript库，例如marked和Prism.js。以下是一个简单的例子：
- 首先，确保你的HTML页面中包含了
Prism.js的CSS和JavaScript文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Markdown with Syntax Highlighting</title>
<link rel="stylesheet" href="path/to/prism.css">
</head>
<body>
<div id="content"></div>
<script src="path/to/prism.js"></script>
<script src="path/to/marked.min.js"></script>
<script>
// 你的JavaScript代码将放在这里
</script>
</body>
</html>- 使用
marked将Markdown转换为HTML，并通过Prism.highlightElement为代码块添加语法高亮。
document.addEventListener('DOMContentLoaded', function() {
var markdownString = `
# Hello, World!
Here's some example code in JavaScript:
\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;
var html = marked(markdownString);
document.getElementById('content').innerHTML = html;
// 高亮所有代码块
Prism.highlightAll();
});在这个例子中，当DOM加载完成后，我们使用marked将Markdown文档转换成HTML。然后，我们通过Prism.highlightAll()函数来初始化语法高亮。Prism.highlightAll会查找页面上所有的<code>和<pre>元素，并尝试根据其内容应用正确的语法高亮。
确保你已经通过适当的方式引入了marked和Prism.js库。你可以使用CDN链接或者将它们的文件下载到本地，然后通过相对路径或者绝对路径引入。
评论已关闭