WEBに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。Wordpressにはプラグインが多数揃っているので、ソースコードを記事内に記述する時に使えるプラグインはもちろんありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。

そこで今回は、プラグインを使わずにソースコードを記事内に配置する方法をご紹介します。ソースコードを記事内で使っている方はぜひ試してみてください。これを機に乗り換えを検討してみることも良いかもしれませんね。

技術サイト制作に役立つ!
プラグインなしでソースコードを記事内に表示できるツール4選

技術サイト制作に役立つ!プラグインなしでソースコードを記事内に表示できるツール3選

プラグインを使わずにソースコードを記事内に表示する方法は、ズバリ外部のWebサービスに頼ることです。これにより、プラグインによって引き起こされるページ速度の遅延を事前に防ぐことができます。では具体的にどういったツールが存在するのでしょうか。ここではプラグインなしでソースコードを記事内に入れることができるツールを3つご紹介します。

ソースコードを強制的にHTML変換してくれる「srctohtml」

まず最初にご紹介するのは、貼り付けたソース言語をそのままHTML形式に変換してくれるツール「srctohtml」です。このツールでは、HTMLはもちろんJavascriptやPHPといったソースコードをすべてHTMLに変換して出力してくれます。そのためHTML変換した言語は、そのままWordPressのテキストエディタに貼り付けることで、記事内にソースコードを表示することが可能です。

HTMLに変換

srctohtml

使い方はいたって簡単。表示したいソースコードを記載し、「HTMLに変換」ボタンをクリックするだけ。

コピー&ペースト

すると記事内に貼り付ける用のソースコードが出力されるので、それらをコピーしてテキストエディタに貼り付けてしまいましょう。

プレビュー

あとは保存してプレビュー画面で確認すればこの通り。迷うことなくキレイなソースコードが記述できましたね。

シンプルなエディタに表示してくれる!
エンジニア御用達の「Gist」

次にご紹介するのは、エンジニア御用達ツールGithubで利用できるGistです。このツールでは、Githubならではのシンプルなソースコードエディタを記事内に貼り付けることが可能。またGistでは、Githubのアカウントと連携したエディタを出力するので、埋め込んだコード経由で自身のGithubアカウントのブランディングにも役立ちます。

Gist

Gist

そんなGistの使い方も簡単。まずGithubアカウントをアカウント開設手順に沿って作成します。

コードを記述

次に画面右上の「New gist」をクリック。するとソースコードを入力できる画面が表示されるので、記事内に入れたいコードを書いていきます。

一度コードを公開

コードが書き終わったら一度コードを保存するために「Create public gist」でコードを公開保存しましょう。

コードを埋め込む

コードを公開できたら、「your gists」の画面で自分のコードが見れるようになっているので、画面右上にある「Embed」という項目から埋め込みコードをコピーして、WordPressのテキストエディタに貼り付けます。

貼り付けるとこんな感じ

あとは先ほど同様、記事を保存してプレビュー画面で確認してみれば、コードの貼り付けは完了です。

ファイル名も設定できる

ちなみにGistでは、どのファイルに使われるコードなのかを判別するため、「ファイル名」の設定もできるようになっています。そのため記事内に複数のソースコードエディタを使う際は、必ず「ファイル名」を入れるようにしましょう。

ソースコードと実行結果を一斉に表示してくれる「CodePen」

最後にご紹介するのは、エンジニアやアーティストなど世界中のクリエイターが手がける作品のソースコードを一覧表示できるWebサービスCodePenを使った方法です。このサービスでは、ソースコードを記事内に表示させる以外にも実際のソースコードの実行結果をプレビュー画面で表示してくれます。そのため読者はソースコードを見ながら、どういう実行結果をもたらすのかを事前に確認することができます。

codepen用のアカウントを作る

CodePen

使い方はGist同様、まずはCodePen用のアカウントを作成します。

コードを埋め込む

次に「New Pen」でコードを記述。一度コードを保存しましょう。すると右下にある「Embed」欄より埋め込みコードを出力できるようになるので、コピーしてWordPressのテキストエディタに貼り付けましょう。

codepenのエディタ

Gist同様に、CodePenならではのテキストエディタを記事内に挿入できました。

ソースコードをサクッと色分けして共有できる「Carbon」

こちらはログインも登録も不要で、ブラウザ上で瞬時に完結します。色分けしたいソースコードをコピペしたら、デザインを編集してiframeなどの埋め込みコードを取得できます。それらをWordPressの記事内に瞬時に差し込み可能です。

まとめ

今回は、プラグインを使わずにソースコードを記事内へ挿入する方法を4つご紹介しました。プラグインはたしかにあると便利ですが、プラグインは入れすぎるとWordPressの動作速度にも影響を与えかねません。そのためプラグインを使う際は、サーバースペックと相談しつつ、速度の低下を招かないように注意しましょう。

今回はプラグインを使わない方法をご案内しましたが、プラグインを使う方法ももちろんあります。「Crayon Syntax Highlighter」もご紹介しているので、気になった方は合わせてこちらもチェックしてみてください↓