スポンサーサイト

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

ソースコードをきれい表示する

ソースコードをきれいに表示できないかとおもい、調べてみました。

以下を使用
SyntaxHighlighter:http://code.google.com/p/syntaxhighlighter/

1.syntaxhighlighterをダウンロード→解凍
http://code.google.com/p/syntaxhighlighter/downloads/list からSyntaxHighlighter_1.5.1.rarをDLして解凍。

2.javascriptとCSSファイルをアップロード
解凍したフォルダ「Scripts」のjavascriptと「Styles」のcssファイルをアップロード。 FC2 BLOG 管理画面の「ツール」→「ファイルアップロード」→「ファイル管理画面」からアップロード。
アップロードされたURLは、ファイル一覧で表示リンクから分かります。
"file" = 各種ファイルの格納先URL

3.テンプレート修正
(1)CSSリンク追加 headタグの中に以下を追加

(2)javascript追加
headタグの中に以下を追加

4.ソースの記述方法
表示したいソースはtextareaタグ内に書きます。    ↓ ソースの種類によってclassの指定を変えます。
参考:Languages - syntaxhighlighter
http://code.google.com/p/syntaxhighlighter/wiki/Languages

5.改行の扱い
「HTMLタグのみ」を選択します。

なぜかIEだと行番号が出ない・・・・顔文字1(背景黒用)

参考サイト
目標:FC2ブログでSyntaxHighlighterを使って見る
http://greenonions.blog5.fc2.com/blog-entry-63.html
あなたのソースコードを彩る、Syntax Highlighterまとめ
http://blog.37to.net/2007/06/syntax_highlighter/
スポンサーサイト

テーマ : ひとりごとのようなもの - ジャンル : 日記

コメント

コメントの投稿

管理者にだけ表示を許可する

トラックバック


この記事にトラックバックする(FC2ブログユーザー) URL

プロフィール

ogatomi

Author:ogatomi
部署移動に伴い、SE8年目にしてホストマシーンからオープン系システムの転身。
一からの勉強しなおしの記録を出来る範囲でブログにつづりたいと思います。

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
全記事表示リンク

全ての記事を表示する

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