WEBに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。Wordpressにはプラグインが多数揃っているので、ソースコードを記事内に記述する時に使えるプラグインはもちろんありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。
そこで今回は、プラグインを使わずにソースコードを記事内に配置する方法をご紹介します。ソースコードを記事内で使っている方はぜひ試してみてください。これを機に乗り換えを検討してみることも良いかもしれませんね。
目次
技術サイト制作に役立つ！
プラグインなしでソースコードを記事内に表示できるツール4選
プラグインを使わずにソースコードを記事内に表示する方法は、ズバリ外部のWebサービスに頼ることです。これにより、プラグインによって引き起こされるページ速度の遅延を事前に防ぐことができます。では具体的にどういったツールが存在するのでしょうか。ここではプラグインなしでソースコードを記事内に入れることができるツールを3つご紹介します。
ソースコードを強制的にHTML変換してくれる「srctohtml」
まず最初にご紹介するのは、貼り付けたソース言語をそのままHTML形式に変換してくれるツール「srctohtml」です。このツールでは、HTMLはもちろんJavascriptやPHPといったソースコードをすべてHTMLに変換して出力してくれます。そのためHTML変換した言語は、そのままWordPressのテキストエディタに貼り付けることで、記事内にソースコードを表示することが可能です。
使い方はいたって簡単。表示したいソースコードを記載し、「HTMLに変換」ボタンをクリックするだけ。
すると記事内に貼り付ける用のソースコードが出力されるので、それらをコピーしてテキストエディタに貼り付けてしまいましょう。
あとは保存してプレビュー画面で確認すればこの通り。迷うことなくキレイなソースコードが記述できましたね。
シンプルなエディタに表示してくれる！
エンジニア御用達の「Gist」
次にご紹介するのは、エンジニア御用達ツールGithubで利用できるGistです。このツールでは、Githubならではのシンプルなソースコードエディタを記事内に貼り付けることが可能。またGistでは、Githubのアカウントと連携したエディタを出力するので、埋め込んだコード経由で自身のGithubアカウントのブランディングにも役立ちます。
そんなGistの使い方も簡単。まずGithubアカウントをアカウント開設手順に沿って作成します。
次に画面右上の「New gist」をクリック。するとソースコードを入力できる画面が表示されるので、記事内に入れたいコードを書いていきます。
コードが書き終わったら一度コードを保存するために「Create public gist」でコードを公開保存しましょう。
コードを公開できたら、「your gists」の画面で自分のコードが見れるようになっているので、画面右上にある「Embed」という項目から埋め込みコードをコピーして、WordPressのテキストエディタに貼り付けます。
あとは先ほど同様、記事を保存してプレビュー画面で確認してみれば、コードの貼り付けは完了です。
ちなみにGistでは、どのファイルに使われるコードなのかを判別するため、「ファイル名」の設定もできるようになっています。そのため記事内に複数のソースコードエディタを使う際は、必ず「ファイル名」を入れるようにしましょう。
ソースコードと実行結果を一斉に表示してくれる「CodePen」
最後にご紹介するのは、エンジニアやアーティストなど世界中のクリエイターが手がける作品のソースコードを一覧表示できるWebサービスCodePenを使った方法です。このサービスでは、ソースコードを記事内に表示させる以外にも実際のソースコードの実行結果をプレビュー画面で表示してくれます。そのため読者はソースコードを見ながら、どういう実行結果をもたらすのかを事前に確認することができます。
使い方はGist同様、まずはCodePen用のアカウントを作成します。
次に「New Pen」でコードを記述。一度コードを保存しましょう。すると右下にある「Embed」欄より埋め込みコードを出力できるようになるので、コピーしてWordPressのテキストエディタに貼り付けましょう。
Gist同様に、CodePenならではのテキストエディタを記事内に挿入できました。
ソースコードをサクッと色分けして共有できる「Carbon」
こちらはログインも登録も不要で、ブラウザ上で瞬時に完結します。色分けしたいソースコードをコピペしたら、デザインを編集してiframeなどの埋め込みコードを取得できます。それらをWordPressの記事内に瞬時に差し込み可能です。
プログラミング関連の情報を発信している方は、ブログやSNS上でサンプルコードを共有する機会が多いですよね。 その際に、ただコードを貼り付けるだけでは味気ないです。下記のように色分け（ハイライト）されている方が圧倒的に見やすいです。 当記事では、上記のようなクールで見やすいコードを簡...
まとめ
今回は、プラグインを使わずにソースコードを記事内へ挿入する方法を4つご紹介しました。プラグインはたしかにあると便利ですが、プラグインは入れすぎるとWordPressの動作速度にも影響を与えかねません。そのためプラグインを使う際は、サーバースペックと相談しつつ、速度の低下を招かないように注意しましょう。
今回はプラグインを使わない方法をご案内しましたが、プラグインを使う方法ももちろんあります。「Crayon Syntax Highlighter」もご紹介しているので、気になった方は合わせてこちらもチェックしてみてください↓
2021年11月現在、このプラグインは6年以上更新されていませんので、代わりとなる下記プラグインをおすすめいたします。 技術系ブログやプログラミングについて解説したサイトを運営していると、ソースコードを記事内に書く機会もあると思います。しかしそのまま記事内にソースコードをただ羅列するだけでは、...
