❓ Why

You wrote your Confluence page in the Source Editor — a wall of <ac:structured-macro> tags. The only way to see how it actually looks is:

1. Paste it back into Confluence's editor
2. Click Preview
3. Squint at the result
4. Go back, fix something
5. Repeat

Confluence Preview skips all of that. Open a .confluence / .cfl file in VS Code and the rendered page sits next to your source, refreshing on every keystroke. No publishing, no round-trips, no surprise layout shifts.

Works on airplanes, subways, and inside air-gapped networks — the parser runs locally on your machine.

✨ Features

📸 Macro showcase

Code blocks & tables — collapsible panels, line numbers, JSON / TS / SQL highlighting	Color-coded callouts — note, info, warning, tip
Layout & folding — panel, section / column, expand, quote, noformat, excerpt	Status, jira, mentions, links, XSS safety — colored pills, ticket links, @mentions, page / attachment / user / URL links, escaped HTML

🚀 Quick Start

⏱️ Two minutes from clone to preview.

1. Install + build

   npm install
   npm run build
   

2. Launch the extension — open this folder in VS Code and press F5. A new Extension Development Host window opens.
3. Open a sample and preview — in the new window, open tests/test.confluence (covers every supported macro), then Ctrl+Shift+P → Confluence: Open Preview.

That's it. Edit the source on the left, watch the rendered page update on the right.

📁 File Types

These filename patterns are registered as the confluence language:

• *.confluence
• *.cfl
• *.confluence-storage

.html files are also handled via the html language fallback — preview arbitrary Confluence markup without renaming anything.

🛠️ Commands

📚 Supported Elements

🧩 Macros

🌐 Standard HTML

All standard XHTML elements: h1–h6, p, strong / em / u / s, sub / sup, code (inline), pre, blockquote, ul / ol / li, a, img, table / thead / tbody / tr / th / td (colspan / rowspan), span, div, figure, figcaption, time, small, mark, cite, q, kbd, br, hr.

🔗 Structured Links

• <ac:link><ri:page ri:content-title="…"/></ac:link> → blue inline link
• <ac:link><ri:attachment ri:filename="…"/></ac:link> → 📎 attachment link
• <ac:link><ri:url ri:value="…"/></ac:link> → external link
• <ac:link><ri:user ri:username="…"/></ac:link> → @user mention
• <ri:page> etc. used inline in text are also resolved

❓ FAQ

Q: Does this extension need a Confluence account? No. It's a pure-local parser — it doesn't connect to anything. Your source never leaves your machine.

Q: Can I use it for offline / classified work? Yes. There are zero network calls, no telemetry, no auto-update pings. Safe for air-gapped environments.

Q: Will it follow links to other Confluence pages? Not by default — without knowing your Confluence host, internal page / attachment links render as labeled placeholders. If you want them to resolve, set the baseurl parameter on the jira macro (and similar) inside your source.

Q: Why doesn't the preview update? Hit Confluence: Refresh Preview from the Command Palette. The default behavior is debounced 250 ms; sometimes a manual nudge helps after a large paste.

Q: Can I edit in the preview? No — the preview is read-only. For editing, this extension pairs naturally with VS Code (use Source Control for the .confluence file and edit it in the normal editor).

Q: Is there a way to add my own macros? Yes — see the architecture section below. Each macro is a single TypeScript file in src/parser/macros/; just add an entry to registry.ts and you're done.

⚠️ Limitations

• No live network calls. <ac:link><ri:page .../></ac:link> and <ac:link><ri:attachment .../></ac:link> render as inline placeholders with the title / filename; they don't resolve to real Confluence URLs (since this extension doesn't know your Confluence host).
• No image loading. External <img> is shown as a placeholder to satisfy the webview's CSP and keep the extension offline-only.
• Read-only preview. To edit, you still use Confluence's own Source Editor.
• Markdown export is best-effort. It strips most markup and turns macros into their nearest Markdown equivalent. Round-trip is not guaranteed.

┌─────────────────────┐                ┌──────────────────────┐
│  Confluence source  │   parse        │  RenderContext       │
│  (XHTML + ac:/ri:)  │ ─────────────► │   - html             │
│                     │                │   - outline tree     │
└─────────────────────┘                │   - macros seen      │
                                         │   - warnings         │
                                         └─────────┬────────────┘
                                                   │ postMessage
                                                   ▼
                                         ┌──────────────────────┐
                                         │  Webview (CSP-safe)  │
                                         │   - style.css        │
                                         │   - script.js        │
                                         │   - highlight.min.js │
                                         └──────────────────────┘

confluence_preview/
├── package.json              # extension manifest + scripts
├── tsconfig.json
├── esbuild.config.mjs        # bundler config (also copies media/)
├── .vscode/launch.json       # F5 debug config
├── src/
│   ├── extension.ts          # extension entry, command wiring
│   ├── previewPanel.ts       # preview webview lifecycle + commands
│   ├── parser/
│   │   ├── index.ts          # public parseConfluence()
│   │   ├── elements.ts       # standard HTML recursion
│   │   ├── outline.ts        # h1–h6 outline tree builder
│   │   ├── sanitize.ts       # escape / slugify helpers
│   │   ├── types.ts
│   │   └── macros/           # one renderer per macro
│   └── media/                # webview assets (html, css, js, hljs)
├── image/                    # README screenshots
└── tests/
    └── test.confluence       # full coverage of every macro

📄 License

MIT — see LICENSE.

🙏 Acknowledgments

• Built on cheerio for HTML parsing.
• Syntax highlighting by highlight.js.
• Designed for VS Code ≥ 1.75.