2014.06.13

[WordPress]ソースコードを表示するプラグイン、シンタックス・ハイライター

  • WordPress

こんにちわ、お菓子が美味しいです。須藤です。

WordPressで記事を投稿するときに、ソースコードを載せたい場合に
使うプラグインを紹介します。

WordPress管理画面 > プラグイン > 新規追加 >「SyntaxHighlighter Evolved」で検索し、インストール。

プラグイン > SyntaxHighlighter

管理画面からデフォルトの設定やテーマ(色)を変えたりすることができます。
スクリーンショット 2014-05-27 17.18.57

テーマは

Defult
スクリーンショット 2014-05-27 17.24.39

Django
スクリーンショット 2014-05-27 17.24.52

Eclipse
スクリーンショット 2014-05-27 17.25.00

Emacs
スクリーンショット 2014-05-27 17.25.22

Fade to Grey
スクリーンショット 2014-05-27 17.25.49

Midnight
スクリーンショット 2014-05-27 17.25.58

RDark
スクリーンショット 2014-05-27 17.26.11

から選ぶ事が出来ます。

投稿画面からソースコードを載せたいときの基本は

[html]
ここにソースコードを記述
[/html]
※[]は半角

使いそうなオプションを一部紹介!

リンクを無効にする
[html autolinks=”false”]
※"は半角

[html autolinks="false"]

<meta charset="UTF-8" />
title
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[/html]

行を非表示にする [html gutter=”false”]

[html gutter="false"]<meta charset="UTF-8" />サイトのタイトル<meta charset="UTF-8" />title
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[/html]

開始行:firsrlineとハイライト(強調):highlightの行を指定する
[html firstline=”3” highlight=”5, 6, 7”]
ハイライト(強調)は複数行指定することが出来ます。

[html firstline="3" highlight="5, 6, 7"]

<meta charset="UTF-8" />

<meta charset="UTF-8" />
title
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[/html]

折り畳む [html html collapse=”true”]

[html collapse="true" language="html"]<meta charset="UTF-8" /><meta charset="UTF-8" />title
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

[/html]

[html]ではなく[php]に変えればphpとして表示出来ます。
他にもjavascriptなら[js]、action scriptなら[as3」等様々な言語を記述する事が出来ます。
手軽にソースコードをサイトに載せることが出来るので、おすすめです。
他にも設定出来ることがありますので詳しくはプラグインの公式サイトをご覧ください。

キャベツ太郎!じゃがりこ!