<< PHPの技術ブログを始めました。 | main | RSS情報をsimplexml_load_fileで読み込んでみる >>

JUGEMブログでSyntaxHighlighterを使う

2013.06.02 Sunday | by こも
ソースコードを読みやすく装飾してくれるSyntaxHighlighterというスクリプトをJUGEMブログで使ってみました。

こんな感じです。

public function getDisplayInfo() {
	foreach($this->list as $info){
		if($info->no == $this->dispIndex){
			echo "hello world!!";
			return($info);
		}
	}
}



導入方法

1.SyntaxHighlighterをダウンロードする。

こちらからSyntaxHighlighterをダウンロードします。


2.必要なファイルを設置する

ダウンロードしてきたものを解凍し、PHPの表示に必要なファイルを自分のサーバに設置します。

js/shCore.js
js/shBrushPhp.js
css/shCoreDefault.css


JUGEMブログは、画像以外のファイルをブログサーバにアップロードできないみたいなので、自分のサーバにファイルを置く形にします。


3.JUGEMブログのHTMLを変更する

管理画面の「デザイン」メニューの「HTML・CSS編集」を選びます。

そして、「HTML編集フォーム」の編集エリアで</head>の手前にリンクするパスとJavaScriptの実行コードを追加します。








yoursite.net」の部分は、「2.」でファイルを置いた自分のサーバーのアドレスになります。


4.ブログに記述する

 
	echo "hello world!!";

こんな感じでPHPのコードを装飾します。
ちなみにPREタグの「"brush: php;"」はPHPのコードとして装飾しますという意味のようです。

ここを書き換えると、PHP以外にもCSSやJavaScript用にも転用できます。
(ただしその場合、shBrushCss.jsやshBrushJScript.jsなどの追加設定も必要)

Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM