# vue-cli-plugin-markdown-loader

> A Vue Cli 4 plugin to import markdown with marked and highlight.js

Latest version **1.5.2** (published 2024-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cli-plugin-markdown-loader
pnpm add vue-cli-plugin-markdown-loader
yarn add vue-cli-plugin-markdown-loader
bun add vue-cli-plugin-markdown-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2024-01-13 |
| First published | 2022-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 10.5 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | STYZY |
| Maintainers | styzyreal |
| Keywords | markdown, markdown-it, markdown-it-container, markdown-it-emoji, github-markdown-css, highlight.js, vue, vue-markdown-loader, cli, vue-cli, vue-cli4, vue-cli-plugin, webpack |

## Links

- npm: https://www.npmjs.com/package/vue-cli-plugin-markdown-loader
- Repository: https://github.com/styzy/vue-cli-plugin-markdown-loader
- Homepage: https://github.com/styzy/vue-cli-plugin-markdown-loader#readme
- Issues: https://github.com/styzy/vue-cli-plugin-markdown-loader/issues
- npm.io page: https://npm.io/package/vue-cli-plugin-markdown-loader

## Dependencies (9)

- [pug](https://npm.io/package/pug.md) ^3.0.2
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.10
- [hash-sum](https://npm.io/package/hash-sum.md) ^2.0.0
- [vue-loader](https://npm.io/package/vue-loader.md) ^15.0.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.3.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.4.0
- [markdown-it-emoji](https://npm.io/package/markdown-it-emoji.md) ^2.0.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^5.1.0
- [markdown-it-container](https://npm.io/package/markdown-it-container.md) ^3.0.0

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.5.2 (latest) — 2024-01-13
- 1.5.1 — 2023-12-07
- 1.5.0 — 2022-04-07
- 1.4.0 — 2022-03-10
- 1.3.0 — 2022-03-10
- 1.2.0 — 2022-03-09
- 1.1.1 — 2022-02-25
- 1.1.0 — 2022-02-23
- 1.0.10 — 2022-02-23
- 1.0.9 — 2022-02-23
- 1.0.8 — 2022-02-23
- 1.0.7 — 2022-02-23
- 1.0.6 — 2022-02-23
- 1.0.5 — 2022-02-23
- 1.0.4 — 2022-02-23
- … 3 more at https://npm.io/package/vue-cli-plugin-markdown-loader/versions

## README

# Vue CLI Plugin Markdown Loader

这是一款基于 `Vue Cli 4` 的插件，它让你可以直接将 `markdown` 当做 `Vue` 的组件来使用。
`vue-cli-plugin-markdown-loader` 基于 `markdown-it` 实现，并且内置了 `markdown-it-emoji` 和 `markdown-it-container` 插件。样式上集成了 `github-markdown-css` 的语法样式以及 `highlight.js` 的代码风格样式。

## 快速安装

```bash
vue add markdown-loader
```

## 基本使用

```javascript
< template >
    Markdown <
    /template>

    <
    script >
    import Markdown from "@/assets/markdown.md";

export default {
    components: {
        Markdown
    }
}; <
/script>
```

<!-- >请注意：容器上的 `class="markdown-body"` 是必须的，因为这是 `github-markdown-css` 的样式容器类名。 -->

## 代码块样式

### 必选样式 github-markdown-css

```javascript
// Vue的入口main.js
import 'github-markdown-css'
```

因为markdown的基本样式都依靠 `github-markdown-css` 渲染，所以这是必须引入的样式

### 可选样式 highlight.js代码风格

```javascript
// Vue的入口main.js
import 'highlight.js/styles/atom-one-dark.css'
// 注意：如果使用了highlight.js的atom-one-dark代码风格，请引入下方的atom-one-dark.fixed.css,修复因为与github-markdown-css样式冲突带来的问题。
import 'vue-cli-plugin-markdown-loader/atom-one-dark.fixed.css'
```

## 配置

```javascript
// vue.config.js

module.exports = {
    pluginOptions: {
        'markdown-loader': {
            // 渲染的组件的根节点标签
            wrapperTag: 'div',
            // 渲染的组件的根节点class
            wrapperClassName: 'markdown-body',
            // 是否使用缓存，默认为true
            useCache: false,
            // 块设置
            container: {
                // demo块
                demo: {
                    // 块名字
                    spoiler: 'demo',
                    // 渲染的标签名
                    tag: 'demo-box'
                },
                // 自定义的块
                customBlocks: [
					{
                        spoiler: 'tip',
                        tag: 'div'
                    },
                    {
                        spoiler: 'success',
                        tag: 'div'
                    },
                    {
                        spoiler: 'warning',
                        tag: 'div'
                    },
                    {
                        spoiler: 'error',
                        tag: 'div'
                    }
                ]
            }
        }
    }
}
```

## 注意

如果你在 `md` 文件中使用了`<script>`标签，并且开启了`Eslint`，需要在项目根目录配置`.eslintignore`文件来忽略`Eslint`对`md`文件的检查。

下面是`.eslintignore`文件的配置：

```
**/*.md
```

## 示例

[VueTabRouter](http://vue-tab-router.styzy.cn) 官方文档基于 `vue-cli-plugin-markdown-loader` 实现，可以参考该文档 `markdown` 样式。

## 引用

[markdown-it](https://github.com/markdown-it/markdown-it)

[markdown-it-container](https://github.com/markdown-it/markdown-it-container)

[markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji)

[github-markdown-css](https://github.com/sindresorhus/github-markdown-css)

[highlight.js](https://github.com/highlightjs/highlight.js)

---
_Source: https://npm.io/package/vue-cli-plugin-markdown-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._