markdown-canvas

Convert markdown files to beautiful HTML pages suitable for Canvas display or browser viewing. Use when user asks to render, visualize, display, or share markdown files (.md) in a visual format. Triggers include phrases like "render xxx.md", "canvas display xxx.md", "visualize markdown", "make xxx.md pretty", "share xxx.md as HTML".

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "markdown-canvas" with this command: npx skills add jingyu525/markdown-canvas

Markdown Canvas Renderer

Convert markdown files into beautiful, shareable HTML pages with zero external dependencies.

Quick Start

When a user wants to render a markdown file:

  1. Run the conversion script:

    python3 scripts/convert.py <path/to/file.md>
    
  2. Open in browser (if no Canvas node available):

    open <output.html>
    
  3. Or push to Canvas (if node paired):

    canvas present file://<output.html>
    

Usage Examples

Basic conversion

# Converts ai-landscape-2026.md → ai-landscape-2026.html
python3 scripts/convert.py ai-landscape-2026.md

Custom output path

python3 scripts/convert.py input.md -o /path/to/output.html

Custom page title

python3 scripts/convert.py notes.md -t "My Research Notes"

Supported Markdown Features

The converter handles:

  • Headers (# through ######)
  • Bold (**text** or __text__)
  • Italic (*text* or _text_)
  • Code blocks (language ... )
  • Inline code (code)
  • Links ([text](url))
  • Lists (unordered: - , * , + )
  • Horizontal rules (---, ***, ___)

Design Philosophy

Token efficiency: Template is pre-built; only markdown content flows through the context window.

Zero dependencies: Pure Python + self-contained HTML template with embedded CSS.

Progressive enhancement: Works offline, no CDN required, renders instantly.

Workflow

  1. User requests markdown rendering
  2. Run scripts/convert.py on their file
  3. Script reads assets/template.html
  4. Script converts markdown → HTML
  5. Script injects HTML into template
  6. Output saved alongside source (or custom path)
  7. Open in browser OR push to Canvas

Token Cost Analysis

Per conversion:

  • Read SKILL.md: ~500 tokens (first time only)
  • Execute script: ~100 tokens
  • Report result: ~50 tokens

Total: ~650 tokens vs ~8000 tokens for generating full HTML each time.

Output Location

By default, output is saved next to the input file:

  • notes.mdnotes.html
  • /path/to/doc.md/path/to/doc.html

Use -o flag to specify custom location.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

baidu-search

Comprehensive search API integration for Baidu Qianfan Web Search. Use when Claude needs to perform web searches using Baidu Qianfan's enterprise search API....

Registry SourceRecently Updated
General

Self Memory Manager

管理 Claude 的记忆和工作流程优化。包括:(1) Context 使用管理 (2) 重要信息存档 (3) 定时总结 (4) 工作文件夹维护 用于:context 超过 80%、重要信息需要记录、每日总结、清理旧 session

Registry SourceRecently Updated
General

Seedance Video

Generate AI videos using ByteDance Seedance. Use when the user wants to: (1) generate videos from text prompts, (2) generate videos from images (first frame,...

Registry SourceRecently Updated
markdown-canvas | V50.AI