devtools-hub

Markdown Preview

リアルタイムプレビュー & 目次自動生成

BOOTHで見る(有料版)
開発者向けテキストMarkdown

Markdown を入力すると即座にプレビューへ反映。見出し(H1〜H3)から目次を自動生成してクリックでジャンプ。コードブロックのシンタックスハイライト・文字数/行数カウントに対応。README や技術文書の確認・執筆に。

広告

Markdown Preview

Markdown
Previewlive

入力するとここに表示されます

Features

  • リアルタイム Markdown プレビュー(入力と同時に反映)
  • コードブロックのシンタックスハイライト(JS/TS/Python/HTML/CSS/JSON/Shell)
  • 見出しから目次(TOC)を自動生成・クリックでスクロール
  • 文字数・行数をリアルタイム表示
  • Copy MD ボタンで Markdown をクリップボードにコピー

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • .md / .txt ファイルをドラッグ&ドロップで読み込み
  • HTML ファイルとしてエクスポート(スタイル付き)

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • .md / .txt ファイルをドラッグ&ドロップで読み込み
  • HTML ファイルとしてエクスポート(スタイル付き)
BOOTH で見る

Markdownの書き方と活用シーン

MarkdownはプレーンテキストをHTMLに変換するための軽量マークアップ言語です。GitHubのREADME・技術ブログ・ドキュメント・メモ管理など、エンジニアの日常で広く使われています。

Markdownの基本記法

# で見出し(H1〜H6)、** ** で太字、* * で斜体、`で等幅コード、```でコードブロック、- や*でリスト、1. 2. 3. で番号付きリスト、[テキスト](URL) でリンク、![代替テキスト](画像URL) で画像を表現します。GitHubではこれらに加えてテーブル・打消し線・チェックリストなどのGFM(GitHub Flavored Markdown)拡張が使えます。

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

```の後に言語名を指定するとシンタックスハイライトが適用されます。 ```javascript const x = 1 ``` のように書くことでJavaScriptのコードが色分け表示されます。Markdown Previewでは JS・TS・Python・HTML・CSS・JSON・Shellのハイライトに対応しています。

目次(TOC)の自動生成

長いMarkdownドキュメントでは見出しから目次を自動生成して各セクションへジャンプできると便利です。Markdown Previewでは見出しH1〜H3から目次を自動生成し、クリックで対応箇所にスクロールします。技術文書・仕様書・READMEを書きながら構成を把握するのに役立ちます。

HTMLエクスポートの活用(デスクトップ版)

デスクトップ版Markdown PreviewではMarkdownをHTMLファイルとしてエクスポートできます。スタイル付きのHTMLを書き出せるため、メールで送付する技術ドキュメントや社内向けの静的HTMLページを手軽に作成できます。.mdファイルのドラッグ&ドロップ読み込みにも対応しています。

広告

Related Tools

base64-studio

Base64 エンコード & デコード

開発者向けテキストエンコード

使ってみる →

BOOTH

JSON Studio

JSON フォーマッター & バリデーター

JSON開発者向けフォーマッター

使ってみる →

BOOTH

color-deck

カラーコード変換 & パレット保存

カラーデザイン開発者向け

使ってみる →

BOOTH

このツールを共有する