HyperMD

Hypermd

Bricht die Mauer zwischen Schreiben und Vorschau in einem Markdown -Editor.

Online -Demo | Beispiele | Dokumentation

中文介绍

QuickStart

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

Auch für Anforderungen, Paket, Webpack, einfaches Browser Env. Lesen Sie den Doc

Warum Hypermd verwenden?

HyperMD ist ein Satz von Codemirror-Add-Ons / Modi / Themen / Befehlen / Keymap usw.

Auf derselben Seite können Sie sowohl Original -Codemirrror als auch Hypermd verwenden.

? Schreiben und Vorschau im laufenden Fliegen

• Regelmäßige Markdownblöcke und Elemente
  • Starke , Betonung , Schlägen , Code
  • Links, Bilder
  • Titel / Quote / Code Block / List / Horizontale Regel
• Markdown -Erweiterung
  • Einfacher Tisch
  • Fußnote ¹
  • TODO -Liste (das Feld ist anklickbar)
  • Yaml Front Materie
  • $ Latex $ Formel, Inline- oder Blockanzeigemodus ²
  • Emoji :: :joy: =>? (Unterstützen Sie auch benutzerdefinierte Emoji)
• Und mehr
  • HTML in Markdown - Wysiwig MDX ist möglich
  • #Hashtag Support ³ , siehe Demo
  • Flussdiagramm und Diagramme (Meerjungfrau oder Flussdiagramm.js)

? Bessere Erlebnis

• Laden Sie Bilder und Dateien über die Zwischenablage hoch oder ziehen Sie es ab. N'n'Drop
• Alt+Klicken Sie , um den Link zu öffnen / zu Fußnote ¹ zu springen
• Schweber , um Fußnoten zu lesen
• Kopieren und einfügen , HTML in Markdown ⁴ übersetzen
• Einfache und benutzerfreundliche Schlüsselbindungen (auch bekannt als Keymap)

? Codemirror -Vorteile

• Syntax Highlight für Codeblöcke unterstützt 120+ Sprachen ⁵ . Der Modus kann auf Nachfrage geladen werden.
• Konfigurierbare Schlüsselbindungen
• Diff und verschmelzen
• Themen ⁶
• Fast alle Codemirror -Addons!

? Erweiterbar und anpassbar

• Verwenden Sie PowerPacks , um die 3rd-Party-Libs und -Dienste im Fliege zu integrieren
  • Mathjax, markiert, katex und mehr.
  • Lesen Sie die Liste
• Hypermd -Funktionen werden stark moduliert

? MEMAKED KEYMAP "Hypermd":

• Tisch
  • Geben Sie eine Tabelle erstellen mit | column | line | ein | column | line |
  • Geben Sie eine neue Zeile ein oder beenden Sie eine Tabelle (wenn die letzte Zeile leer ist)
  • Tab oder Schalttab, um zwischen Zellen zu navigieren
• Liste
  • Registerkarte oder Schalttab, um das aktuelle Listenelement einzusetzen/uneinig
• Formatieren eines nahe gelegenen Wortes (oder ausgewählten Text)
  • Strg+B BOLD
  • Strg+i Schwerpunkt
  • Strg+d Schlägen

Besonderer Dank

? Service und Ressource

ICOMOON - The Iconpack (kostenlose Version) Die Demo -Seite verwendet iComoon -Symbole. Verwandte Dateien werden in Demo/SVGICON gespeichert.	Codecogs - eine Open -Source -wissenschaftliche Bibliothek Foldmath verwendet den Codekogs -Dienst als Standard -Tex Mathhrenderer. (Sie können PowerPack laden, um einen anderen Renderer zu verwenden, z. B. Katex oder Mathjax)
SM.MS - Ein kostenloser Bild -Hosting -Service Demo-Seite und PowerPack/Insert-File-with-smms verwenden SM.MS Open API, um benutzererettete Bilder hochzuladen. (Wenn Sie den SM.MS -Service integrieren möchten, verwenden Sie den PowerPack)	Emojione - Offene Emoji -Ikonen Demo-Seite und Powerpack/Fold-emoji-with-emojione verwenden Emoji-Ikonen, die von Emojion kostenlos bereitgestellt werden (kostenlose Lizenz) (Sie können andere Alternativen verwenden, z. B. Twemoji von Twitter)
Codemirror - In -Browser -Code -Editor. RequiredJS - Ein JavaScript -AMD -Modulloader. KATEX - Die schnellste Bibliothek für mathematische Typen für das Web. Markiert , Turndown und bemerkenswertere Libs.

? Sponsoren

Sponsoren (nach Datum sortiert)

☕phithon ☕c*i ☕*yuan ☕*xiuzhang ☕*junjie ? 圆伞科技☕*di

Beitragen

Hypermd ist ein persönliches Open-Source-Projekt von Laobubu. Beiträge sind begrüßt. Sie können:

• Geben Sie GitHub, erstellen Sie Ihre erstaunlichen Themen und Add-Ons.
• Kaufen Sie mir einen Kaffee
• Hypermd auf die Welt verteilen!

---

Fußnoten

1. Strg+Klick funktioniert auch, springt aber zur Fußnote, wenn es existiert. ↩ ↩ ²

2. Math Block Verwenden Sie $$ , um Ihren Tex -Ausdruck zu wickeln. ↩

3. Standardmäßig deaktiviert, siehe DOC; # Verwenden Sie zwei Hash -Symbol# Wenn Tag -Name Räume enthält. ↩

4. Verwenden Sie Ctrl+Shift+V um einen einfachen Text einzufügen. ↩

5. Sprachen, die so viele wie Codemirror unterstützt. ↩

6. Wenn das Thema nicht für hypermd ausgelegt ist, sind einige Funktionen möglicherweise nicht vorhanden. ↩