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

記事が気に入ったら
テクログを "いいね!"
Facebookで更新情報をお届け。

Tech Log | テクログ

関連記事

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

  2. WordPressテーマを変えたらまずはやっておきたい、IZM(TCD034)での子テーマの作り方

  3. WordPressテーマGorgeous(TCD013)に新機能が追加された時のアップグレード方法(…

  4. 【TablePressの使い方】表を装飾してキレイに見せよう。

  5. 個性的で統一感もあるブログにレベルアップ!アイキャッチ画像の選び方

  6. WordPress4.6-ja プラグインの新規登録方法

  7. 圧倒的なビジュアル力でセルフブランディングができるブログが作れるWordPressテーマ「IZM」

  8. WordPressテーマを作ってみた(ダウンロード有)

  9. WordPressテーマGorgeous(TCD013)で子テーマを作って見出しを装飾しよう

コメント

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

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

転職テクニック

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

人気記事ランキング

PSテクニック

オススメテクニック

PAGE TOP