Markdown文本格式化显示

1.概况

在调用ai大模型api后，返回文本格式为Markdown文本格式，为了使ai输出内容在页面中的布局及样式更美观，本次采用marked.js工具实现Markdown格式文本转html。具体示例如下：

2.markedjs简介

marked 是一个流行的 JavaScript 库，用于将 Markdown 格式的文本快速转换为 HTML。它轻量、高效，支持大多数标准的 Markdown 语法，并且可以轻松集成到前端或 Node.js 项目中。

支持标准 Markdown 语法：
- 标题（#、##）
- 加粗（** 或 __）
- 斜体（* 或 _）
- 列表（-、*、1.）
- 链接（[text](url)）
- 图片（![alt](url)）
- 代码块（ ``` 或 ~~~）
- 引用（>）
- 表格、分隔线等。

3.具体示例

3.1 依赖安装

npm install marked

npm install marked-highlight

3.2 示例展示

3.2.1 使用marked处理文本内容，使用marked-hightlight实现代码块展示，示例如下：

<template>
    <div style="width: 300px;" v-html="content"></div>
</template>

<script setup>
import { ref, onMounted, nextTick, } from 'vue';

import { marked,Marked } from 'marked';

// 代码块展示所需依赖
import { markedHighlight } from "marked-highlight";

const content = ref('')

onMounted(() => {
    
    let markedContent = '---### **`onMounted` 的优势**\n- **简化代码**：不需要手动管理生命周期钩子。\n- **可读性高**：逻辑直接表达在挂载完成后的操作。\n- **灵活性强**：支持链式调用和异步操作。'

    nextTick(() => {
        content.value = markContentCode(markedContent)
    });
});

const markContentCode = (content) => {

    const marked = new Marked(
        markedHighlight({
            emptyLangClass: 'hljs',
            langPrefix: 'hljs language-',
            highlight(code, lang, info) {
                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                return hljs.highlight(code, { language }).value;
            }
        })
    );

    // Set options
    marked.use({
        async: false,
        pedantic: false,
        gfm: true,
    });

    let result = marked.parse(content);
    
    return result;
};

</script>

<style scoped>
::v-deep ul {
  padding-left: 30px;
}
::v-deep ol {
  padding-left: 30px;
}
</style>

效果展示：

3.2.2 使用marked结合highlight.js

const highlightCode = (content) => {

  let result = [];

  let newContentList = content.split('```');
 
  newContentList.forEach((item, index) => {

    if (index % 2 !== 0 && item !== '') {
    
      const codeContent = item.trim();

      const highlightedCode = hljs.highlightAuto(codeContent).value;

      codeList.value.push({
        code: codeContent,
        index: index
      });

      result.push(`<pre style="margin-top: 10px;margin-bottom: 10px;position: relative;border-radius:8px;"><button style="position: absolute;top: 10px;right: 10px;cursor: pointer;" id='code${index}'>${buton.value}</button><code style="border-radius:8px;" class="hljs">${highlightedCode}</code></pre>`);
      
    } else if (item !== '') {
      // Set options
      marked.use({
        async: false,
        pedantic: false,
        gfm: true,
      });

      result.push(marked.parse(item));
    }

  });


  return result.join('');
  
};

效果展示：

以上是一个简单示例，具体使用请结合以下文档：

marked-highlight：marked-highlight - npm

marked：Marked Documentation