Markdown to HTML

Markdownのプレビュー、HTMLへの変換・ダウンロードができるWEBアプリケーションです。

URL

https://mdtohtml.yuki-gakiya.com/

Demo

概要

左側のエディターにMarkdownを入力すると、右側にリアルタイムでプレビューとして表示されます。
「HTML」ボタンをクリックすると、MarkdownがHTMLに変換されたコードを表示できます。
「Preview」ボタンをクリックすると、再度プレビューを表示できます。
「Download」ボタンをクリックすると、HTMLに変換されたコードをダウンロードできます。

作成の経緯

動的ウェブサーバを作成・デプロイすることにより、動的ウェブサーバについて詳しく学ぶ機会を得るためです。

使用技術

• フロントエンド

  • 使用言語： HTML, CSS, Javascript
  • HTTPリクエスト: Fetch API
  • コードエディタ: Monaco Editor
  • CSSフレームワーク： chota

• バックエンド

  • 使用言語： PHP
  • マークダウン変換: Parsedown
  • パッケージ管理: Composer
  • Webサーバー: NGINX
  • サーバー: Amazon EC2
  • SSL/TLS証明書更新: Certbot

期間

2023年9月9日から3日間かけて制作しました。

こだわった点

リアルタイムのプレビュー表示

入力されたテキストはFetch APIを使って、サーバーサイドに非同期で送信し、リアルタイムでプレビュー表示できるようにしました。

HTMLコードのシンタックスハイライト

HTMLのプレビュー表示部分では、視認性を高めるためにシンタックスハイライトされたコードを表示するようにしました。

ダウンロードボタンの実装

作成されたHTMLを簡単にダウンロードできるようにダウンロードボタンを実装しました。

これからの改善点、拡張案

編集履歴の保存

ページを閉じた後も、前回のテキストを復元できるように編集履歴の保存機能を追加したいと考えています。

リッチテキストエディタ機能の提供

ユーザビリティを向上させるために、ボタンを押すだけでテキストのスタイルを変更できるリッチテキストエディタ機能を提供することを検討中です。