WordPressでソースコードを綺麗に表示するプラグイン「SyntaxHighlighter Evolved」

WordPressで記事を書く時に便利なプラグインのご紹介です。

htmlやcss、プログラミングの解説記事を書く時に、記事内にソースコードで表示した方がわかりやすいですよね。

でもそのままコードを入力しても、タグまでは表示されません。そんな時にはこのプラグイン「SyntaxHighlighter Evolved」が便利で綺麗にソースコードを表示できます。

 

「SyntaxHighlighter Evolved」の導入

WordPressのプラグイン管理画面で「新規追加」をクリックして「SyntaxHighlighter Evolved」を検索します。

インストールしたら有効化しておきましょう。

対応しているコードは以下のものです。

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

 

使い方

使い方はものすごく簡単です。表示したい言語のタグで囲うだけ!

以下のように記述すると、

[html]
<p>ワードプレスプラグイン</p>
<p>SyntaxHighlighter Evolvedの使い方</p>
[/html]

 

こんな感じで表示してくれます。

<p>ワードプレスプラグイン</p>
<p>SyntaxHighlighter Evolvedの使い方</p>

 

ハイライトの付け方

コードの中で強調したい部分にハイライトをかけることができます。

[html highlight=”2,6″]

このように記述すると、2行目と6行目にハイライトがかかります。

<p>1行目の文章</p>
<p>2行目の文章</p>
<p>3行目の文章</p>
<p>4行目の文章</p>
<p>5行目の文章</p>
<p>6行目の文章</p>
<p>7行目の文章</p>

 

開始行番号の指定

左側にある行番号の開始値を指定するには以下のように記述してください。

[html firstline=”26″]

<p>1行目の文章</p>
<p>2行目の文章</p>
<p>3行目の文章</p>
<p>4行目の文章</p>
<p>5行目の文章</p>
<p>6行目の文章</p>
<p>7行目の文章</p> 

 

この他にも管理画面から色々設定を変更できます。

  • 行番号の表示
  • ツールバーの表示
  • 自動リンクの有効
  • 表示モードの変更
  • 長い行を折り返す
  • コードボックスの表示を閉じる

後はブログに合わせた見やすい表示にできる、「テーマの変更」ができます。

デフォルト以外にも7種類ほどあるので、ブログにあった見え方になるように変えて見てくださいね。

 

設置後のチェック

注意点というかこの記事を書いていて感じたんですが、コードを書いた後は一度プレビューで確認する事をお勧めします。

WordPressのテーマのCSSでなるのか、投稿エディタのせいなのか、行間に勝手にあいだが空いてしまったり、コードボックスが表示していなかったりします。

1行追加されると行番号もずれますので、記事を更新したり書き直した後はプレビューで見てから公開なり更新した方が良いかもしれません。

関連記事

  1. WordPressでキレイにテーブル表示するプラグイン「TablePress」

  2. WordPressテーマTCD013でプロフィールをGravatarに登録して表示しよう

  3. 一気に100記事も夢じゃない!記事作成がはかどるサイト設計図の作り方

  4. 豊富な情報量の発信とデザイン性を兼ね備えたWordPressテーマ「Gorgeous(TCD013)…

  5. 無料で高画質素材をfotoliaから手に入れる方法!

  6. 記事作成の効率up!WPの記事を複製して簡単に新規投稿できるDuplicate Postプラグイン

  7. エックスサーバーでワードプレスサイトを無料独自SSL化する方法

  8. ブログの読みやすさに目次はどんな効果があるのか考えてみた

  9. 記事を書きづつけるモチベーションアップに!アクセスが一目でわかるプラグイン「WP SlimStat」…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

転職テクニック

  1. 内定が3ヶ月から1ヶ月に短縮 転職エージェントを使うほど仕事探しが格段にラクにな…
  2. 転職エージェント「サポタント・ワークポート・パソナテック」の登録から面接までの流…
  3. アラフォーの私が実際に内定を取るまでに使った転職エージェント7選
  4. アラフォー男が内定を勝ち取れた 転職エージェントを使うメリット
  5. アラフォーが内定を勝ち取った面接テクニック 簡単だけど難しい?笑顔の効果
  6. アラフォーが内定取るまでにかかった時間 後から焦らない為にご注意を!
  7. アラフォーで内定を取って気付いた転職活動で大事な事
  8. 心と体のズレが出てくる一週間。理想の生活習慣について考える 活動記録 其の3
  9. まずは転職に向けて派遣登録申し込みと情報収集 活動記録 其の2
  10. アラフォーで転職せざるを得なくなった男の活動記録 其の1

人気記事ランキング

PSテクニック

オススメテクニック

PAGE TOP