Skip to content

Latest commit

 

History

History
184 lines (143 loc) · 7.47 KB

README.md

File metadata and controls

184 lines (143 loc) · 7.47 KB
Raw

HyperMD

HyperMD Markdown Editor

打破 Markdown 写作 和 预览 的 次元壁！

NPM version Build Status

在线体验 | [功能演示][examples] | [开发文档][doc]

English

快速开始

// npm install --save hypermd codemirror
var HyperMD = require('hypermd')
var myTextarea = document.getElementById('input-area')
var editor = HyperMD.fromTextArea(myTextarea)

Remix on Glitch

适用于 RequireJS, Parcel, webpack, 或者用各种HTML标签来引入库的纯粹的环境。 参考文档

选择 HyperMD 的 N 个理由

HyperMD 是一组 [CodeMirror][] 插件、模式、主题、编辑器命令（Commands）和按键绑定（KeyMap）等。

你可以在一个页面上同时使用 HyperMD 和 CodeMirror。

🌈 写作与预览，只需一个框

  • 各种常规 Markdown 元素
    • 粗体字、斜体字、删除线、Code
    • 链接、图片
    • 标题 / 引用块 / 代码块 / 列表 / 水平分割线
  • 扩展的 Markdown 语法
    • 简单表格
    • 脚注 1
    • TODO 列表 (可点击勾选框, 改变状态)
    • YAML Front Matter
  • 以及一些特殊玩法，例如……

💪 更好的 Markdown 写作体验

  • 复制粘贴，或者拖拽文件，即可 上传图片 和文件
  • 按着 Alt 点击 可以打开链接，或者跳到脚注 1
  • 鼠标悬停 可以查看脚注内容
  • 复制粘贴 自动转换网页内容为 Markdown 4
  • 好用的 按键绑定 (也叫做 KeyMap)

🎁 CodeMirror 的好处，这里都有份

  • 代码块语法高亮 支持数百种语言 5。高亮规则可按需动态载入。
  • 灵活可配置的按键绑定与 CodeMirror API
  • Diff and Merge
  • 各种主题 6
  • 绝大多数 CodeMirror 插件 都可在 HyperMD 里使用

🔨 可扩展，可配置

  • Power Pack 机制，用各种第三方库和服务增强 HyperMD 功能
    • 例如 [MathJax][], [marked][], [KaTeX][] ...
    • 详细列表
  • HyperMD 本身也是很模块化的。

🎹 特制的按键绑定(KeyMap) "HyperMD":

  • 表格
    • 回车 使用 | column | line | 创建表格
    • 回车 插入一行或者结束表格（如果最后一行的格子都是空的）
    • Tab 和 Shift-Tab 在表格间切换
  • 列表
    • Tab 和 Shift-Tab 改变当前列表项的缩进
  • 格式化 光标旁边的单词（或者选中的文字）
    • Ctrl+B 加粗
    • Ctrl+I 斜体
    • Ctrl+D 删除线

特别感谢

💎 服务和资源

IcoMoon - The IconPack(免费版)
Demo Page uses IcoMoon icons. Related files are stored in demo/svgicon. 		CodeCogs - An Open Source Scientific Library
FoldMath uses codecogs' service as the default TeX MathRenderer.
(You may load PowerPack to use other renderer, eg. KaTeX or MathJax)
SM.MS - 免费图床服务
在线演示页 和 PowerPack/insert-file-with-smms 使用了 SM.MS 开放API来上传和存储用户插入的图片。
(若你想在你的编辑器里使用 SM.MS 服务，请使用对应 PowerPack) 		emoji-toolkit - 开放的 emoji 表情图标
在线演示页 和 PowerPack/fold-emoji-with-emoji-toolkit 使用了 emoji-toolkit 免费提供的 emoji 表情图标 (免费版许可)
（你也可以使用其他图标库，例如来自 twitter 的 twemoji）
CodeMirror - In-browser code editor.
RequireJS - A JavaScript AMD module loader.
KaTeX - The fastest math typesetting library for the web.
marked, turndown and more remarkable libs.

🌟 Sponsors

🙏 Sponsors (按日期排序)

☕Phithon ☕c*i ☕*Yuan ☕*Xiuzhang ☕*Junjie 🌟圆伞科技 ☕*Di

一起来搞事

HyperMD 是 [laobubu][] 的一个开源项目，欢迎你：

[CodeMirror]: https://codemirror.net/ 很强的网页端文本编辑器 [RequireJS]: http://requirejs.org/ 用于 JavaScript 的 AMD 模块加载器 [MathJax]: https://www.mathjax.org/ 支持 Tex 的数学公式渲染组件 [marked]: https://github.com/chjj/marked/ 一个 markdown 解析器和渲染器 [turndown]: https://github.com/domchristie/turndown 一个 HTML 转 Markdown 的组件 [turndown-plugin-gfm]: https://github.com/domchristie/turndown-plugin-gfm 为 turndown 添加删除线和表格支持 [katex]: https://khan.github.io/KaTeX/ [laobubu]: https://laobubu.net/ HyperMD 的作者 [doc]: ./index.md [examples]: https://laobubu.net/HyperMD/docs/examples/

Footnotes

  1. 按着 Ctrl 点击也行 ↩ ↩2

  2. 公式块和代码块类似， 使用 $$ 包裹你的公式，支持多行 ↩

  3. 此功能默认不启用，开启方法请参阅文档； #用两个井号 打 带空格的标签# ↩

  4. 使用 Ctrl+Shift+V 可以粘贴纯文本 ↩

  5. 只要是 CodeMirror 支持的都能用 ↩

  6. 如果主题没有为 HyperMD 特殊设计，那么用起来可能会有点难受 ↩