Qiitaで埋め込み可能なコンテンツ一覧

Qiitaの記事に埋め込めるコンテンツを紹介していきます！
これから随時埋め込めるコンテンツを増やしていくので、記事をストックしておくと更新を受け取れますので、**ストックをお願いします!**

埋め込みコンテンツ以外のMarkdown記法についてはこちらの記事をご覧ください。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

## コンテンツの埋め込み

以下のサービスの埋め込みスクリプト/Embedタグが利用可能です。

- [X（Twitter）](https://twitter.com)
- [CodeSandbox](https://codesandbox.io/)
- [CodePen](https://codepen.io/)
- [GitHub Gist](https://gist.github.com/)
- [Asciinema](https://asciinema.org/)
- [Figma](https://www.figma.com/ja/)
- [Speaker Deck](https://speakerdeck.com/)
- [SlideShare](https://www.slideshare.net/)
- [Google Slides](https://www.google.com/intl/ja_jp/slides/about/)
- [Docswell](https://www.docswell.com/)
- [YouTube](https://www.youtube.com/)
- [Google Drive](https://workspace.google.com/intl/en-GB/products/drive/)
- [StackBlitz](https://stackblitz.com/)

その他にも、リンクカードの埋め込みや、ダイアグラムを表現することができます。

### リンクカード

URLをリンクカードとして表示します。URLの前後に改行が必要です。

**例**

```markdown:書き方
(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)
```

**結果**

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

### X（Twitter）

リンクカードと同様にURLを入力することでウィジェット表示できます。

```markdown:書き方
(空行)
https://twitter.com/Qiita/status/1365218441011990531
(空行)
```
`x.com`のドメインのURLでもウィジェット表示できます。

```markdown:書き方
(空行)
https://x.com/Qiita/status/1365218441011990531
(空行)
```

**結果**

https://twitter.com/Qiita/status/1365218441011990531


### CodeSandbox

URLに`/embed`が含まれる、Embed urlを入力することで埋め込むことができます。
iframe自体を貼るのではなく、その`src`に当たる部分を貼り付けてください。

```markdown:書き方
(空行)
https://codesandbox.io/embed/qiita-hardcore-einstein-gxwrp2-gxwrp2?fontsize=14&hidenavigation=1&theme=dark
(空行)
```
**結果**

https://codesandbox.io/embed/qiita-hardcore-einstein-gxwrp2-gxwrp2?fontsize=14&hidenavigation=1&theme=dark

### CodePen

埋め込み方はこちらの記事に詳しく書いてあるのでご覧ください。

https://qiita.com/Qiita/items/edae7417214c8e957f54

```html:CodePen
<p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" data-embed-version="2" data-pen-title="dJgNLK" class="codepen">See the Pen <a href="https://codepen.io/tomoasleep/pen/dJgNLK/">dJgNLK</a> by Tomoya Chiba (<a href="https://codepen.io/tomoasleep">@tomoasleep</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
```
**結果**

<p data-height="512" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" data-embed-version="2" data-pen-title="dJgNLK" class="codepen">See the Pen <a href="https://codepen.io/tomoasleep/pen/dJgNLK/">dJgNLK</a> by Tomoya Chiba (<a href="https://codepen.io/tomoasleep">@tomoasleep</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

### GitHub Gist

GitHub Gistで書いたコードのurlを入力することで埋め込むことができます。
Embedのscriptタグではなく、ShareのURLをコピーしてを貼り付けてください。
特定のファイルのみ埋め込みたい場合は、URLにクエリ文字列`?file=ファイル名`を指定してください。

```markdown:書き方
(空行)
https://gist.github.com/qiitan/fa7df2b570a3f16b39e990b2d2c20aae
(空行)
```
**結果**

https://gist.github.com/qiitan/fa7df2b570a3f16b39e990b2d2c20aae

### Asciinema

```html:Asciinema
<script id="asciicast-7592" src="https://asciinema.org/a/7592.js" async></script>
```

**結果**

<script id="asciicast-7592" src="https://asciinema.org/a/7592.js" async></script>

### Figma

```html:Figma
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" height="450" width="800" src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File" allowfullscreen />
```

**結果**

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" height="450" width="800" src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File" loading="lazy" allowfullscreen />

### Speaker Deck

```html:Speaker_Deck
<script async class="speakerdeck-embed" data-id="f41af42d719b40529cdd96e393c410e6" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
```
**結果**

<script async class="speakerdeck-embed" data-id="f41af42d719b40529cdd96e393c410e6" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

### SlideShare

```html:SlideShare
<iframe src="//www.slideshare.net/slideshow/embed_code/key/B6SfqHFrWhihpr" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" loading="lazy" allowfullscreen> </iframe> 
```
**結果**

<iframe src="//www.slideshare.net/slideshow/embed_code/key/B6SfqHFrWhihpr" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" loading="lazy" allowfullscreen> </iframe> 

### Google Slides

```html:Google_Slide
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSQcxUm83volq36Sa0nxHH6_GxjvPA_CloWjxR2NJ_Sz40QuItcOT_OoBkA5bmD9g/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
```
**結果**

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570116/a1548a33-ca2f-7800-bb2a-6b5cddc7884b.png)

### Docswell

```html:Docswell
<script async class="docswell-embed" src="https://www.docswell.com/assets/libs/docswell-embed/docswell-embed.min.js" data-src="https://www.docswell.com/slide/LK7J5V/embed" data-aspect="0.5625"></script><div class="docswell-link"><a href="https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell">Docswell（ドクセル）はじめました by @ku-suke</a></div>
```

**結果**

<script async class="docswell-embed" src="https://www.docswell.com/assets/libs/docswell-embed/docswell-embed.min.js" data-src="https://www.docswell.com/slide/LK7J5V/embed" data-aspect="0.5625"></script><div class="docswell-link"><a href="https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell">Docswell（ドクセル）はじめました by @ku-suke</a></div>

### YouTube

```html:YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>
```
**結果**

<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

### ダイアグラム

Qiitaでは、 PlantUML と Mermaid を使って、記事の中でダイアグラムを表現することができます。
使い方はMarkdown記法チートシートをご確認ください。

https://qiita.com/Qiita/items/c686397e4a0f4f11683d#%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0

### Google Drive

```html:Google_Drive
<iframe src="https://drive.google.com/file/d/1Ve6qv5eAcR2lMC-V00g1wkxZ9kMFT3XX/preview" width="640" height="480"></iframe>
```

**結果**

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88/29a2c656-f496-4736-8512-9c32be566b54.jpeg)

### StackBlitz

```html:StackBlitz
<iframe src="https://stackblitz.com/edit/angular?embed=1" height="600" width="800"></iframe>
```

**結果**

<iframe src="https://stackblitz.com/edit/angular?embed=1" height="600" width="800"></iframe>

## 埋め込みコンテンツの改善について

埋め込みコンテンツの追加や記法の追加などのご意見・ご要望がございましたら、[Qiita Discussions](https://github.com/increments/qiita-discussions)へお願いします。

https://github.com/increments/qiita-discussions

また、Markdownのパースを行っているライブラリはOSSとして公開されていますので、[このリポジトリ](https://github.com/increments/qiita-markdown)にPull Requestを送っていただくことも可能です。
以下の記事では、具体的にどのような実装を行うと良いかをまとめています。

https://qiita.com/getty104/items/bbe8aa000b24b07e7699