Webブラウザ上で使えるMarkdownエディタまとめ

ここ最近、ドキュメントを作成するのに使うマークアップ言語としてMarkdownが人気です。少し前まで他にもフォーマットがありましたが、今はほぼMarkdown一色ではないでしょうか。

Webシステムの中でもMarkdownを採用し、ユーザにMarkdown記法に沿って入力してもらうものも増えています。そんな時にはツールバーをはじめ、Markdown記法をサポートするツールがあると便利です。そこで今回はWebブラウザ上で使えるMarkdownエディタを紹介します。

Editor

Editorはツールバーが表示され、Markdownの各入力フォーマットをクリックだけで入力できるようにしてくれます。見た目はMarkdownのままですが、目のアイコンをクリックするとHTML表示に変わります。

woofmark

woofmarkはWYSIWYGなエディタですが、HTML/Markdown/WYSIWYGを切り替えて表示できるようになっています。Markdownだけでなく通常のHTMLも同時にサポートしているので、カラフルな表示も行えるようになっています。

ProseMirror

入力は普通に行いつつ、テキストを選択すると太字/斜体/リンクなどのメニューが表示されます。リストや画像の挿入は段落ごとに指定できるようになっています。表示はWYSIWYGで、Markdownだとほぼ感じられません。

esarea – Chrome ウェブストア

esa.ioライクなMarkdown入力が任意のテキストエリアで使えるようになるGoogle Chrome機能拡張です。特定のサービスに依らずMarkdown記法が使いたいという時にインストールしておくと便利でしょう。

PageDown-Bootstrap Demo Page

BootstrapにMarkdown記法をサポートしたテキストエリアを表示するライブラリです。ボタンをクリックするとMarkdown記法が挿入されます。プレビュー機能は備えていません。

Personal Editor

MarkdownとXHTMLを切り替えて表示できるWYSIWYGエディタです。Markdownで記述して、その内容をXHTMLで表示できます。

EpicEditor – An embeddable JavaScript Markdown editor

入力補助機能はない、シンプルなMarkdownエディタです。プレビュー表示をサポートしており、右下に出るアイコンをクリックすると切り替わります。また、フルスクリーン機能もあります。Markdownに慣れた人たちに対して、よりコンテンツを書きやすくするのに使えるでしょう。

Markdownは様々なサービスで使われているので、対エンジニアであれば積極的に使っていきたい記法です。業務担当者であっても今回紹介したようなツールを組み合わせることで、入力の手間が大幅に減るのではないでしょうか。

hifive – HTML5企業Webシステムのための開発プラットフォーム