ブログにCodeをCodePenを使って載せる方法 【Wordpress】
以前からブログにプログラミングのコードを載せてきたのですが、ユーザーがそのコードを見やすくするにはいろいろなやり方があると思います。今回は、CodePenを使って、実際にコードを載せてみたいと思います。
まずは、ここ(CodePen)からユーザー登録し Log in します。
Twitter、Facebook、GitHub との連携が可能で簡単に登録できるので便利です。
自分はGitで登録したので、Log In with GitHub を押してログインします。
実際にログインすると…
上記のような画面に行くので、Create の New Pen をクリックします。
あとは、 HTML 、CSS、 JS 等 を書き込んで実際にコードを打ち込みながら仕上がりを確認していきます。
ここまでできたらあとは簡単です。下にあるEmbedからコードをコピーするだけ！
コピーコードをWordpressの記事投稿の際にテキストに貼り付けるだけ。
実際に貼り付けたものが下にあります！
See the Pen erGMxv by 寿和平野 (@toshikazuhirano) on CodePen.
EDIT ON CODE PEN をクリックするとユーザーがソースを見て実際に編集したりすることもできます。今までと違うところは、自分のコードをただ載せるだけではなく、ユーザーが見て実際にいじれるところがCodePenのいいところだと思います。今後、コードを載せる際はCodePenを使っていこうか…なんて考えています。
WordPressのプラグイン(Crayon Syntax Highlighter)を使ってコードを載せた場合は次のページに記載します。
ぜひ、参考にしてみてください。
コメント