vue3中展示markdown格式文章的三种形式

一、安装

二、三种实现形式

1、编辑器的只读模式

main.ts文件中配置：

使用的组件中：

2、预览组件

main.ts中配置：

使用的组件中：

3、html预览组件

main.ts中配置：

使用的组件中：

三、实现其他功能

1、设置外观

2、对代码进行语法高亮并显示代码语言

3、代码块显示行号

4、高亮代码行 

5、快捷复制代码

main.ts中配置：

组件中使用：

四、注意 

如果按正常流程配置后，内容出不来，可以选择自己新开一个项目再操作一遍，如果这个时候是正常的，那可能就是原来的项目配置的版本过低，可以选择更新一下项目中的各项配置

五、方法补充

Vue 3中如何实现Markdown展示

使用Vue 3中的markdown-it或vue-markdown等库来实现类似React代码中的Markdown渲染功能。以下是一个完整的Vue 3实现方案：

步骤一：安装必要的依赖

步骤二：创建Markdown组件

<template>
  <div class="markdown-body" v-html="renderedContent"></div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import MarkdownIt from 'markdown-it'
import mk from 'markdown-it-katex'
import breaks from 'markdown-it-breaks'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-light.css'
import 'katex/dist/katex.min.css'

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})

// 创建markdown-it实例并配置插件
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
      } catch (__) {}
    }
    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
  }
})
.use(mk) // 启用KaTeX数学公式支持
.use(breaks); // 启用换行支持

// 配置链接在新窗口打开
const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
  return self.renderToken(tokens, idx, options);
};
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
  tokens[idx].attrPush(['target', '_blank']);
  return defaultRender(tokens, idx, options, env, self);
};

// 计算渲染后的HTML
const renderedContent = computed(() => {
  return md.render(props.content || '');
});
</script>

<style>
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
  color: #24292e;
}

.markdown-body code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  padding: 0.2em 0.4em;
}

.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 3px;
  padding: 16px;
  overflow: auto;
}

.hljs {
  padding: 0;
  background: transparent;
}
</style>

步骤三：使用组件

<template>
  <div>
    <h1>Markdown 预览</h1>
    <MarkdownView :content="markdownContent" />
  </div>
</template>

<script setup>
import MarkdownView from '@/components/MarkdownView.vue'
import { ref } from 'vue'

const markdownContent = ref(`
# 标题

这是一段普通文本

## 代码示例
\`\`\`javascript
const hello = 'world';
console.log(hello);
\`\`\`

## 数学公式
$E = mc^2$

## 表格
| 姓名 | 年龄 |
| ---- | ---- |
| 张三 | 20   |
| 李四 | 25   |
`)
</script>

功能对照表

以下是React示例和Vue实现的功能对照：

补充说明

1.功能：

• Markdown渲染
• 数学公式支持
• 代码高亮
• 表格支持
• 自动链接
• 在新窗口打开链接

2.如果需要更多功能，可以添加其他markdown-it插件，例如：

3.要实现与GitHub样式一致的显示效果，可以添加：

4.然后在main.js中导入：