スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2 にSyntax Highlighter 2.1を入れてみた

さて、プログラミングをメインにするブログを書こう! と思い立ったはいいけれど、かっこよくコードを表示したい!って思ったわけです。

その前に、かっこいいコードを書けよってのもあるんだろうけれど、見やすくする方法を調べてたら、「SyntaxHighlighter」ってのがあるらしい。

http://alexgorbatchev.com/wiki/SyntaxHighlighter

で、これの最新版を落としてきて、FC2に設定するやり方なんだけれど、作業は大きく分けて以下の三つ。
1. JSやCSSのファイルを環境に合わせて簡単に修正する。
2. もろもろファイルをアップロードする(これが結構面倒)
3. テンプレートを修正する。

1. ファイルの修正

ダウンロードしてきたzipを解凍すると、styleとscriptsというディレクトリができる。
style/shCore.css を修正する

background-image: url(magnifier.png) !important;
 ↓
background-image: url(http://blog-imgs-38.fc2.com/t/a/k/takaakl/magnifier.png) !important;

というように、背景画像をフルパスで指定する"http://blog-imgs-38.fc2.com/t/a/k/takaakl/"はここの環境なので、適切に書き換える。

2. ファイルのアップロード

絶対に必要になるのが、以下のファイル

 scripts/shCore.js
 scripts/shBurshXXX.js (必要な言語を選んであげればOK。後から追加するのが嫌なので、全部アップした)
 style/shCore.css
 style/shThemaXXX.css (どれかひとつでOK。ここではshThemaDjango.cssを使用している)

ほかにも、いろいろ入れていいんだけれど、面倒だたら全部あげてしまう!。多分5分もかからない。

3. テンプレートの更新

左のメニューから「テンプレートの設定」を選んで、 </head>タグの前くらいに以下を挿入。
	<script type="text/javascript" src="up_path/shCore.js"></script>
	<script type="text/javascript" src="up_path/shBrushBash.js"></script>
	<script type="text/javascript" src="up_path/shBrushCpp.js"></script>
	<script type="text/javascript" src="up_path/shBrushCSharp.js"></script>
	<script type="text/javascript" src="up_path/shBrushCss.js"></script>
	<script type="text/javascript" src="up_path/shBrushDelphi.js"></script>
	<script type="text/javascript" src="up_path/shBrushDiff.js"></script>
	<script type="text/javascript" src="up_path/shBrushGroovy.js"></script>
	<script type="text/javascript" src="up_path/shBrushJava.js"></script>
	<script type="text/javascript" src="up_path/shBrushJScript.js"></script>
	<script type="text/javascript" src="up_path/shBrushPhp.js"></script>
	<script type="text/javascript" src="up_path/shBrushPlain.js"></script>
	<script type="text/javascript" src="up_path/shBrushPython.js"></script>
	<script type="text/javascript" src="up_path/shBrushRuby.js"></script>
	<script type="text/javascript" src="up_path/shBrushScala.js"></script>
	<script type="text/javascript" src="up_path/shBrushSql.js"></script>
	<script type="text/javascript" src="up_path/shBrushVb.js"></script>
	<script type="text/javascript" src="up_path/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="up_path/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="up_path/shThemeDjango.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'up_path/clipboard.swf';
		SyntaxHighlighter.all();
	</script>

「up_path」は自分のファイルのディレクトリに適切に書き換えること
あとは書くだけ、
<pre class="brush: scala;">
object Main
{
  def main( args: Array[String] ) {
    println( "ほげほげ" )
  }
}
</pre>
一度、<,>などを直接かいて、後から置換するといい。置換するのは
< → &lt;
> → &gt;
"e; → &quote;
の三つ。
上の例を書くと、次のようになる。すげぇ
object Main
{
  def main( args: Array[String] ) {
    println( "ほげほげ" )
  }
}

わりと満足。明日からはコードをのせていけたらいいなぁ・・・
簡単なサンプルを作ってみた
スポンサーサイト

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

プロフィール

takakino

Author:takakino
長いことPHPとかJavaとか、その昔はPerlとか。Webのシステム屋をずーっとやってきました。
最近Scalaにはまっています。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
Yii (5)
カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Twitter
Twitterこそこそやってます
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。