Zennに埋め込みできる外部サービス-表示サンプルまとめ

Zennに外部サービスを埋め込みたい。
記事内でビジュアル表示ができると便利ですよね🙂
各外部サービスの表示を確認できるよう埋め込みをテストしてみました。

Zenn公式の解説記事

Zenn公式の解説記事です。

• markdown記法
• Zenn独自の記法
• 外部コンテンツの埋め込み→ こちらをテストしています

コンテンツの埋め込み- Zenn公式
https://zenn.dev/zenn/articles/markdown-guide

以下から実際の表示を確認いただけます。

リンクカード

Zenn埋め込みコード

GitHub Gist

# Zenn記法
★URL★

# 入力例
https://zenn.dev/zenn/articles/markdown-guide

表示サンプル
https://zenn.dev/zenn/articles/markdown-guide

コード系

コード共有の埋め込みはサンプルの表示に便利ですね。
以下の各種サービスに対応しています。

GitHub Gist

Zenn埋め込みコード

GitHub Gist

# Zenn記法
@[gist](★URL★)

# 入力例
@[gist](https://gist.github.com/flatsato/4282769a4f181c6810aa)

表示サンプル

CodePen

Zenn埋め込みコード

CodePen

# Zenn記法
@[codepen](★URL★)

# 入力例
@[codepen](https://codepen.io/flatsato/pen/VwqprLp)

表示サンプル

JSFiddle

Zenn埋め込みコード

JSFiddle

# Zenn記法
@[jsfiddle](★URL★)

# 入力例
@[jsfiddle](https://jsfiddle.net/flatsato/z5hoLne1/12/)

表示サンプル

CodeSandbox

Zenn埋め込みコード

CodeSandbox

# Zenn記法
@[codesandbox](★URL★)

# 入力例
@[codesandbox](https://codesandbox.io/embed/eager-proskuriakova-2lcdqm?fontsize=14&hidenavigation=1&theme=dark)

表示サンプル

StackBlitz

Zenn埋め込みコード

StackBlitz

# Zenn記法
@[stackblitz](★URL★)

# 入力例
@[stackblitz](https://stackblitz.com/edit/js-kdeapr?embed=1&file=index.js)

表示サンプル

スライド系

SpeakerDeck

Zenn埋め込みコード

SpeakerDeck

# Zenn記法
@[speakerdeck](★URL★)

# 入力例
@[speakerdeck](23cbe3c46c294d68b423247fe4253420)

表示サンプル

SlideShare

Zenn埋め込みコード

SlideShare

# Zenn記法
@[slideshare](★URL★)

# 入力例
@[slideshare](LZA7MNjzNb8GAl)

表示サンプル

デザイン系

Figma

Zenn埋め込みコード

Figma

# Zenn記法
@[figma](★URL★)

# 入力例
@[figma](https://www.figma.com/file/7or4V8Tl8YbEFRmMSF3pXe/Figma%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB?type=design&node-id=0%3A1&mode=design&t=QNRFwvDwAbx2jeAQ-1)

表示サンプル

SNS系

Twitter

Zenn埋め込みコード

Twitter

# Zenn記法
## ツイートのURLを貼り付ける
https://twitter.com/zenn_dev/status/1516647543492726788

以下の形式でも埋め込み可能です。
@[tweet](★URL★)

表示サンプル
https://twitter.com/zenn_dev/status/1516647543492726788

YouTube

Zenn埋め込みコード

YouTube

# Zenn記法
## YouTubeのURLを貼り付ける
https://www.youtube.com/watch?v=DTpGfpLybr0

表示サンプル
https://www.youtube.com/watch?v=DTpGfpLybr0

データ系

Mermaid（フロー図）

Mermaidでダイアグラムやチャートの埋め込みが可能です。

Mermaid

# Zenn記法
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

表示サンプル

Mermaid公式サイト

https://mermaid.js.org/

外部サービスの埋め込みを活用して、理解しやすい記事にしたいですね🧐

参考

Qiitaで埋め込み可能なコンテンツ一覧-Qiita公式
https://qiita.com/Qiita/items/612e2e149b9f9451c144
参考にQiitaのコンテンツ埋め込み一覧です。