安装了`vue
-markdown-loader`和`github
-markdown-css`之后，在Vue项目中引入它们通常有以下步骤：
1. **安装依赖**：
使用npm或yarn添加这两个依赖：
```bash
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：
```javascript
// 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`文件中配置：
```javascript
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`的地方，直接引用即可：
```html
<template>
<div>
<vue
-markdown :content="your
MarkdownContent"></vue
-markdown>
</div>
</template>
```
完成上述步骤后，你应该能看到
markdown文件的样式已经被github
-markdown-css美化，包括代码块的样式了。
本文为优快云博客的一个示例链接，具体内容未给出，因此无法提供详细摘要。
扫一扫
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
