{"id":13509640,"url":"https://github.com/laobubu/HyperMD","last_synced_at":"2025-03-30T13:32:39.383Z","repository":{"id":41403691,"uuid":"78952857","full_name":"laobubu/HyperMD","owner":"laobubu","description":"A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.","archived":false,"fork":false,"pushed_at":"2021-01-05T03:36:46.000Z","size":1135,"stargazers_count":1485,"open_issues_count":35,"forks_count":136,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-10-29T20:00:03.277Z","etag":null,"topics":["codemirror","editor","markdown","markdown-editor","typescript","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laobubu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T16:48:39.000Z","updated_at":"2024-10-28T23:51:01.000Z","dependencies_parsed_at":"2022-07-16T15:00:47.271Z","dependency_job_id":null,"html_url":"https://github.com/laobubu/HyperMD","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laobubu%2FHyperMD","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laobubu%2FHyperMD/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laobubu%2FHyperMD/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laobubu%2FHyperMD/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laobubu","download_url":"https://codeload.github.com/laobubu/HyperMD/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222552980,"owners_count":17002160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","editor","markdown","markdown-editor","typescript","wysiwyg"],"created_at":"2024-08-01T02:01:10.855Z","updated_at":"2024-11-01T09:31:56.603Z","avatar_url":"https://github.com/laobubu.png","language":"TypeScript","readme":"# HyperMD\n\n![HyperMD Markdown Editor](./demo/logo.png)\n\n**Breaks the Wall** between *writing* and *preview*, in a Markdown Editor.\n\n[![NPM version](https://img.shields.io/npm/v/hypermd.svg?style=flat-square)](https://npmjs.org/package/hypermd) [![Build Status](https://travis-ci.org/laobubu/HyperMD.svg?branch=master)](https://travis-ci.org/laobubu/HyperMD)\n\n[Online Demo](https://laobubu.net/HyperMD/) | [Examples][] | [Documentation][doc]\n\n[中文介绍](./docs/zh-CN/README.md)\n\n\n## [Quickstart](./docs/quick-start.md)\n\n```javascript\n// npm install --save hypermd codemirror\nvar HyperMD = require('hypermd')\nvar myTextarea = document.getElementById('input-area')\nvar editor = HyperMD.fromTextArea(myTextarea)\n```\n\n[![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/hello-hypermd)\n\nAlso for RequireJS, Parcel, webpack, plain browser env. [Read the Doc](./docs/quick-start.md)\n\n\n## Why use HyperMD?\n\nHyperMD is a set of [CodeMirror][] add-ons / modes / themes / commands / keymap etc.\n\nYou may use both original CodeMirror and HyperMD on the same page.\n\n### 🌈 Write, and preview on the fly\n\n- **Regular Markdown** blocks and elements\n  + **Strong**, *Emphasis*, ~~Strikethrough~~, `Code`\n  + [Links](https://laobubu.net), Images\n  + Title / Quote / Code Block / List / Horizontal Rule\n- **Markdown Extension**\n  + Simple Table\n  + Footnote [^1]\n  + [x] TODO List *(the box is clickable)*\n  + YAML Front Matter\n  + $\\LaTeX$ Formula, inline or block display mode [^4]\n  + Emoji: `:joy:` =\u003e :joy: [(also support custom emoji)](https://laobubu.net/HyperMD/docs/examples/custom-emoji.html)\n- **And more**\n  + \u003cspan style=\"color:red\"\u003eHTML in Markdown\u003c/span\u003e -- WYSIWIG MDX is possible\n  + #hashtag support [^6] , see [demo](https://laobubu.net/HyperMD/docs/examples/hashtag.html)\n  + Flowchart and Diagrams ([mermaid](https://laobubu.net/HyperMD/docs/examples/mermaid.html) or   [flowchart.js](https://laobubu.net/HyperMD/docs/examples/flowchart.html))\n\n### 💪 Better **Markdown-ing Experience**\n\n- **Upload Images** and files via clipboard, or drag'n'drop\n- **Alt+Click** to open link / jump to footnote [^1]\n- **Hover** to read footnotes\n- **Copy and Paste**, translate HTML into Markdown [^5]\n- Easy and ready-to-use **Key-bindings** (aka. KeyMap)\n\n### 🎁 **CodeMirror** benefits\n\n- Syntax Highlight for code blocks, supports 120+ languages[^2]. Mode can be loaded on-demand.\n- Configurable key-bindings\n- Diff and Merge\n- Themes [^3]\n- Almost all of CodeMirror addons!\n\n### 🔨 Extensible and Customizable\n\n- Use **PowerPacks** to integrate 3rd-party libs and services on-the-fly\n  - [MathJax][], [marked][], [KaTeX][] and more.\n  - *[Read the list][powerpacks]*\n- HyperMD functions are highly **modulized**\n\n### 🎹 Tailored **KeyMap** \"HyperMD\":\n\n+ **Table**\n  - \u003ckbd\u003eEnter\u003c/kbd\u003e Create a table with `| column | line |`\n  - \u003ckbd\u003eEnter\u003c/kbd\u003e Insert new row, or finish a table (if last row is empty)\n  - \u003ckbd\u003eTab\u003c/kbd\u003e or \u003ckbd\u003eShift-Tab\u003c/kbd\u003e to navigate between cells\n+ **List**\n  - \u003ckbd\u003eTab\u003c/kbd\u003e or \u003ckbd\u003eShift-Tab\u003c/kbd\u003e to indent/unindent current list item\n+ **Formatting** a nearby word (or selected text)\n  - \u003ckbd\u003eCtrl+B\u003c/kbd\u003e **bold**\n  - \u003ckbd\u003eCtrl+I\u003c/kbd\u003e *emphasis*\n  - \u003ckbd\u003eCtrl+D\u003c/kbd\u003e ~~strikethrough~~\n\n## Special Thanks\n\n💎 **Service and Resource**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width=\"50%\"\u003e\n      \u003cb\u003e\u003ca href=\"https://icomoon.io/#icons-icomoon\"\u003eIcoMoon\u003c/a\u003e\u003c/b\u003e - The IconPack(Free Version)\u003cbr\u003e\n      \u003csmall\u003e\n        \u003cem\u003eDemo Page\u003c/em\u003e uses IcoMoon icons. Related files are stored in \u003ca href=\"https://github.com/laobubu/HyperMD/tree/master/demo/svgicon\"\u003edemo/svgicon\u003c/a\u003e.\n      \u003c/small\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cb\u003e\u003ca href=\"http://www.codecogs.com\"\u003eCodeCogs\u003c/a\u003e\u003c/b\u003e - An Open Source Scientific Library\u003cbr\u003e\n      \u003csmall\u003e\n        \u003cem\u003eFoldMath\u003c/em\u003e uses codecogs' service as the default TeX MathRenderer.\u003cbr\u003e\n        (You may load PowerPack to use other renderer, eg. KaTeX or MathJax)\n      \u003c/small\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cb\u003e\u003ca href=\"https://sm.ms/\"\u003eSM.MS\u003c/a\u003e\u003c/b\u003e - A Free Image Hosting service\u003cbr\u003e\n      \u003csmall\u003e\n        \u003cem\u003eDemo Page\u003c/em\u003e and \u003cem\u003ePowerPack/insert-file-with-smms\u003c/em\u003e use SM.MS open API to upload user-inserted images.\u003cbr\u003e\n        (If you want to integrate SM.MS service, use the PowerPack)\n      \u003c/small\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cb\u003e\u003ca href=\"https://www.emojione.com/\"\u003eEmojiOne\u003c/a\u003e\u003c/b\u003e - Open emoji icons\u003cbr\u003e\n      \u003csmall\u003e\n        \u003cem\u003eDemo Page\u003c/em\u003e and \u003cem\u003ePowerPack/fold-emoji-with-emojione\u003c/em\u003e use\n        Emoji icons provided free by \u003ca href=\"https://www.emojione.com/\"\u003eEmojiOne\u003c/a\u003e\n        \u003ca href=\"https://www.emojione.com/licenses/free\"\u003e\u003cem\u003e(free license)\u003c/em\u003e\u003c/a\u003e\u003cbr\u003e\n        (You may use other alternatives, eg. twemoji from twitter)\n      \u003c/small\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003cb\u003e\u003ca href=\"https://codemirror.net/\"\u003eCodeMirror\u003c/a\u003e\u003c/b\u003e - In-browser code editor.\u003cbr\u003e\n      \u003cb\u003e\u003ca href=\"http://requirejs.org/\"\u003eRequireJS\u003c/a\u003e\u003c/b\u003e - A JavaScript AMD module loader.\u003cbr\u003e\n      \u003cb\u003e\u003ca href=\"https://khan.github.io/KaTeX/\"\u003eKaTeX\u003c/a\u003e\u003c/b\u003e - The fastest math typesetting library for the web.\u003cbr\u003e\n      \u003cb\u003e\u003ca href=\"https://github.com/chjj/marked/\"\u003emarked\u003c/a\u003e\u003c/b\u003e,\n      \u003cb\u003e\u003ca href=\"https://github.com/domchristie/turndown/\"\u003eturndown\u003c/a\u003e\u003c/b\u003e\n      and more remarkable libs.\n      \u003cbr\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n🌟 **Sponsors**\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ca href=\"http://www.umbst.com/\" target=\"_blank\"\u003e\u003cimg src=\"http://www.umbst.com/assets/images/logo.svg\" height=\"38\" width=\"38\" title=\"圆伞科技\"\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n🙏 **Sponsors** _(sorted by date)_\n\n\u003cdiv class=\"sponsors\"\u003e\n  \u003cspan\u003e☕Phithon\u003c/span\u003e \u003cspan\u003e☕c*i\u003c/span\u003e \u003cspan\u003e☕*Yuan\u003c/span\u003e \u003cspan\u003e☕*Xiuzhang\u003c/span\u003e\n  \u003cspan\u003e☕*Junjie\u003c/span\u003e \u003cspan\u003e🌟圆伞科技\u003c/span\u003e \u003cspan\u003e☕*Di\u003c/span\u003e\n\u003c/div\u003e\n\n\n## Contributing\n\nHyperMD is a personal Open-Source project by [laobubu].\nContributions are welcomed. You may:\n\n- [Fork on GitHub](https://github.com/laobubu/HyperMD/) , create your amazing themes and add-ons.\n- [Buy me a Coffee](https://laobubu.net/donate.html)\n- Spread HyperMD to the world!\n\n\n\n-------------------------------------------------------\n\n[CodeMirror]: https://codemirror.net/\n[RequireJS]: http://requirejs.org/\n[MathJax]: https://www.mathjax.org/\n[marked]: https://github.com/chjj/marked/\n[katex]: https://khan.github.io/KaTeX/\n[laobubu]: https://laobubu.net/\n[doc]: https://laobubu.net/HyperMD/docs/\n[powerpacks]: https://laobubu.net/HyperMD/#./docs/powerpacks.md\n[examples]: https://laobubu.net/HyperMD/docs/examples/index.html\n\n[^1]: Ctrl+Click works too, but will jump to the footnote if exists.\n[^2]: Languages as many as CodeMirror supports.\n[^3]: If the theme is not designed for HyperMD, some features might not be present.\n[^4]: Math block use `$$` to wrap your TeX expression.\n[^5]: Use `Ctrl+Shift+V` to paste plain text.\n[^6]: Disabled by default, see [doc]; #use two hash symbol# if tag name contains spaces.\n","funding_links":[],"categories":["TypeScript","JavaScript","markdown"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaobubu%2FHyperMD","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaobubu%2FHyperMD","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaobubu%2FHyperMD/lists"}