WordPressでシンタックスハイライトを使う

HTMLやCSS、PHPなどのソースをブログで記述する際に、実際にHTMLタグや、PHPソースを記述してしまうと、ソースは表示されず、タグとして認識されソースが実行されてしまします。

<pre>タグを利用すればある程度表現できますが、限界があります。

そこで、ソースを文字列として認識させ、なお読みやすく表示してくれるプラグインを紹介。(wordPress用です)

SyntaxHighlighter Evolved

上記からダウンロードして

/wp-content/plugins/にアップロードします。

wordpressの管理画面のプラグインで有効化します。

新規投稿画面で以下のように記述してみます。


このように記述します。

[code language=”html”]
この中にソースをそのまま記述する
[/code]

※実際はダブルクォーテーションとスラッシュは半角です。

実際の表示はこうなります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  />
<title>HTML5 to CSS3 - CSS3で組んじゃいなっ。IEなんてどっかいっちまえ!</title>
<link rel="alternate" type="application/rss+xml" title="HTML5 to CSS3 RSS Feed" href="http://www.myu-zin.com/webridge/feed" /><link rel="pingback" href="http://www.myu-zin.com/webridge/xmlrpc.php" />
	<link rel="stylesheet" href="http://www.myu-zin.com/webridge/wp-content/themes/arjuna-x/style.css" type="text/css" media="screen" />
		<link rel='stylesheet' id='thickbox-css'  href='http://www.myu-zin.com/webridge/wp-includes/js/thickbox/thickbox.css?ver=20090514' type='text/css' media='all' />
<link rel='stylesheet' id='wpjp-popup-css'  href='http://www.myu-zin.com/webridge/wp-content/plugins/wp-jw-player/css/popup.css?ver=1.4' type='text/css' media='all' />
<script type='text/javascript' src='http://www.myu-zin.com/webridge/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='http://www.myu-zin.com/webridge/wp-content/plugins/wp-jw-player/js/popup.js?ver=1.4'></script>
<script type='text/javascript' src='http://www.myu-zin.com/webridge/wp-content/plugins/wp-jw-player/js/swfobject.js?ver=1.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.myu-zin.com/webridge/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.myu-zin.com/webridge/wp-includes/wlwmanifest.xml" />
<link rel='index' title='HTML5 to CSS3' href='http://www.myu-zin.com/webcss' />
<meta name="generator" content="WordPress 3.0.1" />
	<script type="text/javascript" src="http://www.myu-zin.com/webridge/wp-content/themes/arjuna-x/default.js"></script>
	<!--[if lte IE 7]><link rel="stylesheet" href="http://www.myu-zin.com/webridge/wp-content/themes/arjuna-x/ie7.css" type="text/css" media="screen" /><![endif]-->
	<!--[if lte IE 6]>
	<link rel="stylesheet" href="http://www.myu-zin.com/webridge/wp-content/themes/arjuna-x/ie6.css" type="text/css" media="screen" />
	<script type="text/javascript" src="http://www.myu-zin.com/webridge/wp-content/themes/arjuna-x/ie6.js"></script>
	<![endif]-->