# Choisungwook Portfolio Markdown To HTML Pandoc
> Markdown to HTML with Pandoc
- Skill: `tomevault-io/choisungwook-portfolio-markdown-to-html-pandoc` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/choisungwook-portfolio-markdown-to-html-pandoc`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/choisungwook-portfolio-markdown-to-html-pandoc/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/choisungwook-portfolio-markdown-to-html-pandoc
---
# Markdown to HTML with Pandoc
## Problem
Blog platforms like Tistory do not support API-based uploads. Content must be
copy-pasted manually. Obsidian uses local image syntax (`![[path/to/image.png]]`)
which is not standard markdown, so pandoc cannot render it as an `![]()
` tag.
Instead, pandoc leaves `![[...]]` as **plain text** in the HTML output. This is
useful because the text markers show where images need to be manually inserted
in the blog editor.
All other markdown elements (headers, code blocks, lists, bold, links, etc.)
are converted to HTML normally.
## Prerequisites
- `pandoc` installed via Homebrew (`brew install pandoc`)
- `$OBSIDIAN_VAULT` environment variable set in `~/.zshrc`:
```sh
# Add to ~/.zshrc
export OBSIDIAN_VAULT="your obsidian path"
```
Use `~` relative paths. Never use absolute paths like `/Users/username/...`.
## Usage
Run the bundled script with the Obsidian file path:
```sh
bash scripts/md-to-html.sh "$OBSIDIAN_VAULT/my-post.md"
```
Output goes to `~/Downloads/.html`.
## What the Script Does
1. **Converts markdown to standalone HTML** - Runs `pandoc -s` to produce a
complete HTML document with ``, ``, `` tags (the
`-s`/`--standalone` flag ensures the output is a valid HTML file, not a fragment)
2. **Preserves line breaks** - Uses `-f markdown+hard_line_breaks` so single
newlines become `
` tags, matching Obsidian's line break behavior
3. **Preserves image markers** - Obsidian `![[...]]` syntax stays as plain text,
serving as placeholders for manual image insertion
4. **Outputs to ~/Downloads** - Ready for copy-paste into blog editor
## After Export
1. Open the generated HTML in a browser or text editor
2. Copy the content and paste into the blog editor (HTML mode)
3. Find the `![[...]]` text markers and manually upload images at those positions
## Script Location
`scripts/md-to-html.sh` - See script comments for detailed explanation
of each flag and step.
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/choisungwook) — claim your Tome and manage your conversions.