MDJS 简介

MDJS 是由 Open Web Components 创始人 Thomas Allmer 发布的一种 Markdown 变体，允许开发者在 Markdown 文档中嵌入可运行的 JavaScript 代码。MDJS 既可以作为常规的 Markdown 内容使用，也可以通过渐进增强生成包含 Web 组件的交互式文档。

MDJS 的核心功能

MDJS 在 Markdown 的围栏代码块语法基础上增加了三个新的构造：script、story 和 preview-story。

1. script 注解：允许开发者在 Markdown 中加载 Web 组件并在文档中使用。

   import './my-component.js';

   
   # This is my component  
   <my-component></my-component>

2. story 注解：用于生成交互式组件的工厂函数，通常与 lit-html 模板一起使用。

   export const demo = () => html`
   <demo-wc-card header="HEADER"></demo-wc-card>
   `;

3. preview-story 注解：与 story 类似，但增加了边框和显示/隐藏源代码的按钮。

   MDJS 的生成结果

   MDJS 会将 Markdown 代码转换为相应的 JavaScript 和 HTML 代码。例如，使用 story 注解的代码会生成以下内容：

   import './demo-wc-card.js';
   import { html } from 'lit-html';

export const demo = () => html`
<demo-wc-card></demo-wc-card>
`;

<h1>This is my component</h1>
<mdjs-story mdjs-story-name="demo">
#shadow-root (open)
<demo-wc-card></demo-wc-card>
</mdjs-story>

### MDJS 的应用场景
MDJS 可以用于以下场景：
- 本地开发：通过 `es-dev-server` 使用。
- Storybook：用于构建组件库文档。
- GitHub Pages：例如 README 或 issue 页面。
- [webcomponents.dev](https://webcomponents.dev/) IDE：在线编辑和预览。

### MDJS 的优势
1. **渐进增强**：MDJS 文档在没有支持的情况下仍能正常显示，但在支持的环境中可以变成交互式演示。
2. **广泛兼容**：MDJS 源文件可以在任何支持 Markdown 的地方使用。
3. **与 MDX 对比**：MDJS 使用标准 JavaScript 和 Web 组件，而 MDX 依赖于 React 生态系统的 JSX。

### MDJS 的未来发展
MDJS 的未来计划包括：
- 改进样式。
- 支持其他渲染器（如 `lit-html` 之外的其他渲染器）。
- 代码片段高亮显示等。

开发者可以通过 [https://open-wc.org/mdjs/](https://open-wc.org/mdjs/) 查看官方文档。

### 总结