見やすく装飾されたコードを記事に表示する手段一覧

Codepenを使う

Codepen：https://codepen.io

HTMLとCSSとJSを使うならば、Codepenが良い。

メリット

HTMLのみ・CSSのみ・JSのみなどデフォルトの表示を選べる
ユーザーも必要に応じて表示を変更できる
アニメーション系のコードに便利
CodePenのUIが良いのでコードが見やすい
記事の面積を取らない

デメリット

使える言語がHTML系とCSS系とJS系のみ

GitHubGistを使う

GithubGist：https://gist.github.com

メリット

どんなコードでも表示できる
CSSでデザインをカスタマイズできる

デメリット

アカウントBanになり可能性がある

自作する

WordPressであれば、ショートコードを作成すると便利。

index.php


<div class="sample-code">サンプルコード</div>

メリット

100%自分好みのデザインに変更できる。

デメリット

サーバー側の設定によって、たまに書けないコードがある。

作成手順

手順１：Google Code Prettifyの導入

Google Code Prettify ：https://github.com/google/code-prettify

手順２：ショートコードの作成

手順２：CSSで見た目を装飾

function.php


//code-prettifyを導入
function my_enqueue_scripts() {
wp_enqueue_script( 'codeprettify', '//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js' );

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
//ショートコードの作成

add_shortcode('sample-code', 'decorateCode');

function decorateCode( $atts, $content = null ) {

extract(shortcode_atts(array(

'file'=>"",

),$atts));
return '<p class="file-name"><code>'.$file.'</code></p><pre><code class="prettyprint">' . $content . '</code></pre>';

}

style.css


p.file-name {
    display: inline-block;
    margin-top: 30px;
    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    background: lightgray;
    padding: 0 15px 0 10px;
    color: #006589;
  }

p.file-name:before {
      content: "</>";
      display: inline;
      padding-right: 3px;
}
pre {

    font-family: monospace;
    display: block;
    padding: 0 10px 10px;
    background: #F4F4F4;
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 30px;
}

code {
　font-family: monospace;
    padding: 0 5px;
    padding-bottom: 10px;
    display: inline-block;
}