今日推荐库：“highlight.js“ 和 “markdown-it“ 库：让代码和Markdown更出彩
Highlight.js 和 Markdown-it 是两个常用的JavaScript库，分别用于代码高亮和Markdown解析。以下是如何将它们结合使用的示例代码：
- 首先，确保在你的项目中包含了这两个库的CSS和JavaScript文件。
- 在HTML文件中，创建一个容器来显示高亮后的代码和解析后的Markdown。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highlight.js and Markdown-it Example</title>
<link rel="stylesheet" href="path/to/highlight.js/styles/default.css">
<script src="path/to/highlight.js/highlight.pack.js"></script>
<script src="path/to/markdown-it.js"></script>
</head>
<body>
<div id="code-container"></div>
<div id="markdown-container"></div>
<script>
// 初始化Markdown-it
var md = markdownit();
// 初始化Highlight.js
hljs.initHighlightingOnLoad();
window.onload = function() {
// 示例代码
var code = '```javascript\nconsole.log("Hello, World!");\n```';
// 将代码放入代码容器
document.getElementById('code-container').innerHTML = code;
// 解析Markdown并放入Markdown容器
document.getElementById('markdown-container').innerHTML = md.render(code);
};
</script>
</body>
</html>在这个例子中，我们首先在HTML的<head>部分包含了Highlight.js和Markdown-it的CSS和JavaScript文件。然后，在<body>中创建了两个<div>容器，分别用于显示高亮后的代码和解析后的Markdown。在<script>标签中，我们初始化了Markdown-it，并在页面加载完成后通过Highlight.js的initHighlightingOnLoad函数进行代码高亮。最后，我们使用Markdown-it的render函数将代码块解析为HTML，并将其显示在页面上。
评论已关闭