展示 HN：Writemark，一个无需依赖的内联 Markdown 编辑 Web 组件
3 分•作者: _boffin_•2 个月前
我喜欢写 Markdown，但不喜欢在普通的文本区域里写。<p>我想要一个可以随处使用、只需引入一个 Web 组件就能搞定的东西：<p>```<p><writemark-editor name="body"></writemark-editor><p>```<p>这就是 Writemark 的由来。<p>它在你写作时实时渲染 Markdown，但 Markdown 仍然是你读取、存储和提交的值。它还支持源代码、分栏和预览模式，以及斜杠命令、表格、任务列表、代码块、原生表单支持，并提供一个 API 来添加你自己的控件。它没有运行时依赖，也不需要任何框架或内置工具栏。<p>它是完全按照我的想法编码的。这个过程非常迭代。我先粗略地实现一个功能，然后尝试使用它，发现 bug，修复它们，然后重复这个循环，直到我得到一个我喜欢写东西并且性能表现尚可的东西。<p>它最初并不是关于 AI 生成软件的实验——我只是不想再使用文本区域了。我喜欢 Markdown，我想要一个组件，可以随处使用，而无需引入整个编辑器框架。<p>它还很年轻。解析器是手工编写的，组件本质上是一个大型 JavaScript 文件，我确信还有一些边缘情况等待被发现。如果你发现了，我很乐意修复它。<p>我试图为它提供一个不错的安全网。目前它在 Chromium、Firefox 和 WebKit 上有 951 个 Playwright 测试，以及恶意输入案例、清理器模糊测试和与 CommonMark 的差异化测试。<p>我构建它是出于我自己的需求，但我认为它最终变成了一个很酷的东西。我希望你们中的一些人会喜欢它。我很想听听你们的看法，特别是如果你尝试使用它并设法弄坏了什么东西。<p>- Github：<a href="https://github.com/Brostoffed/writemark" rel="nofollow">https://github.com/Brostoffed/writemark</a><p>- NPM：<a href="https://www.npmjs.com/package/writemark-editor" rel="nofollow">https://www.npmjs.com/package/writemark-editor</a>
查看原文
I like writing Markdown, but do not like writing it inside a plain textarea.<p>I wanted something I could use anywhere by dropping in a single web component:<p>```<p><writemark-editor name="body"></writemark-editor><p>```<p>That became Writemark.<p>It renders Markdown while you write, but Markdown remains the value you read, store, and submit. It also has source, split, and preview modes, along with slash commands, tables, task lists, code blocks, native form support, and an API for adding your own controls. There are no runtime dependencies and no required framework or built in toolbar.<p>It is fully vibecoded. The process was very iterative. I knocked something out, tried using it, found bugs, fixed them, and repeated that cycle until I had something I liked writing in and that performed reasonably well.<p>It did not begin as an experiment about AI generated software -- just did not want to use textareas anymore. I like Markdown, and I wanted one component that I could use anywhere without bringing along an entire editor framework.<p>It is still very young. The parser is handwritten, the component is essentially one large JavaScript file, and I am certain there are edge cases waiting to be found. If you find one, I am happy to fix it.<p>I have tried to give it a decent safety net. It currently has 951 Playwright checks across Chromium, Firefox, and WebKit, along with hostile input cases, sanitizer fuzzing, and differential tests against CommonMark.<p>I built this because I wanted it for myself, but I think it turned into something kind of cool. I hope some of you enjoy it. I would love hearing what you think, especially if you try it and manage to break something.<p>- Github: <a href="https://github.com/Brostoffed/writemark" rel="nofollow">https://github.com/Brostoffed/writemark</a><p>- NPM: <a href="https://www.npmjs.com/package/writemark-editor" rel="nofollow">https://www.npmjs.com/package/writemark-editor</a>