【Cocoon】記事内にソースコードを埋め込む方法【テンプレあり】

当ブログ（わやずぶろぐ）では、無料なのに素晴らしいWordPressテーマ「Cocoon」を使用しています。

この記事では、「Cocoon」の記事内にソースコードを埋め込む方法をまとめました。
コピペして使えるテンプレも作ったので、ぜひ使ってくださいね。

また、「HTML/CSS/Javascript」については、ブログ内でデモを見せるのに「CodePen」が便利なので、その使い方も解説します。

本記事の内容

「Cocoon」の記事内にソースコードを埋め込む方法
「CodePen」とは？使い方や埋め込む方法の解説

この記事を書いている私（わや@wayasblog）は、プログラミング独学を始めて約１年ほど。

知識がある程度たまってきたので、せっかくだから備忘録も兼ねてブログで発信しようと思います。
まずはブログ記事へのソースコードの埋め込み方を学んだので、シェアします。

クリックできる目次

「Cocoon」の記事内にソースコードを埋め込む方法
1. 基本的なやり方
2. テンプレを作りました
「CodePen」とは？使い方や埋め込む方法の解説
【Cocoon】記事内にソースコードを埋め込む方法【まとめ】
最後に宣伝

「Cocoon」の記事内にソースコードを埋め込む方法

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
  margin: 0 auto;
}

.circle:hover {
  box-shadow: 10px 10px 20px 0 grey;
}

この記事が目指しているのは、上記のようにソースコードをハイライト表示させることです。
それでは見ていきましょう。

基本的なやり方

まずは、ハイライト表示設定を確認しておきましょう。

※この記事内のすべての写真は、クリックすると拡大します。

Cocoon設定 → コード → 「ソースコードをハイライト表示」にチェックを入れれば完了です。

実際に記事にソースコードを挿入する時には、右の＋マークを押して「コード」を選択します。

そして右側の言語選択から、入力した言語を選択するだけです。

簡単に埋め込むことができました。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
  margin: 0 auto;
}

.circle:hover {
  box-shadow: 10px 10px 20px 0 grey;
}

テンプレを作りました

基本的には上記でOKなのですが、そのままだと何のコードか分かりにくいですよね。

そこで、どのソースコードなのかひと目でわかるテンプレを作りました。
一度設定してしまえばOKなので、ぜひ使ってみてください。

下記のように、左上にタグをつけています。

<div class="circle"></div>

.circle {
   width: 100px;
 }

jQuery('.drawer-icon').on('click', function () {
	jQuery('.drawer').toggleClass('m_checked');
});

<?php get_template_part('template-parts/pickup_by_tag'); ?>

設定方法は、Cocoon設定 → 外観 → テーマエディターの１番下にCSSを追記します。

 /*以下のコードを全て追記します*/ 
 .hljs {padding: 40px 12px 12px;position: relative;}
 .hljs::before {color: #fff;content: "";font-family: "Noto Sans JP", sans-serif;font-weight: 700;left: 0;padding: 2px 8px;position: absolute;top: 0;}
 .hljs.html::before {content: "HTML";background-color: #e44d26;}
 .hljs.css::before {content: "CSS";background-color: #006eb9;}
 .hljs.javascript::before {content: "JavaScript";background-color: #e5a228;}
 .hljs.php::before {content: "PHP";background-color: #8892bf;}

この表示を使うには、右側の言語選択から入力した言語を選択するだけです。

以上、記事内にソースコードを埋め込む方法＋タグのつけ方でした。