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

ウオトミズ(UOTOMIZU)の中の人

Codepenを使う

Codepenhttps://codepen.io

 

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

メリット

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

デメリット

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

GitHubGistを使う

GithubGisthttps://gist.github.com

メリット

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

デメリット

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

自作する

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

 

index.php


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

メリット

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

デメリット

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

 

作成手順

手順1:Google Code Prettifyの導入

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

手順2:ショートコードの作成

手順2: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;
}

 

記事の編集画面にて

[sample-code file="ファイル名"]ここにコードを書く[/sample-code]

と記入すると以下のように表示される。

 

表示のされ方

装飾されたコード

終わりに

GitHubGistのデザイン変更については以下の記事を参照。

 

WordPressのショートコード作成のための基礎知識については以下の記事を参照。

 

 

 

.
スポンサーリンク

商用利用可な素材配布しています!!

商用利用可なフリー素材ULOCO商用利用可なフリー素材ULOCO