# @mt-plugin/mt-plugin-container

> 生成对应结构的Html容器，样式需要设置样式，可以参考[custom-block.scss](https://github.com/zengsl/mt-plugin/blob/main/packages/mt-plugin-demo-component/src/styles/content/custom-block.scss)

Latest version **0.0.2** (published 2024-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mt-plugin/mt-plugin-container
pnpm add @mt-plugin/mt-plugin-container
yarn add @mt-plugin/mt-plugin-container
bun add @mt-plugin/mt-plugin-container
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2024-01-03 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | zzz |
| Maintainers | zzzlll |
| Keywords | markdown-it, markdown-it-container, markdown-plugin |

## Links

- npm: https://www.npmjs.com/package/@mt-plugin/mt-plugin-container
- Repository: https://github.com/zengsl/mt-plugin.git#main
- Homepage: https://github.com/zengsl/mt-plugin/tree/main#readme
- Issues: https://github.com/zengsl/mt-plugin/issues
- npm.io page: https://npm.io/package/@mt-plugin/mt-plugin-container

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2024-01-03
- 0.0.1 — 2023-12-30
- 1.0.0 — 2023-12-28

## README

# 容器插件 

生成对应结构的Html容器，样式需要设置样式，可以参考[custom-block.scss](https://github.com/zengsl/mt-plugin/blob/main/packages/mt-plugin-demo-component/src/styles/content/custom-block.scss)

## 准备

> 通过`unplugin-vue-markdown`配置，需要提前安装

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

```shell
npm i unplugin-vue-markdown
```

- Vite

```shell
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
    }),
    Markdown({ /* options */ }),
  ],
})
```


- Markdown中使用Vue组件

直接导入组件或者使用`vite-plugin-components`并配置md类型


- Frontmatter

- Document head and meta

## 使用方式

- 安装

```shell
pnpm add @mt-plugin/mt-plugin-container
```

- 配置

使用预设容器

```js {5}
Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用预设的容器：warning、tip、danger
        md.use(presetContainer)
    )
    },
})
```

自定义容器

```js {5}
Markdown({
    headEnabled: true, // <--
    async markdownItSetup(md) {
        // 使用自定义容器，更多配置参考ContainerPluginOptions
        md.use(containerPlugin, { type: 'info' })
    )
    },
})
```

---
_Source: https://npm.io/package/@mt-plugin/mt-plugin-container · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._