# san-cli-markdown-loader

> san markdown loader

Latest version **0.1.0** (published 2020-05-19) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2020-05-19 |
| First published | 2020-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 28 |
| Unpacked size | 47.2 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 98 |
| Author | ksky521 |
| Maintainers | ksky521 |
| Keywords | san, loader, webpack, markdown, markdown-loader, san-loader |

## Links

- npm: https://www.npmjs.com/package/san-cli-markdown-loader
- Repository: https://github.com/ecomfe/san-cli
- Homepage: https://ecomfe.github.io/san-cli
- Issues: https://github.com/ecomfe/san-cli/issues
- npm.io page: https://npm.io/package/san-cli-markdown-loader

## Dependencies (28)

- [debug](https://npm.io/package/debug.md) ^4.1.1
- [prismjs](https://npm.io/package/prismjs.md) ^1.18.0
- [hash-sum](https://npm.io/package/hash-sum.md) ^2.0.0
- [posthtml](https://npm.io/package/posthtml.md) ^0.12.0
- [lru-cache](https://npm.io/package/lru-cache.md) ^5.1.1
- [diacritics](https://npm.io/package/diacritics.md) ^1.3.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.3.4
- [escape-html](https://npm.io/package/escape-html.md) ^1.0.3
- [gray-matter](https://npm.io/package/gray-matter.md) ^4.0.2
- [markdown-it](https://npm.io/package/markdown-it.md) ^10.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.3.4
- [markdown-it-div](https://npm.io/package/markdown-it-div.md) ^1.1.0
- [markdown-it-ins](https://npm.io/package/markdown-it-ins.md) ^3.0.0
- [markdown-it-sub](https://npm.io/package/markdown-it-sub.md) ^1.0.0
- [markdown-it-sup](https://npm.io/package/markdown-it-sup.md) ^1.0.0
- [posthtml-render](https://npm.io/package/posthtml-render.md) ^1.1.5
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.3.4
- [markdown-it-attrs](https://npm.io/package/markdown-it-attrs.md) ^3.0.1
- [markdown-it-emoji](https://npm.io/package/markdown-it-emoji.md) ^1.4.0
- [markdown-it-anchor](https://npm.io/package/markdown-it-anchor.md) ^5.2.5
- [markdown-it-imsize](https://npm.io/package/markdown-it-imsize.md) ^2.0.1
- [markdown-it-deflist](https://npm.io/package/markdown-it-deflist.md) ^2.0.3
- [markdown-it-footnote](https://npm.io/package/markdown-it-footnote.md) ^3.0.1
- [markdown-it-cjk-breaks](https://npm.io/package/markdown-it-cjk-breaks.md) ^1.1.2
- [markdown-it-task-lists](https://npm.io/package/markdown-it-task-lists.md) ^2.1.1
- [markdown-it-multimd-table](https://npm.io/package/markdown-it-multimd-table.md) ^4.0.0
- [markdown-it-table-of-contents](https://npm.io/package/markdown-it-table-of-contents.md) ^0.4.4

## 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.1.0 (latest) — 2020-05-19
- 0.1.0-alpha.1 (prerelease) — 2020-04-26
- 0.1.0-alpha.6 — 2020-05-09
- 0.1.0-alpha.5 — 2020-04-29
- 0.1.0-alpha.4 — 2020-04-26
- 0.1.0-0.1.0-alpha.1.0 — 2020-04-26
- 0.1.0-alpha.0 — 2020-04-26

## README

# san-cli-markdown-loader

专门给 Component 命令使用的 markdown loader，会将 markdown 文档中的 demo 部分代码解析出来，生成可展现的 [San](https://baidu.github.io/san/) 组件。

## Usage

```js
{
    test: /\.md$/,
    use: [{loader: 'san-cli-markdown-loader': options: {template: 'path.template'}}]
}
```

## template 说明

支持自定义 template，默认 template 为：

```html
<template>
    <section class="code-box {{isExpand?'expand':''}}">
        <section class="code-box-demo"><code-preview /></section>
        <section class="code-box-meta markdown">
            <text-placeholder />
            <span class="code-expand-icon" on-click="toggleExpand">
                <img
                    alt="expand code"
                    src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
                    class="{{isExpand?'code-expand-icon-hide':'code-expand-icon-show'}}"
                />
                <img
                    alt="expand code"
                    src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
                    class="{{isExpand?'code-expand-icon-show':'code-expand-icon-hide'}}"
                />
            </span>
        </section>
        <section class="highlight-wrapper {{isExpand?'highlight-wrapper-expand':''}}">
            <code-placeholder />
        </section>
    </section>
</template>
<script>
    export default {
        initData() {
            return {
                isExpand: false
            };
        },
        toggleExpand() {
            this.data.set('isExpand', !this.data.get('isExpand'));
        }
    };
</script>
```

特殊标签说明：

-   `<code-preview/>`： markdown 中的 `fence`部分 san 代码会被渲染出来的效果
-   `<text-placeholder/>`： markdown 中`text`标签内部的文案转 html
-   `<code-placeholder/>`：markdown 中的 `fence`部分 san 代码，被 prismjs 语法高亮

## 参数

-   ignore：正则忽略
-   template：模板路径
-   context：目录上下文
-   i18n = 'cn'：默认解析的文档语言

## Markdown 的 San 代码执行

1. 将代码由`<sanbox>`标签包裹起来
2. 使用`:::`的扩展语法，定义文案部分，后面可以添加对应的文案语言，例如：`cn`，会根据 loader 配置的`i18n`来选取文案内容；
3. 使用`\`\`\`html`语法创建 San Component 代码

````md
<sanbox>
:::
#### 我是 title
这是是描述的内容
:::

```html
<template>
    <div id="hello-demo">
        <hello />
        <h2>{{text}}</h2>
    </div>
</template>
<style lang="less">
    @red: red;
    #hello-demo {
        h2 {
            color: @red;
        }
    }
</style>
<script>
    import Hello from './component.js';
    export default {
        initData() {
            return {
                text: '这里是副标题'
            };
        },
        components: {
            hello: Hello
        }
    };
</script>
```
````

</sanbox>
```

> 需要注意的是如果 js 的 `import` 路径可以通过`san.config.js`来设置对应的`alias`。

## 应用举例

通过下面的代码可以自由组合想实现的页面：

```js
import {Component} from 'san';
// 获取fence中的语法高亮代码
import HighlightCode from './demo.md?san-md-picker&get=highlight-code&eq=0';
// 获取sanbox中的md转html后的代码
import TextTag from './demo.md?san-md-picker&get=text-tag&eq=0';
// 获取sanbox中代码部分转成的san component
import Component from './demo.md?san-md-picker&get=san-component&eq=0';
// 获取sanbox完整部分
import Sanbox from './demo.md?san-md-picker&get=sanbox&eq=0';

export default class Index extends Component {
    static template = `
        <div>
            <basic/>
        </div>
    `;
    static components = {
        basic: Sanbox
    };
}
```

通过这种方式可以直接预览 Markdown 文档中的代码部分效果。

比如想创建一个移动页面嵌入到 iframe，这个移动页面只需要 Markdown 文件中 San Component 部分预览功能，可以创建个`preview.js`，然后引入`import Component from './demo.md?san-md-picker&get=sanbox:san-component&eq=0';`

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