ワードプレスの記事中にソースコードを埋め込んでいる方いますよね。

あれ結構カッコイイじゃないですか!

このサイトでは、これまでただコードを書いて紹介していたんですが、やはり分かりにくい。。。

自分も同じようにコードを埋め込みたいと思って、その方法を調査&実践しましたので、ここでシェアします。

調べてみると

とりあえず、ワードプレスの記事に埋め込む方法を調べてみると以下の通り、

・HTMLのタグで埋め込む

・ワードプレスのツール(プラグイン)を使う

・その他のツールを使う

といった方法がありました。

HTMLタグで埋め込む

これは非常に簡単で<pre>タグを使うというもの。

<pre>コード<pre>という風に囲んであげればOKです。

この<pre>の部分に背景色などを追加するとより分かりやすいです。

<pre style=”color: #ffffff; background-color: #000000;”>

という風に。

実際の例がこれ↓

echo "Hello World";

あれ?ただの文字ですやん。。。

賢威というテンプレートを使用しているので、直接の装飾タグは使えないのかしら?

いずれにしてもこの方法だとちょっと見た目もそんなにかっこ良くないので、プラグインを使ってみましょ。

プラグインを使う

もう一つはプラグインを使う方法。

そのプライグインとは「SyntaxHighlighter」です!

実際に入れてみましょ。

■手順

1.左メニューの「プラグイン」⇒「新規追加」をクリック。

2.プラグインの追加の画面で「プラグインの検索」の部分に、「SyntaxHighlighter」を入力。

3.「SyntaxHighlighter Evolved」って名前のをインストールする。

4.インストールが完了したら「有効化」する。

■使い方

あとはhtmlのショートコードでソースコードを囲めば大丈夫です。

↓こんな感じです。赤枠で囲まれた部分がショートコードですよ。


↓結果がこんな感じです。

echo "Hello World1";
echo "Hello World2";
echo "Hello World3";

どうです?ちゃんと表示されましたね。

プラグインにも色々なものがあって、表示のされ方も全然違いますので、色々と試してみるのもいいと思いますよ。

その他のツールを使う

今回はプラグインを導入してみましたが、それ以外のツールを使う方法もあります。

有名なのはgithubを使う方法です。

ソースコードをしっかりと管理したい方はこちらの方がオススメかもしれません。

アカウントなどが必要になるので、具体的な方法等はまた別途ご紹介をしたいと思います。

という事で

今後はこんな感じでソースコードを表示していきたいと思います。

とりあえず、めでたしめでたしと言う感じです。

なんだかそれっぽいサイトになってきたような気もします!

え?まだまだですって?

これからもっともっとかっこよくしていきたいと思いますので、ぜひともよろしくお願いします^^