在Vue中使用

安装

npm install wc-renderer-markdown wc-renderer-markdown-vue @lit/context^1.0.0 lit^3.1.4

使用提供的Vue组件

<script setup lang="ts">
import { onMounted, onUnmounted, ref, defineAsyncComponent } from 'vue';
import { steamMarkdownContent } from './markdown';

const Markdown = defineAsyncComponent(() => import('wc-renderer-markdown-vue').then(m => m.default));

const content = ref('');

// 模拟从服务的下载
steamMarkdownContent(v => content.value = v);

const isDark = ref(false);

onMounted(() => {
  if (typeof document !== 'undefined') {
    isDark.value = document.documentElement.classList.contains('dark');
    const observer = new MutationObserver(() => {
      isDark.value = document.documentElement.classList.contains('dark');
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
    });
    onUnmounted(() => observer.disconnect());
  }
});

</script>

<template>
  <div style='max-height: 500px; overflow-y: auto;'>
    <Markdown :dark="isDark" :content="content" :autoScroll2End="true"/>
  </div>
</template>

<style scoped>

</style>

当然也可以使用原生的Html

<wc-markdown content=" **加粗文本** ==高亮文本== <thinkingvue>自定义组件 Vue</thinkingvue>" dark />

自定义组件

• 注册组件

import { use } from 'wc-renderer-markdown-vue';
import Thinking from './Thinking.vue';
// 自定义html, htmlNode 指的是 html ，node 则是 markdown 节点。
use('htmlNode', 'thinkingvue', Thinking, 'thinkingvue');

• Thinking.vue

<script setup lang="ts">
  const slot = '<slot></slot>';
</script>

<template>
  <div>
    <div>
      <b>这是Vue的Thinking</b>
    </div>
    <!--使用之前 HTML 中注册的 thinking-->
    <wc-thinking v-html="slot"/>
    <!-- <slot></slot> 与vue 的slot 冲突，因此使用 v-html 指令 -->
  </div>
</template>