You are here
Home > WEB制作 > WordPress > ワードプレスで投稿内のソースコードを見やすく表示させるには

ワードプレスで投稿内のソースコードを見やすく表示させるには

ソースコード 画像

ワードプレスで紹介記事を投稿する場合に、「ソースコードを書きたいな」と思うことがあります。

色々なサイト様で掲載されているような、「コピー&ペースト」が可能なソースコードはどうやって書かれているのでしょうか。

今回はワードプレスでそんな「ソースコードを綺麗に投稿できるプラグイン」をご紹介します。

SPONSERD LINK

※プラグインの追加方法がわからない方は、以前紹介したこちらをご参考下さい。

ワードプレスでプラグインを使うには

ソースコードを表示させるプラグイン

Crayon Syntax Highlighter

Crayon-Syntax-Highlighter LOGO

ダッシュボードから「プラグイン>新規追加」画面へ。

「Crayon Syntax Highlighter」と検索し、「今すぐインストール」をクリックし、有効化します。

Crayon-Syntax-Highlighter インストール

 

有効化すると投稿画面に「<>」アイコンが追加されます。

Crayon-Syntax-Highlighter アイコン

 

クリックすると、コード記入画面がポップアップされます。

「コード」欄にコードを書いて、「挿入」をクリックすれば終了です。

Crayon-Syntax-Highlighter コード入力画面

「プログラム言語」ではXHTMLやCSSはもちろん、PHPやJAVAなどにも対応しているみたい。

「Crayon Syntax Highlighter」」には様々な設定項目がありますが、詳しくは後日ご紹介します。

 

SyntaxHighlighter Evolved

ダッシュボードから「プラグイン>新規追加」画面へ。

「SyntaxHighlighter Evolved」と検索し、「今すぐインストール」をクリックし、有効化します。

SyntaxHighlighter-Evolved インストール

こちらは有効化しても「Crayon Syntax Highlighter」と違い、投稿画面には何も追加されません。

初期設定の書き方は以下の通りです。

 

[html]
ソースコード
[/html]

 

CSSなら[css]、JavaScriptなら[js]、PHPなら[php]、SQLなら[sql]で各コードを囲うだけでOK。

 

詳細な設定はダッシュボードから「設定>Syntax Highlighter」画面で確認できます。

SyntaxHighlighter-Evolved2

「Syntax Highlighter」画面一番下にある「ショートコードパラメータ」に「引数指定の例」を参考にして見てください。

いかがでしたでしょうか。

WPで投稿したソースコードを見やすく表示させるまとめ

  • 「Crayon Syntax Highlighter」と「SyntaxHighlighter Evolved」プラグインを使用するのがおすすめ
  • 「Crayon Syntax Highlighter」は別窓にソースコードを書くタイプ
  • 「SyntaxHighlighter Evolved」はソースコードをタグで囲うタイプ
0
Pocket

SPONSERD LINK

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Top