This skill should be used when the user asks about "Zenn記法", "Zenn Markdown", "メッセージブロック", "アコーディオン", "埋め込み", "Zenn特有の記法", or mentions writing Zenn articles with specific formatting needs. Provides comprehensive knowledge of Zenn-specific Markdown syntax and best practices.
Provides comprehensive knowledge of Zenn-specific Markdown syntax including message blocks, accordions, code extensions, and embedded content. Use when users ask about "Zenn記法", need help writing Zenn articles, or require specific Zenn formatting like message blocks, accordions, or embeds.
/plugin marketplace add kokuyouwind/claude-plugins/plugin install zenn-writer@kokuyouwind-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/syntax-guide.mdZenn supports standard Markdown while providing unique extended syntax. This skill provides knowledge of Zenn-specific Markdown syntax to support effective article writing.
Zenn offers the following unique features:
Use to highlight supplementary information or notes for readers.
Normal message:
:::message
Supplementary information or tips here
:::
Alert message:
:::message alert
Important warnings or cautions here
:::
Use to collapse long supplementary explanations or optional information.
:::details Title
Content to be hidden until expanded
:::
Filename display:
```javascript:src/app.js
console.log('Hello, Zenn!');
```
Diff display:
```diff javascript
- const old = 'old value';
+ const new = 'new value';
```
Link card:
@[card](https://example.com)
YouTube video:
@[youtube](VIDEO_ID)
Twitter/X post:
https://twitter.com/username/status/1234567890
Code platforms:
@[codesandbox](SANDBOX_ID)
@[stackblitz](PROJECT_ID)
Display mode:
$$
E = mc^2
$$
Inline mode:
This equation $E = mc^2$ is Einstein's equation.
Use mermaid.js to create flowcharts and sequence diagrams.
```mermaid
graph TD
A[Start] --> B[Process]
B --> C[End]
```
Limitations: 2000 characters max, maximum 10 chain operators
Zenn uses dedicated image directories for each article.
Directory structure:
/images/[article-filename-without-extension]/[image-filename]
Example: For article file 20240101-my-article.md
/images/20240101-my-article/screenshot.png
Reference in article:
Width specification:
Caption:
*Image caption*
:::message - Use for supplementary information, hints, references:::message alert - Use for warnings, cautions, important informationActively use where reader attention is needed.
Collapse long supplementary explanations, detailed technical information, or optional steps to improve article readability.
When nesting accordions or message blocks, add extra colons to outer containers.
::::details Outer
Content
:::message
Nested message
:::
::::
Mermaid diagrams have limits of 2000 characters and maximum 10 chain operators. For overly complex diagrams, create with external tools and embed as images.
Only single-line HTML comments are supported. Multi-line comments cannot be used.
<!-- This is a valid comment -->
For more detailed syntax information, usage examples, and best practices, refer to the following reference file:
references/syntax-guide.md - Complete reference for Zenn Markdown syntaxThis reference contains detailed explanations of each syntax, multiple usage examples, and practical best practices.
Follow this flow when writing articles using the syntax:
npm run devPrioritize syntax choices that help reader comprehension. Use syntax to effectively convey information, not just for decoration.