Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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で公開してます

kedama17
SIerやってます。 趣味でrubyとLISP(Common Lisp)を書いてます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away