LoginSignup
15

More than 5 years have passed since last update.

ブラウザ上で動くMarkdownエディタを作ってみた

Last updated at Posted at 2017-03-18

Markdownエディタを作った

HTML5 + JavaScriptでMarkdownエディタを作ってみて、せっかくなので公開してみた、という話。
Google Chromeが入ってる環境ならインストール不要で動くので、個人的にMarkdownの編集に使ってます。
※今のところ画像を表示するときのパスがlme.htmlがある場所を指すので注意。

動作環境

  • OS : Windows 10 x64
    ※OS変えたときに見た目がどう変わるかはテストしてないのでわかりません。

  • ブラウザ : Google Chrome 56.0.2924.87 (64-bit)

※追記 : ArchLinuxのChromiumでも動作しました。

  • OS : ArchLinux x64
  • ブラウザ : Chromium

使用しているライブラリなど

  • jQuery
    DOM操作に使用。

  • Ace.js
    エディタ部に使用。

  • marked.js
    MarkdownをHTML化するのに使用。

  • github-markdown-css
    githubっぽい見た目にするのに使用。

使い方

  1. Google Chromeでlme.htmlを開く

  2. 画面右側のエディタにMarkdownを書く

  3. DOWNLOADボタンクリックでダウンロード、または右クリックから保存。

  4. LOADボタンでファイルを開く。

置き場所

githubで公開してます

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15