gfm插件存在表格无法加载的问题

Question

gfm插件存在表格无法加载的问题

Wugensheng3 opened this issue 10 months ago · 5 comments

Wugensheng3 commented 10 months ago

结果展示

其他对应的md内容都能渲染除了table

项目环境

vue3+vite+ts,使用pnpm多次下载结果都一样

pnpm命令执行结果

`pnpm install @bytemd/plugin-gfm --force
WARN using --force I sure hope you know what you are doing
WARN 10 deprecated subdependencies found: @types/vfile-message@2.0.0, resolve-url@0.2.1, source-map-resolve@0.5.3, source-map-url@0.4.1, sourcemap-codec@1.4.8, stable@0.1.8, sv
go@1.3.2, trim@0.0.1, urix@0.1.0, uuid@3.4.0
Packages: +1415
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1415, reused 1407, downloaded 8, added 1415, done
WARN Issues with peer dependencies found
.
├─┬ stylelint-config-recommended-vue 1.4.0
│ └─┬ stylelint-config-recommended 11.0.0
│ └── ✕ unmet peer stylelint@^15.3.0: found 14.16.1
└─┬ vite-plugin-vue-svg 0.1.0
└── ✕ unmet peer vite@^2.0.0-beta.61: found 3.2.5

Done in 19.2s
`

Answer 1 · 2024-04-04T14:45:39.000Z

对应代码展示

<script setup lang="ts">
  import gfm from '@bytemd/plugin-gfm';
  import breaks from '@bytemd/plugin-breaks';
  import highlight from "@bytemd/plugin-highlight";
  import math from '@bytemd/plugin-math-ssr';
  import { Editor } from '@bytemd/vue-next';
  import { ref } from 'vue';
  import 'bytemd/dist/index.css'

  const plugins = [
    gfm(),
    breaks(),
    highlight(),
    math(),
    // Add more plugins here
  ];

  interface Props {
    value: string;
    handleChange: (v: string) => void;
  }

  const props = withDefaults(defineProps<Props>(), {
    value: '# 故事的结局由我来书写',
    handleChange: (v: string) => {
      console.log(v);
    },
  });
  const uploadImages = async (files) => {
    
    // 这里是你的图片上传逻辑
    // 你需要返回一个字符串数组，数组中的每个字符串都是一个图片的URL
    const urls = [];
    return urls;
  };
</script>

<template>
  <Editor
    :value="props.value"
    :plugins="plugins"
    @change="props.handleChange"
    mode="auto"
    :uploadImages="uploadImages"
  />
</template>

<style lang="less">
.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {
  display: none;
}
</style>

Answer 2 · 2024-04-05T05:54:29.000Z

已解决,通过下载github的md css

Answer 3 · 2024-07-10T08:35:37.000Z

已解决,通过下载github的md css

怎么弄

Answer 4 · 2024-07-10T12:39:36.000Z

已解决,通过下载github的md css

怎么弄
关键代码在这里: import 'juejin-markdown-themes/dist/juejin.min.css';
你首先需要去找一些markdown的css依赖,然后我这里应该是直接导入就可以了,你可以去github找找我用的是掘金的,之前用过github的,你可以去找找看依赖(不太确定依赖这个说法对不对,我是写后端的)
下面是我的相关代码:

Answer 5 · 2024-07-10T12:40:40.000Z

已解决,通过下载github的md css

怎么弄

核心是缺少依赖,因为这里是没有自带css样式的