ブログにコードを書いたときに見栄えをよくする方法
ブログ等にコードを書く場合の見栄えを綺麗にする方法について調べました。
具体的には下記のような見栄えにする方法について調べました。
p {
font-size: 1.5em;
}
コードを書くときに使うhtmlタグ
コードを使う書く際は2種類のタグを使います。
上記の2つを使います。preタグはスペース等をそのまま表示するタグでcodeはタグ内がコードであることを表します。
しかし実際にpreタグとcodeタグを使ってコードを書いてみると下記のようになります。
p {
font-size: 1.5em;
}
Google Code Prettify
コードであることが分かりやすくするためにGoogle Code Prettifyを使います。
こちらを使うことによってコードの見栄えを整えて、コードを色分けしてくれます。
Google Code Prettifyを読み込む
Google Code Prettifyを使うためには下記のコードを追加し、CDNでGoogle Code Prettifyを読み込みます。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
しかし読み込むだけだと、コードの色分けはされるのですがどこからどこまでがコードなのか分かりづらいです。
cssを読み込む
Gallery of themes for code prettifyの中から好きな見栄えを選んでcssを読み込みます。
はじめはdefault見栄えになっているので、好みに合わせて見栄えを選択してください。ちなみに今回の記事で使っているのはDoxyというテーマです。
クラスを当ててコードを書く
準備は整ったので後はコードを書くだけです。preタグにprettyprintというクラスを当てます。
また、書いているコードに沿ってクラスを当てます。例えばhtmlを書いたのであればlang-html、cssを書いたのであればlang-cssを当てます。
<pre class="prettyprint lang-css">
<code>
p {
font-size: 1.5em;
}
</code>
</pre>
上記のコードが下記のような見栄えになります。
p {
font-size: 1.5em;
}
まとめ
いかがでしたか、コードをブログなどに載せる際には便利な機能を使って見やすくすることで読者のためになります。
様々なオープンソースを利用して、ユーザーのためになる機能を実装していきたいですね。
また、他に便利なオープンソースや機能を見つけた際には記事を書きたいと思います。
