连接SSE后发送数据流使用markdown-it更改样式并且使用highlight.js美化代码编辑器

琦遇2025-03-21 16:52

下载 markdown-it 和 highlight.js

node 复制代码

npm install markdown-it
npm install highlight.js

创建md.js文件

我是放在components文件夹里，先引入markdown-it，然后再对MarkdownIt的代码进行样式优化，pre标签代表的是代码回显，我还在里面顶部加了一行可以复制代码的样式，这样到新的界面引入就可以用了。

js 复制代码

import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><div style="display:flex;align-items:center;justify-content:space-between;background-color:#50505a;padding: 5px 16px;"><div>${md.utils.escapeHtml(lang || '')}</div><div class="copy-button copy-icon" onclick="alert('复制成功')"></div></div><div style="padding: 10px 16px;">${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</div></pre>`;
      } catch (__) {}
    }
    return `<pre class="hljs"><div style="display:flex;align-items:center;justify-content:space-between;background-color:#50505a;padding: 5px 16px;"><div>${md.utils.escapeHtml(lang || '')}</div><div class="copy-button copy-icon" onclick="alert('复制成功')"></div></div><div style="padding: 10px 16px;">${md.utils.escapeHtml(str)}</div></pre>`;
  }
});

export default md;

修改默认样式

css 复制代码

p {
    margin: 0;
}
ol,ul{
    margin: 0;
    padding-left: 2em;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

引入md.js

vue3 复制代码

<template>
    <div v-html="md.render(内容)"></div>
</template>
<script setup>
    import md from '../components/md';
</script>

这样成形的样式就出来啦，目前还在不断优化中，欢迎提出建议