使用markdown-it和highlightjs渲染markdown文件

svygh123

于 2024-08-20 23:48:31 发布

阅读量477

点赞数 10

分类专栏：编程 js html+css 文章标签：模板引擎

本文链接：https://blog.csdn.net/svygh123/article/details/141308321

版权

编程同时被 3 个专栏收录

178 篇文章 4 订阅

订阅专栏

33 篇文章 0 订阅

订阅专栏

html+css

19 篇文章 0 订阅

订阅专栏

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>