どちらもプラグインを入れればできる。
youtubeのリンクを埋め込む
- gatsby-config.jsに追記
plugins: [
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-embed-youtube",
options: {
width: 800,
height: 400
}
}
]
}
},gatsby-remark-responsive-iframeも入れているならこちらを後に書かなければいけない。順番に実行しているからか？
js
plugins: [
"gatsby-remark-embed-youtube",
"gatsby-remark-responsive-iframe"
]- プラグインをインストール
bash
yarn add gatsby-remark-embed-youtube- markdownでの書き方
youtubeの共有というボタンから埋め込みリンクを取得する
md
`youtube:https://www.youtube.com/embed/u82r6NIkTbU`twitterのリンクを埋め込む
- gatsby-config.jsに追記
js
plugins: [`gatsby-plugin-twitter`]- プラグインをインストール
shell
npm install gatsby-plugin-twitter- markdownでの書き方
twitterの右上のボタン(v)から埋め込みリンクを取得し、そのまま書くだけ。
md
<blockquote class="twitter-tweet"><p lang="und" dir="ltr">10:48AM <a href="https://twitter.com/hashtag/Arknights?src=hash&ref_src=twsrc%5Etfw">#Arknights</a> <a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%BC%E3%82%AF%E3%83%8A%E3%82%A4%E3%83%84?src=hash&ref_src=twsrc%5Etfw">#アークナイツ</a> <a href="https://t.co/FZ9GqN5OlZ">pic.twitter.com/FZ9GqN5OlZ</a></p>— Kuroduki (@kurodukimajaja) <a href="https://twitter.com/kurodukimajaja/status/1358377545503174656?ref_src=twsrc%5Etfw">February 7, 2021</a></blockquote> 10:48AM #Arknights #アークナイツ pic.twitter.com/FZ9GqN5OlZ
— Kuroduki (@kurodukimajaja) February 7, 2021
参考
全部公式に書いてある。