【Next.js】 remark を使ったマークダウンエディタツールの紹介

今回は、LAZY TOOLSに新しく追加した remark を用いて実装した「マークダウンエディタ/プレビュー」ツールについて紹介します。

実際のツールはこちらから使えます。

ブラウザ上で完結し、データはサーバーに保存されない安全なツールなのでぜひご利用ください。

マークダウンエディタツールの紹介

今回作成したツールは、マークダウン記法でテキストを入力すると、リアルタイムでHTMLプレビューを確認できるオンラインエディタです。

機能名	説明
リアルタイムプレビュー	入力しながらすぐに変換結果が見られます
テンプレート機能	よく使うマークダウン構造をワンクリックで挿入できます
コピー機能	マークダウンとHTMLをクリップボードにコピーできます
GitHub Flavored Markdown対応	テーブル、コードブロック、タスクリストなどの拡張構文をサポート
記法ガイド	基本的なマークダウン記法の参照ガイドを表示
レスポンシブデザイン	スマートフォンでも使いやすいレイアウト

lazy-tools-markdown-editor

エディタ上部には4種類のテンプレートボタンがあります。

テンプレート名	説明
基本形式	見出し、リスト、リンクなどの基本要素を含むテンプレート
テーブル	マークダウンのテーブル構文のサンプル
コード	プログラムコードを表示するためのコードブロックのサンプル
完全なドキュメント	プロジェクト説明用のテンプレート

これらのボタンをクリックするだけで、対応するマークダウンテンプレートが挿入されます。

昔の記事【JavaScript】 marked.js でマークダウンエディタを実装するでは、marked.js を使った簡単なマークダウンエディタを紹介しました。

今回は別の技術を使って本格的に作成してみました。

今回のツール作成では、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で公開していますので、チェックしてみてください。

皆様のフィードバックをお待ちしております！