Markdown to HTML 转换组件

一个轻量级的Web组件，让您轻松实现Markdown到HTML的实时转换

特性介绍

完整的Markdown支持

支持标题、列表、链接、图片、代码块等常用Markdown语法

实时预览

输入即时转换，所见即所得的编辑体验

Web Component

以Web Component形式提供，易于集成到任何网页中

轻量级

无需依赖，体积小巧，加载迅速

在线演示

实时预览

使用教程

1. 基本使用

组件提供了多种初始化方式，选择最适合你的方式：

<!-- 使用content属性 -->
<md-to-html content="# Hello World"></md-to-html>

<!-- 使用markdown或md属性 -->
<md-to-html markdown="# Hello World"></md-to-html>
<md-to-html md="# Hello World"></md-to-html>

<!-- 使用innerHTML方式 -->
<md-to-html>
    # Hello World
</md-to-html>

2. 实时预览功能

创建一个实时预览的Markdown编辑器：

<textarea id="editor" placeholder="输入Markdown文本..."></textarea>
<md-to-html id="preview"></md-to-html>

<script>
    const editor = document.getElementById('editor');
    const preview = document.getElementById('preview');

    editor.addEventListener('input', () => {
        preview.setAttribute('content', editor.value);
    });
</script>

3. JavaScript API

组件提供了丰富的API接口：

const md = document.getElementById('markdown');

// 设置Markdown内容
md.setContent('# Hello World');
md.setMarkdown('# Hello World');  // 同上
md.render('# Hello World');        // 同上

// 获取HTML内容
const html = md.getHTML();

// 监听渲染完成事件
md.addEventListener('rendered', (event) => {
    console.log('Markdown已渲染完成');
});

4. 自定义样式

你可以通过CSS自定义组件的样式：

md-to-html {
    /* 自定义容器样式 */
    display: block;
    padding: 1rem;
}

md-to-html h1 {
    /* 自定义标题样式 */
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

md-to-html pre {
    /* 自定义代码块样式 */
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
}

5. 最佳实践

以下是一些使用组件的最佳实践：

// 1. 动态加载内容
async function loadMarkdown() {
    const response = await fetch('content.md');
    const markdown = await response.text();
    document.querySelector('md-to-html').setContent(markdown);
}

// 2. 与表单集成
<form onsubmit="handleSubmit(event)">
    <textarea id="editor" required></textarea>
    <md-to-html id="preview"></md-to-html>
    <button type="submit">提交</button>
</form>