Qiitaの記事に埋め込めるコンテンツを紹介していきます！
これから随時埋め込めるコンテンツを増やしていくので、記事をストックしておくと更新を受け取れますので、ストックをお願いします!
埋め込みコンテンツ以外のMarkdown記法についてはこちらの記事をご覧ください。
コンテンツの埋め込み
以下のサービスの埋め込みスクリプト/Embedタグが利用可能です。
- X（Twitter）
- CodeSandbox
- CodePen
- GitHub Gist
- Asciinema
- Figma
- Speaker Deck
- SlideShare
- Google Slides
- Docswell
- YouTube
その他にも、リンクカードの埋め込みや、ダイアグラムを表現することができます。
リンクカード
URLをリンクカードとして表示します。URLの前後に改行が必要です。
例
(空行)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
(空行)
結果
X（Twitter）
リンクカードと同様にURLを入力することでウィジェット表示できます。
(空行)
https://twitter.com/Qiita/status/1365218441011990531
(空行)
x.comのドメインのURLでもウィジェット表示できます。
(空行)
https://x.com/Qiita/status/1365218441011990531
(空行)
結果
CodeSandbox
URLに/embedが含まれる、Embed urlを入力することで埋め込むことができます。
iframe自体を貼るのではなく、そのsrcに当たる部分を貼り付けてください。
(空行)
https://codesandbox.io/embed/qiita-hardcore-einstein-gxwrp2-gxwrp2?fontsize=14&hidenavigation=1&theme=dark
(空行)
結果
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>
結果
See the Pen dJgNLK by Tomoya Chiba (@tomoasleep) on CodePen.
GitHub Gist
GitHub Gistで書いたコードのurlを入力することで埋め込むことができます。
Embedのscriptタグではなく、ShareのURLをコピーしてを貼り付けてください。
特定のファイルのみ埋め込みたい場合は、URLにクエリ文字列?file=ファイル名を指定してください。
(空行)
https://gist.github.com/qiitan/fa7df2b570a3f16b39e990b2d2c20aae
(空行)
結果
Asciinema
<script id="asciicast-7592" src="https://asciinema.org/a/7592.js" async></script>
結果
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 />
結果
Speaker Deck
<script async class="speakerdeck-embed" data-id="f41af42d719b40529cdd96e393c410e6" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
結果
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>
結果
Google Slides
<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>
結果
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>
結果
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>
結果
ダイアグラム
Qiitaでは、 PlantUML と Mermaid を使って、記事の中でダイアグラムを表現することができます。
使い方はMarkdown記法チートシートをご確認ください。
埋め込みコンテンツの改善について
埋め込みコンテンツの追加や記法の追加などのご意見・ご要望がございましたら、Qiita Discussionsへお願いします。
また、Markdownのパースを行っているライブラリはOSSとして公開されていますので、このリポジトリにPull Requestを送っていただくことも可能です。
以下の記事では、具体的にどのような実装を行うと良いかをまとめています。