如何让 qmarkdown 渲染出 markdown 效果?

Question

如何让 qmarkdown 渲染出 markdown 效果

我参考 https://qmarkdown.netlify.app/all-about-qmarkdown/installatio... 安装了 qmarkdown

又参考了 https://qmarkdown.netlify.app/developing/using-qmarkdown 使用 qmarkdown

但是渲染不出 markdown 的效果，不知道是差哪个步骤了

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import JsonViewer from "vue-json-viewer";
import TopBar from "@/components/common/TopBar.vue";

import Plugin from "@quasar/quasar-ui-qmarkdown/src/QMarkdown.js";
import "@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass";

const app = createApp(App).use(router).use(Antd).use(JsonViewer).use(Plugin);

app.component("top-bar", TopBar);

app.mount("#app");

Demo.vue

<template>
    <div class="q-pa-md q-gutter-sm">
        <!-- eslint-disable vue/html-indent -->
        <q-markdown :plugins="plugins">
            ### Solar System Exploration, 1950s – 1960s

            - [ ] Mercury
            - [x] Venus
            - [x] Earth (Orbit/Moon)
            - [x] Mars
            - [ ] Jupiter
            - [ ] Saturn
            - [ ] Uranus
            - [ ] Neptune
            - [ ] Comet Haley
        </q-markdown>
        <!-- eslint-enable vue/html-indent -->
    </div>
</template>

或者说这类问题如何排查呢？

---

是不是还需要把 script 也给贴上？

但是这样就报错了

<template>
    <div class="q-pa-md q-gutter-sm">
        <!-- eslint-disable vue/html-indent -->
        <q-markdown :plugins="plugins">
            ### Solar System Exploration, 1950s – 1960s

            - [ ] Mercury
            - [x] Venus
            - [x] Earth (Orbit/Moon)
            - [x] Mars
            - [ ] Jupiter
            - [ ] Saturn
            - [ ] Uranus
            - [ ] Neptune
            - [ ] Comet Haley
        </q-markdown>
        <!-- eslint-enable vue/html-indent -->
    </div>
</template>


<script>
import { defineComponent, ref, watch } from 'vue'
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'
import taskLists from 'markdown-it-task-lists'

export default defineComponent({
  name: 'TaskLists',
  components: {
    QMarkdown
  },

  setup () {
    const plugins = [taskLists]

    return {
      plugins
    }
  }
})
</script>

但是报错 Can't resolve 'markdown-it-task-lists' 了，这个 markdown-it-task-lists 是自己写的还是怎么来的呢？

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                     11:59:59 AM

 error  in ./src/components/Demo.vue?vue&type=script&lang=js

Module not found: Error: Can't resolve 'markdown-it-task-lists' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src/components'

ERROR in ./src/components/Demo.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Demo.vue?vue&type=script&lang=js) 4:0-47
Module not found: Error: Can't resolve 'markdown-it-task-lists' in '/Users/ponponon/Desktop/code/work/pon-it/tracking-king/src/components'
 @ ./src/components/Demo.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
 @ ./src/components/Demo.vue 2:0-55 3:0-50 3:0-50 6:49-55
 @ ./src/router/index.js 41:0-41 60:13-17
 @ ./src/main.js 3:0-30 10:31-37

webpack compiled with 1 error

---

我知道了，markdown-it-task-lists 是第三方包

yarn add markdown-it-task-lists

但是现在还是渲染不出来

不知道是不是和下面的警告有关系？

[Vue warn]: injection "_q_" not found. 
  at <QMarkdown plugins= 
Array [ exports(md, options)
 ]
 > 
  at <TaskLists onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>