プロジェクト in JavaScript Skill Tree

ライブプレビュー付きのシンプルな Markdown エディタを構築する

初級

このプロジェクトでは、入力しながらリアルタイムに HTML プレビューができる、シンプルなウェブベースの Markdown エディタを作成します。Ace Editor、marked、highlight.js などのライブラリを使用して、Markdown での記述だけでなく、ブラウザセッション間でデータを保存し、プレビュー内のコードスニペットをハイライト表示する直感的なエディタを開発します。

CSSHTMLJavaScript

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

このプロジェクトでは、入力中にリアルタイムでHTMLプレビューを提供するシンプルなウェブベースのMarkdownエディタを作成します。Ace Editor、marked、およびhighlight.jsのようなライブラリを使用して、Markdownでの記述だけでなく、ブラウザセッション間でデータを保存し、プレビューでコードスニペットを強調表示する直感的なエディタを開発します。

👀 プレビュー

Markdown editor live preview

🎯 タスク

このプロジェクトでは、以下を学びます。

  • エディタとビューアのHTML構造を設定する方法
  • 快適なユーザーエクスペリエンスのためにエディタとビューアをスタイリッシュにする方法
  • エディタの初期化ロジックを実装する方法
  • MarkdownをHTMLにパースし、ビューアに表示する方法
  • エディタとビューアの間のスクロール同期を実装する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

  • リアルタイムHTMLプレビュー付きのウェブベースのMarkdownエディタを開発する
  • Ace Editor、marked、およびhighlight.jsのようなライブラリを使用して、エディタの機能を強化する
  • ブラウザセッション間でデータ永続化を実装する
  • Markdownプレビューにコード構文強調表示を提供する

講師

labby

Labby

Labby is the LabEx teacher.