WordPress ブログ運営

【WordPress】記事にソースコードを表示する方法を比較解説

投稿日:2018年8月1日 更新日:

ソースコード

ブログでHTMLやCSS、PHPなどのソースコードを紹介したいときは、エディタのように行番号や色を付けて紹介することができる「Syntax Highlight(シンタックス・ハイライト)」を使うと便利です。

WordPerssでSyntax Highlightを使うにはプラグインを使う方法が一般的ですが、プラグインを使いたくない方も多いので、プラグインを使わない方法もあわせてご紹介します。

プラグインを使う方法

WordPressのSyntax Hightlightのプラグインは以下の2つが人気です。

どちらも機能は豊富でとても便利なプラグインです。

プラグインなので導入も簡単なのですが、ページが重くなって表示速度が遅くなってしまうというデメリットがあります。

Crayon Syntax Highlighter

Crayon Syntax Highlighter

SyntaxHighlighter Evolved

SyntaxHighlighter Evolved

プラグインを使わない方法

Gist

GistはGitHub(ソースコードをホスティングするためのサービス)に登録したソースコードを共有するためのサービスです。

Gistで作成した1行のコードを記事に埋め込むだけです。

上のサンプルは見た目がシンプルですがCSSでカスタマイズ可能です。

Github Gist

CSSでカスタマイズしないと上の画像のように一番下にハートマークの付いた1行が追加されます。

ハートマーク使うキャラじゃないので、そこだけは以下のCSSで消してましたw

Prism.js

Prism.js

JavaScriptのライブラリを使って導入する方法です。

まとめ

下記2点が選択を分ける要因になると思います。

  • プラグインを入れることに抵抗があるかどうか
  • ソースコードを埋め込む頻度はどの程度か

プラグインを入れることに抵抗があって、ソースコードを埋め込む頻度が多くない場合はGistがオススメです。

Gistはソースコードを埋め込む度にGistのサイトにアクセスしなければなりませんので、ソースコードを埋め込む頻度が多い場合はPrism.jsがオススメです。

最後にひとこと

以上で「記事にソースコードを表示する方法(Syntax Highlight)」の解説は終わりです。

各方法の設定方法についてもいつか解説したいと思います。

-WordPress, ブログ運営
-, , , , ,

執筆者:

関連記事

WordPress パーマリンク設定

【WordPress】SEOに最適なパーマリンク(URL)設定

ブログをはじめたばかりの方が意外と見落としがちなのが、この「パーマリンク」。 そもそも「パーマリンクってなんぞや?」って方が多いと思います。 しかし、WordPressでブログを運営していく場合、パー …

WordPressコメント機能

【WordPress】コメント機能を無効化(非表示・削除)する方法

WordPressにはコメント機能が標準で設置されています。 コメント機能は読者の方とコミュニケーションを図るうえでとても便利な機能なのですが、ブログを運営していると、スパムコメントが入ってきたり、嫌 …

WordPress www

【WordPress】www有無を統一!リダイレクトの設定方法

ホームページやブログのURLは「www」を有りにしても無しにしてもどちらでも表示することができます。 サイトを公開して何も設定しないとどちらのサイトにもアクセスできる状態です。 www.zakkipo …

ブロガーとアフィリエイターの違い

ブロガーとアフィリエイターの違いって何?大御所の発言(比較・まとめ)

ブログをはじめたばかりの頃に、「あれ、ブロガーとアフィリエイターって何が違うんだっけ?」と疑問を持ったことがある人は少なくないはず。 調べてみたところ、これまでに著名なブロガーやアフィリエイターによっ …

アフィリエイト

アフィリエイトはじめました。

目次 1. アフィリエイトはじめました。2. アフィリエイトってなに?3. どんなアフィリエイトを扱っていく?4. アフィリエイトってどうやってはじめるの? アフィリエイトはじめました。 ブログをはじ …

スポンサー

PROFILE

zakker

Zakker(ザッカー)

零細企業経営者。東京都在住。田舎暮らしに憧れを抱きながら東京で消耗中。いつかその日が来ることを信じて場所にとらわれない働き方の確立を目指して奮闘しています。