【プログラミング初心者に】書きながら同時にHTMLプレビューが見れるMarkdown(マークダウン)エディターを自作しよう!JavaScriptシリーズ

#や**などを行頭につけて簡易的にマークアップを行うMarkdown形式。オンラインヘルプの執筆などタグ付きでのライティングが圧倒的に早くなります。このMarkdownエディターを作ろうという企画です。

プログラミング初心者に効く!Markdownエディターを自作

Markdownエディターはあちこちに公開されているので誰でも手に入ります。

が、オンラインヘルプの執筆などの際に、Markdown形式でライティングする場合、HTMLでレイアウト結果を同時に見ながら執筆したいことが良くあります。

組み込み用のヘルプだと、タグに縛りがあったりして、ライティングしながら都度都度レイアウトを確認したいのです。

画面左で書きながら、画面右でプレビューが表示され、かつ、どこでも使えるようダウンロードいらずのWebアプリになっているMarkdownエディタが欲しいなと思い、作ってみました。

実際の使用として、HTMLソースのコピーは執筆後のことが多いため、書いている最中は閲覧する必要がないので、別タブで用意しました。

 

 

とにかく、「スムーズにかつどこにいても書ける」というコンセプトのため、超シンプルかつ入力欄を広く取ってあります。

便利かしら。。。

Markdownエディターのソースファイル(html, css)

Markdownエディターのソースファイルは次のとおりです。

 

markdown editor

 

 

index.html

 

howtouse.html

css/mark_style.css

楽しく作成できました。イロイロ作って遊んでいる今日このごろです。

プログラミング&Webデザイン奮闘記

ちなみに「Markdown(マークダウン)エディター」は意外と簡単に作れるので、練習に作ってみてはどうかと勧めてくれたのは、オンライン型プログラミングスクール「侍エンジニア塾」の先生です。

侍エンジニアさんで今、無料体験レッスンのサービスをしているので、プログラミングスクールを検討中の方は、以下の公式ページをのぞいてみてください。

タイトルとURLをコピーしました