ソースコードを記事に表示する「SyntaxHighlighter Evolved」

プラグイン

記事内に「CSS」「PHP」「html」などのソースコードを挿入したい場合、
普通に記載してしまうと、段落が無くなったり、
色分けされないため、綺麗に表示されません。

SyntaxHighlighter Evolved は、記事内にソースコードを挿入する際、
エディタのように綺麗にソースコードを表示できるプラグインです。

見やすい記事を作成するために、記事内にソースコードを入れる場合は
「SyntaxHighlighter Evolved」を利用しましょう。

ソースコードを表示するプラグインは、
SyntaxHighlighter Evolved の他に、Crayon Syntax Highlighter もあります。

WordPress 記事にソースコードを表示する Crayon Syntax Highlighter
ブログ記事内に ソースコード を表示したい場合、普通に記載すると、綺麗に表示されません。Crayon Syntax Highlighter は、ブログ記事内にソースコードを挿入した場合、綺麗に表示してくれるプラグインです。ソースコードを挿入する場合は、Crayon Syntax Highlighter を…
スポンサーリンク

SyntaxHighlighter Evolved のインストール

ダッシュボードから「プラグイン → 新規追加」をクリックし、
検索窓で「SyntaxHighlighter Evolved」と検索しましょう。

検索後、SyntaxHighlighter Evolved の今すぐインストールをクリック。

SyntaxHighlighter Evolved のインストール

インストール後「プラグインを有効化」をクリックすれば完了です。

SyntaxHighlighter Evolved の設定

ダッシュボードから「設定 → SyntaxHighlighter」をクリック。
設定はデフォルトで特に問題ありません。こだわる方は変更しましょう。

SyntaxHighlighter Evolved の設定

SyntaxHighlighter Evolved の設定

テーマの選択

自分の好きなテーマを選びましょう。
特にこだわらない方は、ブログイメージに合わせて変更しましょう。

Default

SyntaxHighlighter Evolved の設定

Djyango

SyntaxHighlighter Evolved の設定

Eclipse

SyntaxHighlighter Evolved の設定

Emacs

SyntaxHighlighter Evolved の設定

Fade to Grey

SyntaxHighlighter Evolved の設定

Midnight

SyntaxHighlighter Evolved の設定

RDark

SyntaxHighlighter Evolved の設定

ソースコード挿入方法

記事内にソースコードを挿入する場合は、
ソースコードの上に [○○] ソースコードの下に [/○○] を挿入します。

CSSコードなら ○○を css に。
PHPコードなら ○○を php に。
htmlコードなら ○○を html を上下に入れます。

[○○]を入れない場合↓のように表示されます。

#toc_container {
margin-left:auto;
margin-right:auto;
}

[〇〇]を入れた場合↓のように表示されます。
(↓の表示はこのブログのデフォルト)

#toc_container {
 margin-left:auto;
 margin-right:auto;
 }

まとめ

  • SyntaxHighlighter Evolved はソースコードを綺麗に挿入するプラグイン
  • テーマを選択し、設定はデフォルトでOK。
  • ソースコードを挿入する場合は、上に [○○] 下に [/○○] を入れる。

ソースコードを表示するプラグインは、
SyntaxHighlighter Evolved の他に、Crayon Syntax Highlighter もあります。

WordPress 記事にソースコードを表示する Crayon Syntax Highlighter
ブログ記事内に ソースコード を表示したい場合、普通に記載すると、綺麗に表示されません。Crayon Syntax Highlighter は、ブログ記事内にソースコードを挿入した場合、綺麗に表示してくれるプラグインです。ソースコードを挿入する場合は、Crayon Syntax Highlighter を…

コメント