告别静态文档！yn编辑器HTML小程序开启Markdown交互新时代
项目地址: https://gitcode.com/GitHub_Trending/yn/yn 还在为静态Markdown文档的局限性而苦恼？yn编辑器通过HTML小程序功能，让你的文档瞬间拥有动态交互能力！一文掌握如何在Markdown中嵌入自定义工具，实现文档的智能化升级。
读完本文你将掌握
- HTML小程序的核心概念与优势
- 三种小程序创建方法及完整示例
- 小程序开发的最佳实践技巧
- 常见应用场景与实战案例
什么是HTML小程序？
HTML小程序是yn编辑器的一项革命性功能，允许你在Markdown文档中直接嵌入可交互的HTML组件。不同于传统静态内容，小程序能够响应用户操作、处理数据、调用API，真正实现文档的智能化。
快速创建你的第一个小程序
在yn编辑器中，创建HTML小程序只需简单几步：
<!-- --applet-- 简易计算器 -->
<script>
function calculate() {
const num1 = parseFloat(document.getElementById('num1').value)
const num2 = parseFloat(document.getElementById('num2').value)
const result = num1 + num2
document.getElementById('result').innerText = `结果: ${result}`
}
</script>
<div style="padding: 10px;">
<input type="number" id="num1" placeholder="数字1">
<input type="number" id="num2" placeholder="数字2">
<button onclick="calculate()">计算求和</button>
<div id="result" style="margin-top: 10px;"></div>
</div>
三种小程序开发模式
1. 基础HTML模式
适合简单交互需求，直接使用HTML+JavaScript实现功能。
<!-- --applet-- 时间显示 -->
<div id="clock" style="font-size: 24px; text-align: center;"></div>
<script>
function updateClock() {
const now = new Date()
document.getElementById('clock').innerText = now.toLocaleTimeString()
}
setInterval(updateClock, 1000)
updateClock()
</script>
2. 调用编辑器API
小程序可以访问yn编辑器的完整API体系，实现深度集成。
<!-- --applet-- 文档操作 -->
<button onclick="ctx.ui.useToast().show('info', '操作成功!')">显示通知</button>
<button onclick="ctx.action.getAction('file.new-file')?.run()">新建文件</button>
3. 复杂数据处理
结合现代JavaScript特性，实现复杂业务逻辑。
<!-- --applet-- 数据转换器 -->
<script>
// 实现Base64编码解码、JSON格式化等实用功能
</script>
核心技术原理
HTML小程序基于yn编辑器的插件系统实现，核心代码位于markdown-applet.ts。每个小程序都被封装在独立的iframe中运行，确保安全隔离。
实战应用场景
学习辅助工具
<!-- --applet-- 单词记忆卡 -->
<script>
// 实现闪卡学习功能，支持自定义词库
</script>
数据可视化
<!-- --applet-- 数据图表 -->
<script>
// 集成ECharts等图表库，动态展示数据
</script>
办公效率工具
<!-- --applet-- 会议记录模板 -->
<script>
// 提供标准化的会议记录表单和导出功能
</script>
最佳实践建议
- 性能优化：避免在小程序中加载过重资源
- 用户体验：保持界面简洁，提供明确的操作指引
- 错误处理：添加必要的异常捕获和用户提示
- 移动适配：考虑不同屏幕尺寸的显示效果
扩展学习资源
立即开始你的创作
yn编辑器的HTML小程序功能为Markdown文档带来了无限可能。无论是教学材料、技术文档还是个人笔记，都能通过小程序实现质的飞跃。
三连支持：如果本文对你有帮助，请点赞、收藏、关注，我们下期将深入探讨yn编辑器的AI辅助写作功能！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
