本文へスキップ

remark-file-tree

remark-file-tree

#

TypeScript

#

Remark

2026.05.24

2026.05.24

2 min

ツリー構造のコードブロックを生成するRemarkプラグイン

##概要

ディレクトリ構造のコードブロックを生成する Remark プラグインです。当サイトでも使用しています。
アイコンは Nerd Fonts で表示しています。

##機能

下のようなコードブロックを書いた際に、ディレクトリ構造を綺麗に表示してくれます。

```tree
web/
  index.html  # ← リネーム
  about.html
  contact.html
  images/
    logo.png
  style/
    styles.css
```

 web/

 index.html ← リネーム

 about.html

 contact.html

 images/

 logo.png

 style/

 styles.css

##インストール

npm install remark-file-tree

##使い方

当サイトでも実際に使っている Astro での設定例です。設定の詳細は GitHub リポジトリ の README.md を確認してください。

import { defineConfig } from "astro/config";
import remarkFileTree from "remark-file-tree";

export default defineConfig({
  markdown: {
    remarkPlugins: [
      [remarkFileTree, { iconThemeMode = "theme" }]
    ],
  },
});

##リンク

remark-file-tree

remark-file-tree A remark plugin to render file tree code blocks as styled HTML. Latest version: 0.1.2, last published: 4 months ago. Start using remark-file-tree in your project by running `npm i remark-file-tree`. There are no other projects in the npm registry using remark-file-tree.

GitHub - suzuuuuu09/remark-file-tree: A Remark plugin that converts tree code blocks into customizable file-tree HTML with Nerd Font icons.

GitHub - suzuuuuu09/remark-file-tree: A Remark plugin that converts tree code blocks into customizable file-tree HTML with Nerd Font icons. A Remark plugin that converts tree code blocks into customizable file-tree HTML with Nerd Font icons. - suzuuuuu09/remark-file-tree

Discussion