Wordpress プラグイン

プログラムのコードを見やすく装飾してくれるWordPressプラグイン「SyntaxHighlighter」の使用方法


記事中のプログラムのコードを簡単に見やすく装飾してくれるWordPressプラグイン「SyntaxHighlighter」を紹介します。

インストール方法

通常のプラグインのインストール方法でOKです。

WordPress管理画面の「プラグイン」メニューから「新規追加」画面を開き、「SyntaxHighlighter Evolved」と入力します。

検索結果にSyntaxHighlighter Evolvedが表示されますので、「今すぐインストール」ボタンをクリック、インストールが終わり「有効化」ボタンに切り替わったら続いてクリックします。

設定方法

初期設定のままで、問題なく使用できますが、設定画面で「テーマ」を選ぶことができます。

「テーマ」の変更

設定」メニューからSyntaxHighlighterを選択し、設定画面を開きます。

例えば、「Default」のスタイルだと

Django」では

Eclipse」では

Emacs」では

Fade to Grey」では

Midnight」では

RDark」では

また、「なし」とすると、

のように表示されます。

使い方

装飾したいプログラムのコードを所定のタグで囲みます。
例えば、
[python highlight="1,5,10-12"]a = "Hello World!"
Print(a)[/python]

とすると、前項の例のように表示されます。

他にも、[php]~[/php]、[html]~[/html]、[plain]~[/plain]、[css]~[/css]、[javascript]~[/javascript]などが用意されています。
詳細は公式サイトでご確認ください。

その他オプション

highlight

[php highlight="1,5-7"]~[/php]
1行目、5~7行目をハイライト表示します。

title

[php title="ここにタイトルが入る"]~[/php]
コードの前にタイトルを表示します。

gutter

行番号をの表示・非表示を設定できます。
行番号はデフォルトでは表示されるようになっています。
非表示にする場合は、「gutter」を「false」を設定します。

[php gutter=false]~[/php]

ショートコードの詳細は設定画面ページの下の方に記載されています。

 

-Wordpress, プラグイン

Copyright© アフィリエイト&ウェブ制作のtips , 2019 All Rights Reserved.