Web前端Markdown展示

发表于 | 分类于
Web前端Markdown展示

前言

之前我们使用过Markdown编辑器，我们也可以通过它进行展示，但是它还是太重了，只做展示的还是用展示类的插件。

https://www.psvmc.cn/article/2024-02-22-vue-md-editor.html

Markdown 渲染

引用

1
<script src="https://js.cybozu.cn/markedjs/v0.3.5/marked.min.js"></script>

JS

1
2
3
getHtmlByMdStr(str) {
  return marked.parse(str)
}

代码高亮

highlight.min.js 是一个用于代码高亮的 JavaScript 库，由 highlight.js 提供。这个库的主要功能是将代码块中的语法元素高亮显示，使得代码更易读和理解。

引用

1
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

使用

1
window.hljs.highlightAll();

代码高亮的对象

highlight.min.js 代码高亮的对象是页面上的代码块。具体来说，它主要针对以下几种情况：

  1. HTML 中的代码块：

    <pre><code>...</code></pre> 标签中的代码内容会被高亮。

    highlight.js 会自动检测代码块的语言，并根据语言类型应用相应的高亮样式。

  2. JavaScript 动态生成的代码块：

    如果你使用 JavaScript 动态地生成了代码块，可以通过调用 hljs.highlightBlock(codeBlock) 来高亮这些代码块。

    其中 codeBlock 是一个 DOM 元素对象。

基本用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>代码高亮示例</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  </head>
  <body>
    <pre>
    <code class="javascript">
    function helloWorld() {
        console.log("Hello, World!");
    }
    </code>
    </pre>

    <script>
      hljs.highlightAll();
    </script>
  </body>
</html>

在这个例子中，highlight.js 会自动检测并高亮 javascript 代码块。

Vue中使用

在main.js里引用组件

1
2
3
4
5
6
7
8
9
10
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css";

Vue.directive("highlight", function (el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach((block) => {
    hljs.highlightBlock(block);
  });
 });
 Vue.prototype.$hljs = hljs;

页面中使用

在所有代码块的外部添加v-highlight即可

1
2
3
4
5
6
7
8
9
<template>
  <div v-highlight>
    <pre>
        <code>
          {{ code }}
        </code>
      </pre>
  </div>
</template>