安装了vue-markdown-loader github-markdown-css后怎么引入

安装了`vue-markdown-loader`和`github-markdown-css`之后，在Vue项目中引入它们通常有以下步骤：

1. **安装依赖**：
使用npm或yarn添加这两个依赖：

   npm install --save-dev vue-loader vue-style-loader css-loader style-loader markdown-it marked github-markdown-css
   # 或者使用yarn
   yarn add -D vue-loader vue-style-loader css-loader style-loader markdown-it marked github-markdown-css

2. **配置webpack**：
在`vue.config.js`（对于Vue CLI 3.x及以上）或主项目的`webpack.config.js`中，添加对应的loader规则，以便处理`.md`文件。这里假设你已经配置了一个名为`vue`的loader：

   // vue.config.js (for Vue CLI 3.x)
   module.exports = {
     chainWebpack: config => {
       config.module
         .rule('md')
         .test(/\.md$/) // 匹配.md文件
         .use('vue-loader') // 使用vue-loader处理
         .tap(options => ({
           loader: 'vue-markdown-loader',
           options: {
             markdownItOptions: {
               html: true, // 允许html标签，适用于github-markdown-css
               use: ['@gfm/url', '@gfm/strikethrough'] // 添加支持的特性
             },
             highlight: true, // 启用代码高亮
             css: [
               path.resolve(__dirname, 'node_modules/github-markdown-css/css/github-markdown.css'), // 引入github-markdown-css
             ],
           }),
         }));
     },
   };

或者在单独的`markdown-loader.js`文件中配置：

   import MarkdownIt from 'markdown-it';
   import prism from 'prismjs';

   const mdLoader = {
     test: /\.md$/,
     use: [
       {
         loader: 'vue-loader',
         options: {
           loaders: {
             markdown: {
               loader: 'vue-markdown-loader',
               options: {
                 markdownIt: new MarkdownIt().use(prism),
                 // ...其他选项...
               },
             },
           },
         },
       },
     ],
   };

   export default mdLoader;

3. **引用组件**：
在需要使用`vue-markdown`的地方，直接引用即可：

   <template>
     <div>
       <vue-markdown :content="yourMarkdownContent"></vue-markdown>
     </div>
   </template>

完成上述步骤后，你应该能看到markdown文件的样式已经被github-markdown-css美化，包括代码块的样式了。