<template>
  <a-card class="about">
    <byte-md-viewer :value="data" :plugins="plugins" />
  </a-card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import gfm from '@bytemd/plugin-gfm';
  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
  import highlight from '@bytemd/plugin-highlight';
  import 'bytemd/dist/index.min.css';
  import 'github-markdown-css/github-markdown-light.css';
  import 'github-markdown-css/github-markdown-light.css';

  defineProps<{
    data: any;
  }>();

  // 插件
  const plugins = ref([
    gfm({
      locale: zh_HansGfm
    }),
    highlight()
  ]);
</script>
<style lang="less">
  .about {
    max-width: 1000px;
    border: 4px solid #f3f3f3;
  }
  .about * {
    padding: 8px;
    max-width: 1000px;
  }
</style>
