MAXI design Blog

Webデザイン・Wordpress・SEO・ブログなど、収入とアクセスを改善させるノウハウ集!

ワードプレス

ワードプレス プラグイン SyntaxHighlighter Evolved

このプラグインを使うとソースをそのまま表示できる。
インストールと設定方法を紹介する。

WordPress

WordPressでブログを書いている時に、
「このソースを書き加えればいいですよ」と掲載したい場合がある。
このソース部分をそのまま書いてしまうとブラウザーはそのまま忠実にプログラムだと思ってその部分を実行してしまう。

つまりプログラムが動いた結果だけがブラウザーに表示される。
これでは解決方法のブログにならないので、
プログラムを記述した状態で掲載しなければならない。

これは良く他のブログで見かけるので
きっと良いプラグインがあるのだな〜と気楽に考えていた。
実際に自分のブログでもプログラム部分を掲載する機会があったので
プラグインを探してみると予想通りあっさりと見つかった。

「SyntaxHighlighter Evolved」

これがブログなどでよく見るソース表示用のプラグインだ。
では設定方法を見て行こう。

SyntaxHighlighter Evolved 設定方法

  1. 「SyntaxHighlighter Evolved」をインストールし有効化
  2. 左メニューの「設定」から「SyntaxHighlighter」を選択
  3. 下のプレビューを見ながら「テーマ」を選択
  4. 「変更を保存」をクリック

WordPress プラグイン SyntaxHighlighter Evolved 設定画面

そのままでもすぐに使用可能だが、テーマは「Django」を選んでみた。
私のブログの背景色が白なので、白背景のテーマ「Default」ではなく、
黒背景の「Django」の方が見やすいからだ。

後はブログのソース掲載部分に半角でタグを書けばいい。
[※] ここにソース [/※]

※の部分にHTMLなら html
CSSなら css と書くだけでソースがそのまま表示される。

[html]<div class="div_01">サンプルのソース</div>[/html]

ソース部分はコピー&ペーストも可能なので
ソース掲載にはとても便利なプラグインだ。
ビシビシ活用して自分のブログサイトを充実させよう!

-ワードプレス
-

Copyright© MAXI design Blog , 2019 All Rights Reserved.