zenn-markdown

Zenn Markdown Syntax Skill

Overview

Zenn supports standard Markdown while providing unique extended syntax. This skill provides knowledge of Zenn-specific Markdown syntax to support effective article writing.

Key Zenn-Specific Features

Zenn offers the following unique features:

1. Message Blocks - Styled notification boxes
2. Accordion - Collapsible sections
3. Code Block Extensions - Filename display, diff highlighting
4. Embedded Content - Link cards, videos, SNS, code platforms
5. Mathematical Expressions - KaTeX support
6. Diagrams - mermaid.js integration
7. Image Controls - Size specification, captions

Commonly Used Syntax

Message Blocks

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
:::

Accordion

Use to collapse long supplementary explanations or optional information.

:::details Title
Content to be hidden until expanded
:::

Code Block Extensions

Filename display:

```javascript:src/app.js
console.log('Hello, Zenn!');
```

Diff display:

```diff javascript
- const old = 'old value';
+ const new = 'new value';
```

Embedded Content

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)

Mathematical Expressions

Display mode:

$$
E = mc^2
$$

Inline mode:

This equation $E = mc^2$ is Einstein's equation.

Diagrams

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