ブログにコードを載せる方法３選
こんにちは、キョウヘイ（@kyoheytsuda）です。
プログラミング学習をしながら、当ブログで発信をしているのですが、書いたコードを載せたいと思うことが少なくありません。
テキストで記載してもいいのですが、見た目がよくない上に分かり辛いので、何かいい方法はないかと探していたところ、便利なツールを発見しました。
今回の記事では、いい感じの見た目でブログにコードを載せる方法をご紹介します。
ブログにコードを載せる方法
僕がブログにコードを載せる時に使っているのは下記３つです。
最初はCodePenかJSFiddleを使っていたのですが、Prism.jsの存在を知ってからは、それぞれに使い分けることができるようになりました。
初心者はCodePenかJSFiddleを見た目の好みで選べばいいと思います。
Prism.jsはWordpressのテーマを少しイジるので導入に若干ハードルがあがりますが、見た目がかなり良いのでオススメです。
CodePenの使い方
使い方は簡単で載せたいコードが書けたらSaveしてEmbedを押せばOKです。
ブログへ貼り付ける為のコードが表示されるのでコピペすれば完了。
赤矢印がSaveで青矢印がEmbedです。
最初はEmbedが出ていないかもしれませんが、Saveすると出てきます。
ちなみに、使うにはサインアップが必要なのでTwitterのアカウントなどでサインアップしましょう。
JSFiddleの使い方
こちらも先ほどのCodePenと同様です。
SaveしてEmbedから出てきたコードをブログにコピペでOK。
赤矢印の部分がコピペするコードですね。
黄色いアンダーラインを引いた部分は表示したいコードの種類を選択できます。詳しく説明しなくても直感的にわかると思いますので試してみてください。
Prism.jsの使い方
ここからイッキに難易度が跳ね上がりますので、Wordpressのテーマをある程度弄れる人向けです。
作業手順は下記。
- オプションを選択する
- JSファイルとCSSファイルとダウンロードする
- それぞれのファイルをサーバーにアップロードする
- WordPressでファイルを読み込む
HPの上部にあるDOWNLOADを押すと色んなオプションが出てきます。
Themesは見た目、Languagesは対応する言語、Pluginsは機能を追加できます。
ここは個人によって違うところですが、参考までに僕が選択したものを紹介しましょう。
- ThemesはOKAIDIA
- LanguagesはMarkup,CSS,JavaScript
- PluginsはLine Highlight, Line Numbers, Show Language, Copy to Clipboard Button
よく分からない人はとりあえず真似してみてください。
後から変更したい場合はファイルをダウンロードし直してアップロードすればOKなので、ひとまず適当に決めて問題ありません。
ちなみに、僕の選択した内容で実装完了するとこんな感じになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Hello,World.</p>
</body>
</html>
コードも色分けされていて分かりやすいですよね。
Copy to Clipboard Buttonを選択したので読者の人も簡単にコピーできます。
さて、全ての選択が完了したらファイルのダウンロードが必要になります。
上記の通りJSとCSSのファイルをそれぞれダウンロードしてください。
完了したらご自身のサーバーへアップロードしましょう。
アップロードしたらWordpress管理画面から「外観」⇨「テーマエディター」を開き、テーマヘッダーでCSSファイルを読み込み、テーマフッターでJSファイルを読み込みます。
ヘッダーでの読み込みコード
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/prism.css">
ファイルパスはそれぞれ違うと思いますので、ご自身のファイルパスを通すように書き換えてから読み込んでくださいね。
ヘッダーでCSSファイルを読み込んだら、次はテーマフッターでJSファイルを読み込みましょう。
フッターでの読み込みコード
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/scripts/prism.js'></script>
コピーボタン設置の為のコードが1行目のコードなので、コピーボタンのプラグインを選択しなかった方は不要です。
2行目のコードだけコピペしましょう。こちらもファイルパスはご自身にあったものに書き換えてくださいね。
導入作業はこれで完了です。使い方は下記の通りにブログ記事内でコードを書けばOKです。
<pre class="line-numbers">
<code class="language-言語名">
表示したいソース
</code>
</pre>
preタグとcodeタグで囲んで中にソースコードを記載すればOKです。
class名は選択したオプションを適応させる為に付けていますので、不要な人はclass名をつける必要はありません。
注意事項としては＜＞は特殊文字に変換する必要があって
＜は ＆lt;
＞は ＆gt;
と記載する必要があります。
まとめ
CodePenとJSFiddleだけでもブログにコードを記載することができるので、難しいことは分からないという人はこのふたつを使うといいでしょう。
Prism.jsについては難しいですが、見た目的にかなり満足度が高いので、今回の説明が理解できた人は挑戦してみるといいかもしれません。
以上、僕がブログにコードを記載するときに使っているツールの紹介でした。