今回は、LAZY TOOLSに新しく追加した remark を用いて実装した「マークダウンエディタ/プレビュー」ツールについて紹介します。
実際のツールはこちらから使えます。
ブラウザ上で完結し、データはサーバーに保存されない安全なツールなのでぜひご利用ください。
マークダウンエディタツールの紹介
今回作成したツールは、マークダウン記法でテキストを入力すると、リアルタイムでHTMLプレビューを確認できるオンラインエディタです。
主な機能
| 機能名 | 説明 |
|---|---|
| リアルタイムプレビュー | 入力しながらすぐに変換結果が見られます |
| テンプレート機能 | よく使うマークダウン構造をワンクリックで挿入できます |
| コピー機能 | マークダウンとHTMLをクリップボードにコピーできます |
| GitHub Flavored Markdown対応 | テーブル、コードブロック、タスクリストなどの拡張構文をサポート |
| 記法ガイド | 基本的なマークダウン記法の参照ガイドを表示 |
| レスポンシブデザイン | スマートフォンでも使いやすいレイアウト |
使い方
基本的な使い方
- 左側のエディタにマークダウン記法でテキストを入力します
- 入力と同時に右側にHTMLプレビューが表示されます
- 必要に応じて「マークダウンをコピー」または「HTMLをコピー」ボタンを使ってクリップボードにコピーできます
テンプレート機能の活用
エディタ上部には4種類のテンプレートボタンがあります。
| テンプレート名 | 説明 |
|---|---|
| 基本形式 | 見出し、リスト、リンクなどの基本要素を含むテンプレート |
| テーブル | マークダウンのテーブル構文のサンプル |
| コード | プログラムコードを表示するためのコードブロックのサンプル |
| 完全なドキュメント | プロジェクト説明用のテンプレート |
これらのボタンをクリックするだけで、対応するマークダウンテンプレートが挿入されます。
過去記事との違い
昔の記事 【JavaScript】 marked.js でマークダウンエディタを実装する では、marked.js を使った簡単なマークダウンエディタを紹介しました。
今回は別の技術を使って本格的に作成してみました。
使用技術の違い
| 前回（marked.js） | 今回（remark） |
|---|---|
| 純粋なJavaScript | React/Next.js |
| marked.js | unified/remark/remark-gfm |
| 単一ファイル構成 | コンポーネント指向 |
| 基本的なマークダウン | GitHub Flavored Markdown対応 |
機能面の進化
| 変更点 | 説明 |
|---|---|
| テンプレート機能の追加 | よく使うマークダウンパターンをワンクリックで挿入 |
| コピー機能の強化 | マークダウンとHTMLの両方をコピー可能 |
| UI/UXの改善 | Tailwind CSSによる洗練されたデザイン |
| プレビューのスタイリング | テーブルやコードブロックなどの見栄えを改善 |
| モバイル対応 | レスポンシブデザインの採用 |
技術的なポイント
今回のツール作成では、Next.jsとunified/remarkエコシステムを組み合わせました。
使用ライブラリ
| 使用技術・ライブラリ | 説明 |
|---|---|
| Next.js | Reactフレームワーク |
| Tailwind CSS | スタイリング |
| unified | コンテンツ処理の統一インターフェース |
| remark-parse | マークダウンのパース |
| remark-gfm | GitHub Flavored Markdownのサポート |
| remark-html | マークダウンをHTMLに変換 |
remarkは、プラグイン方式で機能拡張ができる柔軟性の高いマークダウン処理エコシステムです。
GitHub Flavored Markdownに対応しており、テーブルやタスクリストなどの拡張構文をサポートしています。
Tailwind CSSを活用して、モダンで使いやすいUIを実現しています。
おわりに
マークダウンは、ブログ記事や技術ドキュメント、READMEファイルなど、様々な場面で使われているフォーマットです。
このツールを使えば、素早くマークダウンテキストを作成・プレビューできるので、ぜひご活用ください。
実際のツールはこちらからお試しいただけます。
また、他にも様々な開発者向けツールをLAZY TOOLSで公開していますので、チェックしてみてください。
皆様のフィードバックをお待ちしております！
コメント