WordPressにソースコードを表示させたいなら「 SyntaxHighlighter Evolved」

WordPressにソースコードを表示させたいなら「SyntaxHighlighter Evolved」

SyntaxHighlighter Evolved を使えばWordPressにソースコードが表示できる

「SyntaxHighlighter Evolved」はブログでhtmlやCSS等のコードを紹介したい時に使えるプラグインです。

設定方法

インストール

WordPressのプラグイン>新規追加で「 SyntaxHighlighter Evolved 」を入れて検索すると出てきますので
「いますぐインストール」をクリックしてインストール、有効化してください。

SyntaxHighlighter新規追加画面

表示させたいソースコードをショートコードで囲むだけ

[code lang="js"]ここにソースコードを入れます。[/code]
[html]ここにソースコードを入れます。[/html]

htmlやcssのように言語をタグとして入れることも可能です。

ハイライト表示をしたい行がある場合は
html highlight=”7″のように行番号を指定すればできます。

使えるタグ等は設定画面を見ると載っています。

実際の表示

<h2>WordPrdssにソースコードを表示させたい</h2>

<p>ショートコードでソースを囲むだけで表示できます。</p>

<p>設定画面も日本語なのでわかりやすいです。</p>

<p>ハイライトを入れることもできます。</p>

設定画面

日本語なのでわかりやすいです。

設定画面
デフォルトは白背景ですが、テーマから様々な背景に変更できます。