• 2011年03月06日
  • ユーティリティ
  • SyntaxHighlighter
<pre>で囲む時に綺麗にレイアウトしてくれるプラグインsyntaxhighlighter。ソースコードを載せるサイトの心強い味方。

【参考サイト】
Seesaaブログにsyntaxhighlighterを適用する。(ver 3.0.83)
(しがないプログラマの備考録。)
seesaaブログでPHPとかのソーススクリプトを表示する方法
(ないなら作ればいいじゃんw:広く浅いヒホBlog)
1.まずはここからsyntaxhighlighter(3.0.83)をダウンロードし解凍。
2.seesaaのファイルマネージャへscriptsとstyles内のファイルをアップロードする。
(shBrushXXX.jsファイルは自分の利用するもだけでOK)
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shCore.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushBash.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushCss.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushDiff.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushJava.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushJScript.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushPhp.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushPlain.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushSql.js"></script>
<script type="text/javascript" src="http://●●●.up.seesaa.net/image/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://●●●.up.seesaa.net/image/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://●●●.up.seesaa.net/image/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
3.上記のコードをhtmlのhead内に記述。
(seesaaブログなら●部分を自分のものに、一応ほかの部分もURLに違いがないか確認してください。他のブログでもファイルをアップデートしたURLを入れれば大丈夫。)
4.記事でコードを以下の用に書く
<pre class="brush: 使うソース">
〜書きたいこと〜
</pre>
ソースの種類

* XMLコードの場合、class="xml"
* Phpコードの場合、class="php"
* CSSコードの場合、class="css"
* JavaScriptコードの場合、class="js"
* Rubyコードの場合、class="ruby"
* SQLコードの場合、class="sql"
* Visual Basicコードの場合、class="vb"
* Javaコードの場合、class="java"
* pythonコードの場合、class="python"
* C#コードの場合、class="c#"
* C++コードの場合、class="c"
* Delphiコードの場合、class="delphi"

ちなみに<pre>の中であってもソースが利いてしまう場合があるので特殊文字化はしておいたほうがいい。ウェブライフハックさんのタグメーカーを使えば楽に特殊文字化してくれる。
プログラムソースを表示するpreタグ・メーカー
(ウェブライフハック)
スポンサードリンク
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/189224565

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。