レンタルサーバー比較メモ

レンタルサーバーメモブログ

 

「SyntaxHighlighter Evolved」でコードソースを表示させる。

   

WordPressでPHPスクリプトなどのコードソースを表示されるプラグインを探してみたところ「SyntaxHighlighter Evolved」が有名らしいので早速インストールしてみました。

SyntaxHighlighter Evolvedのインストール方法

管理画面のプラグインの新規追加から「SyntaxHighlighter Evolved」を検索するといくつかのプラグインが表示されるので「SyntaxHighlighter Evolved」を探してから「いますぐインスートール」をクリックします。

その後でSyntaxHighlighter Evolvedプラグインを有効化するとインストールが完了して利用可能になります。

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のulタグやliタグを表示させたい場合には、

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

という感じで表示されます。

SyntaxHighlighter Evolvedでハイライト

SyntaxHighlighter Evolvedでコードソースをハイライトさせる場合には、
[開始タグ highlight=”4,7″]の様にに記述すればOKです。

ハイライトの例

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

開始番号を指定できる

1行目から表示するのではなく、指定した行からの表示も可能です。
例えば3行目から表示したい場合には、
[開始タグ firstline=”3″]のように記述します。

指定した行から表示させる例

<ul>
<li>これが</li>
<li>表示させたい</li>
<li>タグですよん。</li>
<li>あとは</li>
<li>お好みで</li>
<li>いろいろと</li>
<li>変化させられるみたいです。</li>
</ul>

SyntaxHighlighter Evolvedはテーマも豊富に用意されているのでお気に入りを見つけることで個性的にコードソースを表示させることができます。

コードソースを表示させるプラグインに迷ったら「SyntaxHighlighter Evolved」にしておけばOKでしょう。(^ ^)

 - WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
パーマリンクが編集できない!

新しいブログを作る為にWordPressをインストールしたのですが、パーマリンク …

no image
特定のカテゴリーを削除!

WordPressで特定のカテゴリーを指定して削除したいと思ったのでメモっておき …

no image
プラグインをインストール後に管理画面に移動できない!

WordPressにプラグインをインストールした後に管理画面に移動できないという …

no image
子テーマのCSSが反映されない!

オリジナルのテーマを編集しないでデザインやレイアウトを変更できるWordPres …

no image
特定のカテゴリーの時にだけ表示させる!

WordPressの特定のカテゴリーの記事一覧で表示させたい文字列があったので「 …

no image
stinger7でFatal error: Call to undefined function

WordPressのテーマをstinger7に変更したところ「Fatal err …

no image
カスタム投稿でカテゴリーを取得する!

WordPressのカスタム投稿タイプでカテゴリを取得しようとしたところ「the …

no image
WordPressのSimplePieで取得できるタイトルを変更。

WordPressに同梱されているSimplePieで取得できるタイトルの部分を …

no image
カスタム投稿で投稿の情報を取得する!

カスタム投稿タイプで投稿が持っているいろいろな情報を取得したかったのでメモってお …

no image
wordpressで記事編集リンクを付ける方法

wordpressで利用するテーマによっては、記事を編集するためのリンクが記述さ …