Initiation
へのへ Nun
Index
- About
- Usage
- Run
- File Paths
- Navigation
- Basic Syntax
- Markdown
- Code Block
- HTML & UnoCSS
- Custom Syntax
- Utility Tag
- Original Tag
- Img Attributes
- Templates
- Overview
- ...
へのへのん's md2slide project.
- Markdown→HTML/PDF/PNG Export
- Web-based Live Preview
- Responsive Rendering
へのへ Nun
Usage
Run
Setup
sh
bun i -f
bunx playwright i chromium # for PDF/PNG/WebP exportneed ghostscript for compression PDF export.
Commands
| Command | Description |
|---|---|
bun run dev |
Dev server (HMR) |
bun run build |
SSG build → dist/ |
bun run build:pdf [deck] |
PDF export → dist/.pdf/ |
bun run build:png [deck] [pages...] |
PNG export → dist/.png/ |
bun run build:webp [deck] [pages...] |
WebP export → dist/.webp/ |
bun run build:thumbs |
OGP thumbnails (1200x630, first slide webp) → public/thumbs/ |
bun run lint |
Biome lint/format check |
bun run lint:fix |
Auto-fix |
bun run typecheck |
Type check (Astro + scripts) |
File Paths
Slide deck mds → benben/, images → src/assets/images/ (or anywhere in src/assets/)
md
project-root/
├── benben/
│ ├── my-talk.md → /my-talk
│ └── private/
│ └── foo.md → /private/foo
└── src/
└── assets/
└── images/
└── photo.png → /images/photo.pngNavigation
| Key | Action |
|---|---|
→ ↓ Space PageDown D S |
Next |
← ↑ PageUp A W |
Prev |
Enter |
Toggle fullscreen |
Home / End |
First / Last |
Basic Syntax
Markdown
Preview
heading
bold, italic, strikethrough, code, link
blockquote
- list item
- nest
- ordered list item
- secondary
A B 1 2
Source
md
## Preview
### heading
**bold**, *italic*, ~~strikethrough~~, `code`, [link](https://github.com/henohenon/henohe-Nun)
> blockquote
- list item
- nest
1. ordered list item
2. secondary
| A | B |
|---|---|
| 1 | 2 |
---Code Block
Preview
basic
ts
const greet = (name: string): string => `Hello, ${name}!`;diff
rs
fn fibonacci(n: u32) -> u32 {- if n == 0 { return 0; }+ match n {+ 0 => 0,+ 1 => 1,+ _ => fibonacci(n - 1) + fibonacci(n - 2),+ }}with filename
Point.cs
record Point(double X, double Y) {
public double Distance() => Math.Sqrt(X * X + Y * Y);
}with line number
cpp
42template<typename T>43auto clamp(T val, T lo, T hi) {44 return val < lo ? lo : val > hi ? hi : val;45}Source
md
basic
```ts
const greet = (name: string): string => `Hello, ${name}!`;
```
diff
```diff_rs
fn fibonacci(n: u32) -> u32 {
- if n == 0 { return 0; }
+ match n {
+ 0 => 0,
+ 1 => 1,
+ _ => fibonacci(n - 1) + fibonacci(n - 2),
+ }
}
```md
with filename
```cs:Point.cs
record Point(double X, double Y) {
public double Distance() => Math.Sqrt(X * X + Y * Y);
}
```
with line number
```cpp#L42
template<typename T>
auto clamp(T val, T lo, T hi) {
return val < lo ? lo : val > hi ? hi : val;
}
```HTML & UnoCSS
Preview
0
PRESS JUMP TO START
Source
md
<div id="game" class="relative w-full h-screen bg-slate-900 overflow-hidden font-mono">
<div class="absolute bottom-0 w-full h-16 bg-slate-800"></div>
<div id="player" class="absolute bottom-16 left-16 w-12 h-12 bg-blue-500 rounded"></div>
<div id="obs" class="absolute bottom-16 right-0 w-10 h-20 bg-red-500 rounded"></div>
<div id="score" class="absolute top-8 right-8 text-white text-4xl font-bold">0</div>
<button id="btn" onclick="jump()" class="absolute bottom-24 left-1/2 -translate-x-1/2 px-8 py-4 bg-blue-600 text-white cursor-pointer hover:bg-blue-500 active:scale-95">JUMP</button>
<div id="msg" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-400 text-2xl">PRESS JUMP TO START</div>
</div>
<script>...</script>
(Create .astro template is better.)Custom Syntax
Utility Tag
| Tag | Description |
|---|---|
@>[template] |
Set template |
@bg [attrs]>path |
Slide background |
@fbg [attrs]>path |
Footer background |
@fr>[text] |
Footer right |
@fl>[text] |
Footer left |
@theme>[name] |
Override theme |
@var [name]>[value] |
Override CSS variable |
| Variable | Default | Description |
|---|---|---|
--base |
#ffffff |
Background |
--main |
#1a1a1a |
Primary text |
--sub |
#888888 |
Muted text |
--strong |
#000000 |
High-contrast chrome |
--brand |
#5932ff |
Accent color |
--code-accent |
#d6336c |
Inline code highlight |
--font-body |
IBM Plex Sans JP, ... | Body font |
--font-mono |
Consolas, ... | Mono font |
Original Tag
@link>[url], @img [attrs]>path, @img [attrs]>[alt](url)
Img Attributes
layout (bg div only)
| attr | effect |
|---|---|
w |
width |
h |
height |
x |
offset X |
y |
offset Y |
cover |
cover (default: contain) |
top bottom |
vertical align |
left right |
horizontal align |
center |
center |
appearance (both)
| attr | effect |
|---|---|
o |
opacity |
round |
border-radius |
rot=Ndeg |
rotate |
flip |
horizontal flip |
filters (both)
| attr | effect |
|---|---|
mono |
grayscale |
sepia |
sepia tone |
bin |
black & white |
invert |
invert colors |
blur=N |
blur |
bright=N |
brightness |
contrast=N |
contrast |
saturate=N |
saturation |
hue=Ndeg |
hue rotate |
shadow=N |
drop-shadow |
c=Ndeg |
color tint |
@img Directive
@img embeds an image. Two forms:
md
@img cover>/photo.png background-image div
@img mono o=0.5> <img> tag with alt
@link Directive
horizontal
**vertical**
Templates
Overview
| Template | Description |
|---|---|
default |
Heading + body |
title |
Title slide |
big |
Large centered text |
small |
Small centered text |
note |
Centered body + subtitle |
me |
Profile / intro |
row |
Horizontal blocks |
@>default
Heading + body text
md
# Heading
Body content here.@>note
md
# Heading
## Subtitle (shown below)
@>note
Body content (centered)Body centered + subtitle below
Profile template
@icon>icon on the left- Body on the right
md
# Name
@>me
@icon round=50%>/icon.png
Bio text@>me
@>title
Title slide.@date auto-fills fr. @fbg doubles as @bg.
md
@date>2025/02/07
@fbg o=0.3>/henohe-Nun.png
...
# Title
## Subtitle
@>titleTitle Sample
Subtitle
@>big
Large centered text
md
# Big Text
@>big@>big Sample
@>small
Small centered text
md
# Small Text
@>small@>small Sample
@>row
Syntax
## splits blocks horizontally.@gap> controls spacing.@align> controls horizontal alignment
(left / center / right, default left).
md
# Heading
@>row
@gap>4em
@align>center
## Block A
- item
## Block B
- itemNotes
- Content-driven widths
- H3 titles per block
- Pre-H2 content becomes a title-less leading block
@>row Sample
Pros
- Clean syntax
- No HTML needed
- Works with any markdown
Cons
- Only horizontal
- No nested rows
- Fixed block order