展示HN:Writemark,一个无依赖的网页组件,用于行内Markdown编辑
我喜欢写Markdown,但不喜欢在普通的文本区域中写它。
我想要一个可以随处使用的组件,只需插入一个网页组件即可:
```html
<writemark-editor name="body"></writemark-editor>
```
这就是Writemark的诞生。
它在你写作时实时渲染Markdown,但Markdown仍然是你读取、存储和提交的值。它还具有源代码、分屏和预览模式,以及斜杠命令、表格、任务列表、代码块、本地表单支持和用于添加自定义控件的API。它没有运行时依赖,也不需要任何框架或内置工具栏。
它是完全按需编码的。这个过程非常迭代。我先做出一个版本,尝试使用它,发现错误,修复它,然后重复这个循环,直到我得到一个我喜欢写作的版本,并且性能也相当不错。
它最初并不是一个关于AI生成软件的实验——我只是想不再使用文本区域。我喜欢Markdown,我希望有一个可以在任何地方使用的组件,而不需要携带整个编辑器框架。
它仍然很年轻。解析器是手写的,组件本质上是一个大型JavaScript文件,我相信还有一些边缘案例等待被发现。如果你发现了,我很乐意修复它。
我尽量给它提供一个不错的安全网。目前,它在Chromium、Firefox和WebKit上有951个Playwright检查,以及恶意输入案例、清理器模糊测试和与CommonMark的差异测试。
我构建这个是因为我自己需要它,但我觉得它变成了一些很酷的东西。希望你们中的一些人会喜欢它。我很想听听你们的想法,特别是如果你尝试并成功破坏了某些东西。
- GitHub: [https://github.com/Brostoffed/writemark](https://github.com/Brostoffed/writemark)
- NPM: [https://www.npmjs.com/package/writemark-editor](https://www.npmjs.com/package/writemark-editor)
查看原文
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>