WordPressを導入するだけでもいろいろなコードを編集する機会があり、それらをブログで紹介する際にコピペだけでは味気ないので埋め込み方法を探してみました。

GitHubを使ってコードのページへのリンクを埋め込む方法などがありましたが、記事に直接記載されている方がそれっぽいので。

今回は『SyntaxHighlighter』というプラグインを使って実現したいと思います。

SyntaxHighlighterのインストール

 「プラグイン」⇒「プラグインの追加」画面の右上のフォームに 『SyntaxHighlighter』と入力し、『SyntaxHighlighter Evolved』をインストールします。

「有効化」のクリックをお忘れなく。

遷移したプラグイン一覧画面から設定を行うことができますが、ここではとりあえずデフォルトで行きます。

ソースコード埋め込み方法

ソースコードを[(拡張子)]タグで囲むだけです。下図ではPHPのコードを表示しています。

(たまにpreタグが入り込むことがあります。preタグが入り込むとスクロールバーが2重に表示され、ソースコード以下スクロールバーが表示されてしまうのでご注意ください。)

適用した記事がこちらです(縦スクロールバー非表示)。

縦スクロールバーを非表示にする方法に関しては、下記をご参照ください。

他の方法

今回導入したプラグインの他にも様々な方法が紹介されていますので、気になる方は以下の記事をご参考ください。

これで今後プライベートで開発する際のコードも簡単に投稿できるようになりました。めでたしめでたし。

以上です。

スポンサーリンク