# @mt-plugin/mt-plugin-demo

> 参考Element-Plus的组件展示方案实现。

Latest version **0.0.5** (published 2024-12-05) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2024-12-05 |
| First published | 2023-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.2 MB |
| 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-demo
- 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-demo

## Dependencies (3)

- [prismjs](https://npm.io/package/prismjs.md) ^1.29.0
- [escape-html](https://npm.io/package/escape-html.md) ^1.0.3
- [@mt-plugin/mt-plugin-container](https://npm.io/package/@mt-plugin/mt-plugin-container.md) ^0.0.2

## 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.5 (latest) — 2024-12-05
- 0.0.4 — 2024-01-10
- 0.0.3 — 2024-01-03
- 0.0.2 — 2023-12-30
- 0.0.1 — 2023-12-30
- 1.0.0 — 2023-12-28

## README

# Demo容器插件 

参考Element-Plus的组件展示方案实现。

## 准备

与[mt-plugin-container](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-container)一样，当前插件依赖于mt-plugin-container，需要配合使用。

在vite中增加配置别名`@d`，方便使用

```js
 alias: {
    '@d': path.resolve(__dirname, './src/docs'),
},
```

## 使用方式

### 安装

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

### 配置


- 配置Demo容器

```js 
import path from 'node:path'
import Markdown from 'unplugin-vue-markdown/vite'

// import { demoContainer, presetContainer } from '../../src/docs/core/plugins/markdown-container'
import { presetContainer } from '@mt-plugin/mt-plugin-container'
import { demoContainer } from '@mt-plugin/mt-plugin-demo'
import type { MarkdownItDemoOptions } from '@mt-plugin/mt-plugin-demo'
//  计算根目录（根据当前插件配置文件所在位置实际情况调整）
const projectRoot = path.resolve(__dirname, '..', '..')

export default function createVueMarkdown() {
    return Markdown({
        headEnabled: true, // <--
        async markdownItSetup(md) {
            md.use(presetContainer)
            // 注册Demo容器插件
            md.use(demoContainer, { projectRoot } as MarkdownItDemoOptions)
        },
    })
}
```

- 配置组件

> 也可以自行封装一个Demo组件，参考[mt-plugin-demo-component](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo-component)

mt-plugin-demo-component使用方式

```ts
// main.ts
// 文档插件
import docs from '@mt-plugin/mt-plugin-demo-component'

app.use(docs)
```


```js 
// 安装vite插件，markdown转换器
import { MarkdownDemoTransform } from '@mt-plugin/mt-plugin-demo-component'

vitePlugins.push(MarkdownDemoTransform())
```


### 使用

> 使用mt-plugin-demo-component的方式

1. 在src下创建一个docs目录，内部包含zh-CN、examples文件夹，zh-CN文件夹下包含文档说明文件，examples文件夹存放文档中需要使用的示例代码。

2. 两个目录之间的关系：zh-CN下创建一个query.md用于描述查询组件文档，examples下创建一个query文件夹，query文件夹下包含xxx.vue示例组件。

3. query.md中通过demo容器组件使用examples的示例代码，如：

```js

::: demo docsButton使用案例

query/docsButton

:::

```
docsButton使用案例为描述内容

`query/docsButton`为示例组件的相对路径，切上下方各有一个行空行

4.创建一个用于展示的vue组件，并导入默认样式

```vue
<script setup lang="ts">
import '@mt-plugin/mt-plugin-demo-component/dist/index.css'
import componentDocs from '@d/zh-CN/component/query.md'
</script>

<template>
  <div class="doc-content-wrapper">
    <div class="doc-content-container">
      <componentDocs />
    </div>
  </div>
</template>

<style lang="scss" scoped>
//   外层如果有设置overflow属性，可能会影响代码内容打开后，收缩按钮在下方粘滞的效果。需要自行调整。
/*.doc-content-wrapper {
  height: calc(100vh - 84px);
  overflow: auto;
}
:deep{
  .mt-example-float-control {
    bottom: -42px
  }
}*/
</style>
```

更多内容参考[mt-plugin-demo-component](https://github.com/zengsl/mt-plugin/tree/main/packages/mt-plugin-demo-component)


## 代办

- [ ] highlight.ts中prism.languages配置更多扩展语言？
- [ ] demo组件代码区域缺少语言标记vue

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