chrome-extension-mdviewer

mdviewer

- Markdown Viewer for Chrome -

ローカルやWeb上のMarkdownファイルを、Chromeブラウザ上で整形されたHTMLとしてプレビューできる拡張機能です。
本来、見るための Markdown のはずが、編集機能が主なアプリケーションしか無かったので作成しました。
GitHub風のスタイルをベースに、目次やテーマ切り替えなどの機能を追加しています。

主な機能

Markdownビュー: marked.js を使用した高速かつ正確なレンダリング。
数式表示 (NEW v2.0): KaTeXによる数式レンダリング。インライン数式 $...$ とブロック数式 $$...$$ に対応。
図表作成 (NEW v2.0): Mermaid.jsによるフローチャート、シーケンス図、ガントチャートなどの図表作成。テーマ切り替えに自動追従。
GitHub風デザイン: github-markdown-css を採用しています。
目次 (TOC): ページ構成を解析し、画面右側にサイドバーとして目次を自動生成します（レスポンシブ対応）。
テーマ切り替え: ライトモードとダークモードを切り替え可能。設定はブラウザに記憶されます。
コードコピー: コードブロックに「Copy」ボタンを自動的に追加し、クリップボードへコピーできます。
リンク情報拡張: PDFやMarkdownファイルへのリンクに、自動で [pdf] などの拡張子ラベルを付与します。
画像表示サポート: ローカルファイルの画像が表示されるようにしています。
ローカルファイルの自動更新: ファイルを保存するとブラウザを自動的にリロードします（スクロール位置を維持）。

※ ローカルファイルを表示する場合の設定

ローカルのMarkdownファイルを表示するには、Chromeの拡張機能管理画面 (chrome://extensions) で、この拡張機能の「詳細」を開き、「ファイルの URL へのアクセスを許可する」 のスイッチをONにする必要があります。これを行わないと、ファイルの表示や自動更新機能が正しく動作しません。

インストール方法（開発者モード＝手動の場合）

ストアからのインストールの方は読み飛ばしてください。

開発者モードでは以下の手順で手動インストールします。

このプロジェクトの mdviewer フォルダをお手元に用意します。
Chromeブラウザを開き、アドレスバーに chrome://extensions と入力して移動します。
画面右上の 「デベロッパーモード」 スイッチをONにします。
「パッケージ化されていない拡張機能を読み込む」 ボタンをクリックします。
用意した mdviewer フォルダを選択して読み込みます。

使い方

Chromeで .md または .markdown ファイルを開きます。
- Web上のファイルはリンクをクリックするだけで自動変換されます。
- ローカルファイル (file://...) はドラッグ＆ドロップで開くことができます。
操作:
- 目次ジャンプ: 右側のサイドバーのリンクをクリックすると、該当セクションへスクロールします。
- テーマ変更: 画面右上のアイコン（☀️ または 🌙）をクリックしてテーマを切り替えます。
- コードコピー: コードブロック右上の Copy ボタンをクリックします。
数式と図表の記述:
- インライン数式: $E = mc^2$ のように $...$ で囲みます。
- ブロック数式:
```
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
```
- Mermaid図表: コードブロックに mermaid を指定します。
```
```mermaid
  graph TD
      A[開始] --> B{条件}
      B -->|Yes| C[処理1]
      B -->|No| D[処理2]
```
```

使用ライブラリ

ライブラリ	Ver.	用途
marked.js	4.3.0	Markdown parser
KaTeX	0.16.9	数式レンダリング
Mermaid.js	10.9.1	図表作成
github-markdown-css	0.5.0	Style

ライセンス

Apache License 2.0

This site is open source. Improve this page.