WordPressプラグイン「SyntaxHighlighter Evolved」を導入したよ

こんにちは、kisseです。

今まで、コードの表記が

これはコードです

っていう状態でかなり見にくい状態でした。

しかし、今回WordPressプラグイン「SyntaxHighlighter Evolved」を導入して、

これはコードです。

という、なかなかしっかりしたコード表記を行えるようになりました。

本記事では「SyntaxHighlighter Evolved」の導入方法について簡単に触れていきます。

プラグインの設定

インストール後有効化して、WordPress管理画面の設定から、「SyntaxHighlighter Evolved」の設定画面に移動します。

設定するといっても、全てデフォルトで十分使えます。
バージョンは3系のままで。
テーマカラーだけ設定しましょう。
このブログでは、デフォルトテーマで使用していますが、ブログ背景に合わせてテーマを変更すると良いでしょう。
(普段のエディタだと黒背景が普通だけど、白背景が多いWebページで黒背景で埋め込み行うとちょっと浮くんですよね…)
タブサイズとかはデフォルトで4なのですが、好みによって2とかに変えると良いと思います。

フォントとか、さらにデザインを設定したい場合には、直接CSSをいじることになります。
バックアップ取っておくなどして、万一に備えてから作業をすることをおすすめします。

私がフォントを変更するためにいじったファイルは、wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.cssです。
これの50行目にある、

font-size: 1em !important;

font-size: 12px !important;

に変更しました。
これでフォントサイズを変更しました。
やはり、ブログは表示スペースが限られるので、フォントサイズは大事ですよね。

このような手順で、どんどん埋め込んだコードの表示を設定することができます。
CSSがある程度わかる人であれば、やりたい放題できますよ。笑

使い方

使い方
上記のようにするとCSSのコードが表示されるようになります。
他の言語で記述したコードを表示させる場合には、[]内の’css’を表示させたい言語に変えれば綺麗にハイライトしてくれます。

まとめ

いかがでしょうか。
技術ブログには必ず存在する、コードの埋め込みですが微妙に苦戦する人が多いのではないでしょうか?(例えば僕)

WordPressを使っているなら、プラグインの恩恵を存分に受けて楽してしまいましょう。笑

最後まで読んでいただきありがとうございます!

あわせて読みたい