
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%自分好みのデザインに変更できる。
デメリット
- サーバー側の設定によって、たまに書けないコードがある。
作成手順
手順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のショートコード作成のための基礎知識については以下の記事を参照。