ページ内に綺麗にソースコードを表示させるプラグイン「SyntaxHighlighter Evolved」

みなさんこんにちは、WordPressの運営の調子はいかがでしょうか？

長らくWordPressでブログを運営していると、多くの方のブログを参考として拝見する機会が多くなります。
そんな時に見かけるのが、ページ内に綺麗にソースコードを表示させているページです。
これは一体どのような方法で表示させているのでしょうか？

答えは、プラグインによって簡単にWordPress初心者の方でも実装できてしまいますので、ご紹介したいと思います。

HTMLのタグやソースを埋め込んで表示する方法

まず、ページ内に綺麗にソースコードを表示させるにはどのような方法があるのでしょうか？いくつか方法があるのでご紹介していきます。

ウェブサービスやプラグインなど何も使わずに、埋め込みたいという方が使用されるのが、preというタグです。
preタグとは、半角スペースや改行などがそのまま表示されるのでHTMLなどのソースコードを表示したい時に用いられます。

しかし、pre>グを利用する場合、HTMLソースをそのまま維持して表示したい時には、
< あ > を、< あ > に置き換えるてあげる必要があったりかなり面倒です。
また、見た目にもCSSで調整が必要だったりと、閲覧者であるユーザーにとってもよくないと思うので、あまりおすすめではありません

続いて、コードを埋め込んで貼り付ける方法です。
有名なものとしては、GitHubが運営しているGistというウェブサービスがあります。

Gistを利用することで、埋め込んだコード別で色がついて表示され、見た目でもかなり綺麗に読みやすい印象を与えることができます。
１つ小さな欠点とすれば、いちいちGistのアカウントを作成しログインして、利用しないといけないという点です。

上記で、ページ内に綺麗にタグやソースコードを表示させる方法をご紹介しましたが、僕がおすすめする方法は、プラグインを利用することです。

高機能なものからシンプルな機能を持ち合わせているものまで様々な種類のプラグインがありますが、その中でも断トツでいいと思ったものが、「SyntaxHighlighter Evolved」です。

「SyntaxHighlighter Evolved」とは、WordPresss初心者の方でもタグやソースを綺麗にページに表示させてくれるプラグインです。

使い方はとても簡単で、埋め込みたいコードを対応の言語で囲むだけで綺麗にソースを埋め込んで表示してくれます。

「SyntaxHighlighter Evolved」をおすすめする理由として、難しい設定作業などが必要なく、WordPress初心者の方でもインストールするだけで、簡単に利用できる点にあります。

また、HTMLやCSS、PHPなどにとどまらず、他の様々な言語に対応している点も魅力で、さらに日本語対応している点も非常に高ポイントです！

表示されるデザイン（テーマ）も複数あるため、ご自身のサイトのデザインを崩さず埋め込み表示してくれるでしょう。

いかがでしたでしょうか？
今回は、ページ内に綺麗にソースコードが表示できる方法とおすすめのプラグインである「SyntaxHighlighter Evolved」をご紹介しました。

HTMLやCSSを埋め込んで解説する記事を書く機会が多いという方には、うってつけのプラグインだと思いますので、ぜひ導入してみてはいかがでしょうか？
最後までお読みいただきありがとうございました。