What are the diff highlighting colors?

The skill uses industry-standard green backgrounds for additions and red backgrounds for deletions to make changes immediately apparent.

How does text selection work in 'edit' mode?

Users can click and drag to select text in the UI, and the selection data (including offsets and line numbers) is sent back to the CLI in real-time.

Does it support syntax highlighting?

Yes, it supports standard markdown syntax highlighting including fenced code blocks, headers, bold, italic, and blockquotes.

What is the main purpose of the Document Canvas skill?

It provides a specialized interface for Claude to display and interact with markdown content, enabling features like text selection and visual diffs.

Can I use this for non-markdown text?

While optimized for markdown rendering, it can display plain text, though you won't benefit from the rich formatting features like headers and lists.

Markdown Document Canvas

Name: Markdown Document Canvas
Author: ishuru

byishuru

0•

内容管理

Provides an interactive markdown canvas for viewing, editing, and selecting text within documents, emails, and code diffs.

The Markdown Document Canvas skill enhances Claude's interface by providing a dedicated space for rich document interaction. It allows users to view rendered markdown, perform real-time text selection for targeted editing, and visualize changes through integrated diff highlighting. Whether you're drafting blog posts, reviewing emails, or refining documentation, this skill offers a seamless bridge between raw text and interactive content manipulation through specialized scenarios like read-only display, interactive edit mode, and email previews.

主要功能

01Interactive text selection with real-time IPC data transfer

02Visual diff highlighting for easy tracking of additions and deletions

03API-driven controls for programmatic document display and editing

04Rich markdown rendering including headers, code blocks, and lists

05Specialized viewing modes for standard documents and email previews

060 GitHub stars

使用场景

01Reviewing code changes or content updates with visual diff markers

02Previewing formatted emails before sending to ensure layout accuracy

03Refining blog post drafts or documentation through interactive text selection

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ishuru/claude-canvas-ultra document

For use in Claude.ai and ChatGPT

Download Skill