WordPressを導入するだけでもいろいろなコードを編集する機会があり、それらをブログで紹介する際にコピペだけでは味気ないので埋め込み方法を探してみました。
GitHubを使ってコードのページへのリンクを埋め込む方法などがありましたが、記事に直接記載されている方がそれっぽいので。
今回は『SyntaxHighlighter』というプラグインを使って実現したいと思います。
SyntaxHighlighterのインストール
「プラグイン」⇒「プラグインの追加」画面の右上のフォームに 『SyntaxHighlighter』と入力し、『SyntaxHighlighter Evolved』をインストールします。
「有効化」のクリックをお忘れなく。
遷移したプラグイン一覧画面から設定を行うことができますが、ここではとりあえずデフォルトで行きます。
ソースコード埋め込み方法
ソースコードを[(拡張子)]タグで囲むだけです。下図ではPHPのコードを表示しています。
（たまにpreタグが入り込むことがあります。preタグが入り込むとスクロールバーが2重に表示され、ソースコード以下スクロールバーが表示されてしまうのでご注意ください。）
適用した記事がこちらです（縦スクロールバー非表示）。
縦スクロールバーを非表示にする方法に関しては、下記をご参照ください。
SyntaxHighlighterを使ってソースコードを表示した場合に、縦スクロールバーが常に表示されてしまう場合の対処方法について解説します。
Gooogle Chrome でシンタックスハイライトされたところで横に垂直スクロールバーが必要もないのに表示…
他の方法
今回導入したプラグインの他にも様々な方法が紹介されていますので、気になる方は以下の記事をご参考ください。
こんにちは！ 今月から無職になり、ブログをひたすら書き続けているひでほいです。 今日は、WordPressでプラグインを使わずにソースコードをきれいに埋め込んで表示する方法をご紹介したいと思います。 ソースコードの埋め込みにプラグインを使わない理由 WordPressにソースコードを埋め込む場合、一般的にはプラグインが使われていることが多いです。 例をあげると、 Crayon Syntax Hig
これで今後プライベートで開発する際のコードも簡単に投稿できるようになりました。めでたしめでたし。
以上です。
スポンサーリンク
