Cocoon ソースコードを表示させる方法

WordPressテーマの「Cocoon」を使用しているなかで記事内にソースコードを入れる場合に綺麗にコードを表示する方法を説明します。

ソースコードを表示させる方法

ソースコードは「<pre></pre>」タグを、テキストエディタで追加するだけです。

***カテゴリウィジェット**/
#sidebar aside ul li ul li {
background: 0;
padding-left: 0;
}
#sidebar aside li.cat-item a {
display: block;
overflow: hidden;
font-size: 14px;
line-height: 2.3em;
text-decoration: none;
padding: 0 8px;
color: #2098a8;
border-bottom: 1px dashed #ccc;
}
#sidebar aside li.cat-item a:hover {
background: #fff;
color: #C03;
}
#sidebar aside li.cat-item span {
line-height: 1em;
float: right;
margin: 8px 0 0 8px;
padding: 4px 5px;
border-radius: 4px;
color: #545454;
background: #eaf4fc;
}

注意点は「ビジュアルエデタ」に入力してもうまく表示されないので「テキストエディタ」に入力するようにしてください。これでソースコードと通常の文章の区別がしやすく綺麗に表示されるので便利ですね。