CodePenの埋め込みに対応させてみた

Zenn記事に触発される

こちらの記事を読んで、自分のブログにも適用させたくなった。

元の記事そのものもReact Hooksを簡単に紹介する感じの記事で面白いのでフロントエンドまわりに興味があるなら読んでみるとよいかも。

CodePenとは

でCodePenとはなんぞやという話だが、下のような埋め込み式のプレビュー付きエディタのサービス。

導入方法

忘れないうちに手順を書いておこう。

と思ったが、プラグインがもうあったのでnpmでインストールするだけだった。

npm i -S @weknow/gatsby-remark-codepen

当然ながら、npm install --saveでもよい。個人的には、短く書くオプションがあるときは可能な限りそちらを使いたい派。

Azureのazコマンドでも--locationではなく-l、--resource-groupではなく-gを必ず使う。

ちなみに、--nameは-n、--parametersは-p、--outputは-oである。これだけで何十文字も節約できている！（それを紹介するのにこの文章を打つ無駄は考えていないタイプ）

閑話休題。

あとは、gatsby-config.jsに下記を追加。

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve:"@weknow/gatsby-remark-codepen",
          options: {
            theme: "dark",
            height: 400
          }
        }
      ]
    }
  }
];

普通にわかるかもしれないが、公式ページを鵜呑みにすると陥りやすいポイントとしては、上記をそのまま追記するとたぶん失敗する。

というのもgatsby-transformer-remark系のプラグインは普通に作ると他にもいろいろ導入されているはずなので、ちゃんと既存のものとマージする形で書き加える必要がある（あたりまえ体操）。

Markdownには、JSXを書くのではなく、単にURLをそのまま書くだけでembedされる。

これ以上シンプルなことはない。素晴らしい。

片手落ち

ちなみに肝心の埋め込みたいCodePenオブジェクトは今のところない（ガクッ）。