ブログでソースコードを表示する方法

WEB
2020.09.03

実は色々と方法がある表示方法

別の記事を編集している最中に、記事内でCSSの記述を載せる必要があったのですが、どうやって表示するのかわからなかったので調べてみました。ソースコードをブログに表示する方法はたくさんあるようなので、調べた方法のいくつかを以下に紹介します。

そもそもソースコードとは？

ソースコードとは、プログラミング言語で書かれたテキストのことを指します。
ソースとかコードなんて呼んだりします。

実際の表示方法を紹介

それでは、以下の３種に分けてまとめてみます。

  • 外部サイトを使う方法
  • プラグインを使う方法
  • タグを使う方法

外部サイトを使う方法

個人的に一番良いと思った方法がこちらです。

CodePenの紹介

今回はCodePenを紹介します。
CodePenはオンラインでHTML、CSS、JSのソースコードを編集できるエディターですが、色々なサイトでよく見かけるので密かに憧れていました。会員登録をする必要があるのですが、使い方はとってもシンプル！しかも表示が軽いうえに使いやすい！
オープンソースの環境でスニペットを作成して公開できるオンラインコミュニティなので、WEBサイトのプログラミングを勉強している身としてはありがたいサービスです。

■ CodePen
https://codepen.io

英語サイトかつアカウントを作る必要はありますが、必要なのはメールアドレスのみ。項目が少ないので、高い英語力も要りません。また、TwitterやFacebook、Githubのアカウントがあればそちらでもアカウント登録が可能なようです。

私はメールアドレスでアカウントを作成したのですが、その際に必要だった項目は以下の4点のみ。登録に1分もかかりませんでした。

  • 名前
  • ユーザーネーム
  • アドレス
  • 任意のパスワード

登録を完了した瞬間から使用可能です。コード編集は以下のような画面で行います。

黒い画面が三分割で分かれていて各言語を実装した際のサンプルを見ながらまとめて記述できるのでとっても便利ですね！
記述した内容はリアルタイムで下の白い画面にプレビューが出てきます。

実際にCodePenでソースコードを埋込む方法

肝心の埋め込み方法についてですが、実際の埋め込みはすごく簡単です。手順はこれだけ。

■ 手順１：コードの記述が終わったら右上にある【Save】で保存をして、同画面内の右下にある【Embed】をクリックする。

■ 手順2：ポップアップが出てくるので、表示されている【Preview】を見ながら好みで変更。

①Theme表示する際の背景色を選べます。Lightにすると白、Darkにすると黒の背景になります。こちらのブログは背景が白いので、わかりやすいように黒としました。
②Default State埋込んだ先の画面ではボタンを押すまで結果が表示されないようになります。
③Editable State有料の設定です。コード編集が可能な埋め込みができるようになるそうです。

■ 手順3：設定が終わったら下部に表示されるhtml部分をコピーして、Cocoonにhtmlをペーストすると以下のように埋め込むことができます。

See the Pen Sample_3sep2020 by wakamatsu (@waka7373) on CodePen.

↓ちなみに②にチェックを入れるとこうなります。jsのコードがある際などには便利かと。

See the Pen Sample_3sep2020 by wakamatsu (@waka7373) on CodePen.

その他のオンラインエディター

CodePen以外にもWordPressとは別の外部サービスを使ってコードを埋め込むことは可能です。代表的なものでいくとGitHub（https://github.com）でしょうか。WEBコーディング特化のCodePenと比べて、こちらのGitHubはソフトウェア開発者などが利用するプログラマの為のプラットフォームらしいのです。なので、WEBサイトのコーディングだけではなく、様々な言語を習得してガッツリプログラミングをやる予定であれば、最初からGitHubに登録した方が良いのかもしれません。

WordPressのプラグインを使う方法

Word Pressには「プラグイン」といって、様々な機能を拡張して使えるいわばソフトのようなものがありますが、そのプラグインの中にコードをそのままブログに埋め込めるものがあるそうです。

ただし、プラグインはいくつも実装してしまうとサイトが重たくなるなどのデメリットがあります。簡単に外部から埋込みできるのであれば、プラグインは使わずに最小限に控えるのがベターかと……！

ということで、個人的には上記で紹介したようなCodePenなどを利用するのが楽ちんで良いのではないかと思います。それでも試しに使ってみたいという方は、Crayon Syntax Highlighter などが有名なので、試しに実装してみるのもいいかもしれません。

Cocoonのコード入力ブロックを利用する方法

私は本ブログをWordPressのCocoonで編集しているのですが、入力ブロックの種類で【コード】を使うと、簡単にコードを挿入することができます。

<div class="sample">
こちらが【コード】で入力しているブロックです。
<p>
こんな感じで<p>を入れても<br>を入れても
後述する<pre>タグのように特殊文字を使う必要はなく
入力した状態のまま自由に
改行できます
</p>
<!--コメントアウトの表示はこんな具合です-->
</div>

上記のブロックは背景に自動的に色がつくので記事と区別できてわかりやすいですが、初期状態だとグレー背景に黒文字のシンプルな表示で、コードとして見るには少し読みにくいのです。このブロックを使っても自動的にタグの色が変わるわけではないのでカスタマイズしなければなりません。

Cocoonのデフォルトで<pre>タグをハイライト表示させる方法

タグをハイライト表示する設定がCocoonにあるようです。気になる方は参考にしてみてください。

ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。
wp-cocoon.com

<pre>タグを使って表示を差別化する方法

<pre>タグというのは、簡単にいうとタグで囲った範囲の改行箇所などがそのまま表示されます。
WordPressを利用していない方はこちらを利用されると良いかもしれません。

ただし、上記の入力ブロック表示例内にもチラッと触れたたのですが、この方法だと「<」や「>」といった文字がソースコードの一部として認識されて非表示になってしまうので、いちいち特殊文字を置換えなければならず、少々面倒臭いというのが正直なところです。

まとめ

…というわけで、個人的に一番手軽だと思った方法はCodePenを埋め込む方法でした。

CodePenの場合だとHTML、CSS、JSをまとめて表示してくれる上に完成形のプレビューも見せてくれるので便利ですが、逆に言えば、HTMLの一部だけサンプルとして表示したいという場合には、WordPressでCocoonを利用されている方は入力ブロックの【コード】を使ってカスタマイズ設定するのが良いのではないかと思います。

他にも試しながら、もしも追記があれば、こちらの記事を更新していきたいと思います。

タイトルとURLをコピーしました