remark-file-tree

##概要

ディレクトリ構造のコードブロックを生成する 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 - npm

www.npmjs.com

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

GitHub