san-cli-markdown-loader
专门给 Component 命令使用的 markdown loader,会将 markdown 文档中的 demo 部分代码解析出来,生成可展现的 San 组件。
Usage
test: /\.md$/ use: loader: 'san-cli-markdown-loader': options: template: 'path.template'
template 说明
支持自定义 template,默认 template 为:
特殊标签说明:
<code-preview/>
: markdown 中的fence
部分 san 代码会被渲染出来的效果<text-placeholder/>
: markdown 中text
标签内部的文案转 html<code-placeholder/>
:markdown 中的fence
部分 san 代码,被 prismjs 语法高亮
参数
- ignore:正则忽略
- template:模板路径
- context:目录上下文
- i18n = 'cn':默认解析的文档语言
Markdown 的 San 代码执行
- 将代码由
<sanbox>
标签包裹起来 - 使用
:::
的扩展语法,定义文案部分,后面可以添加对应的文案语言,例如:cn
,会根据 loader 配置的i18n
来选取文案内容; - 使用
\
``html`语法创建 San Component 代码
<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>```
需要注意的是如果 js 的
import
路径可以通过san.config.js
来设置对应的alias
。
应用举例
通过下面的代码可以自由组合想实现的页面:
;// 获取fence中的语法高亮代码;// 获取sanbox中的md转html后的代码;// 获取sanbox中代码部分转成的san component;// 获取sanbox完整部分; 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';