Shirone Markdown Enhancements

Shirone provides a collection of theme-exclusive Markdown extensions and custom syntax containers. Built on top of our native unified AST processing pipeline, all extensions render into accessible, semantic HTML during site build time with zero client JavaScript hydration overhead and 100% M3E design token alignment.

File Trees#

File Trees turn multi-level project structures, source hierarchies, and terminal directory outputs into compact, interactive tree views with automatic extension icons, diff highlighting, and collapsible branches.

1. Nested List Syntax (`:::file-tree`)#

Use the :::file-tree block directive when writing the file hierarchy directly as a Markdown nested list.

1
:::file-tree{title="Shirone source tree"}
2
- src
3
  - components/
4
    - ++ Navigation.svelte # added component
5
    - -- Button.astro # removed component
6
  - content
7
    - posts/
8
      - markdown-enhancements.md
9
  - layouts/
10
    - PostLayout.astro
11
  - plugins
12
    - markdown/
13
      - rehype-file-tree.mjs
14
  - styles
15
    - markdown/
16
      - trees.css
17
  - **content.config.ts** # important file
18
- public/
19
  - favicon.svg
20
- package.json
21
:::

src
- components
  +Navigation.svelteadded component
  -Button.astroremoved component
- content
  posts
  markdown-enhancements.md
- layouts
  PostLayout.astro
- plugins
  markdown
  rehype-file-tree.mjs
- styles
  markdown
  trees.css
- content.config.tsimportant file
public
- favicon.svg
package.json

Authoring Rules & Markers#

Diff States: Prefix an item with ++ (green background & badge) or -- (red background & strikethrough) to highlight changes.
Comments: Any text following a # is rendered as a muted, right-aligned inline comment.
Emphasis: Wrap names in **bold** to give key files prominent visual weight.
Collapsible Folders: Directories inferred from nested list items start expanded by default. Add a trailing slash (e.g. components/) to create a collapsed directory that readers can expand on click or via keyboard navigation.

2. Terminal Output Syntax (```file-tree)#

When you already have directory tree text generated from command-line tools like tree, paste it directly into a file-tree fenced code block. Both Unicode branch characters (├──, └──, │) and ASCII branches are automatically parsed.

1
```file-tree title="Build output" icon="simple"
2
dist
3
├── _astro/
4
│   ├── index.css
5
│   └── page.js
6
└── favicon.ico
7
```

dist
- _astro
  index.css
  page.js
- favicon.ico

Configuration Options#

title="string": Sets a custom header title and accessible label for the tree.
icon="colored" | "simple": Choose between multi-color extension icons (colored, default) or minimal monochrome icons (simple).

Shirone

File Trees#

1. Nested List Syntax (`:::file-tree`)#

Authoring Rules & Markers#

2. Terminal Output Syntax (```file-tree)#

Configuration Options#

Continue reading

Take another route

Shirone

File Trees#

1. Nested List Syntax (:::file-tree)#

Authoring Rules & Markers#

2. Terminal Output Syntax (```file-tree)#

Configuration Options#

Share Article

Related reading

Take another route

1. Nested List Syntax (`:::file-tree`)#