Jinja Markdown Preview

A VS Code extension that renders Jinja template syntax as visible placeholders in Markdown preview, with support for YAML frontmatter variable substitution.

Features

• Variables ({{ foo }}) → if defined in YAML frontmatter, shows the actual value (green). Otherwise shown as yellow pill with the variable name.
• Blocks ({% if %}, {% for %}, etc.) → shown as blue pills
• Comments ({# comment #}) → completely hidden

Works in both light and dark themes.

Frontmatter Support

Define variables in YAML frontmatter and they'll be substituted in the preview:

---
site_name: My Site
user:
  name: Alice
  email: alice@example.com
---

# Welcome to {{ site_name }}

Hello {{ user.name }}!

Contact: {{ user.email }}

In the preview:

• {{ site_name }} → shows "My Site" (green, resolved)
• {{ user.name }} → shows "Alice" (green, resolved)
• {{ undefined_var }} → shows "undefined_var" (yellow pill, unresolved)

Installation

From VSIX (local install)

1. Package the extension: vsce package
2. In VS Code: Extensions → ... menu → Install from VSIX...
3. Select the generated .vsix file

From Marketplace

(Once published)

Search for "Jinja Markdown Preview" in the Extensions panel.

Usage

Just open a Markdown file containing Jinja syntax and open the preview (Ctrl+Shift+V or Cmd+Shift+V).

Before:

Hello {{ user.name }}!

{% if show_greeting %}
Welcome to {{ site_name }}.
{% endif %}

After (in preview): The Jinja syntax is rendered as styled placeholders so you can see the document structure without the raw template noise.

Recommending for a Repository

Add to your repo's .vscode/extensions.json:

{
  "recommendations": [
    "silliestduck.jinja-markdown-preview"
  ]
}

License

MIT