如何在 Hexo 主題部落格嵌入 CodePen

初建 Hexo 部落格，先寫個小東西來體驗一下

嵌入 CodePen

Hexo 官方有提供的標籤外掛語法
其中的 iframe 語法：

1	{% iframe url [width] [height] %}

CodePen 提供的 iframe 程式碼：

<iframe height="265" style="width: 100%;" scrolling="no" title="img範例 " src="https://codepen.io/Nighthree/embed/JjoERzj?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Nighthree/pen/JjoERzj'>img範例 </a> by Nighthree
  (<a href='https://codepen.io/Nighthree'>@Nighthree</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

把官方提供的方法 [width] [height] 去掉，取出 CoddPen 提供的 iframe 的 src 路徑帶入 url ，在文當中加入以下

1	{% iframe https://codepen.io/Nighthree/embed/JjoERzj?height=265&theme-id=dark&default-tab=html,result %}

這樣就嵌入成功啦

問題來了 CodePen iframe 去哪找呢？

在這裡

右下角的 Embed (真是有夠小的啦)，然後我會在 Theme 的部分改為 Dark ，有的人系統會預設 Light (我第一次打開就是)，最後底下的地方切到 iframe 碼的部分就可以哩~

結語

感覺還不錯，下次再看看要寫什麼吧，或是把之前寫的東西搬過來