SE&ビジネスパーソンとしてお勉強中なブログ

スポンサーサイト

--/--/-- -- [Edit]

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

FC2ブログでSyntaxHighlighter

2008/04/05 Sat [Edit]

目標:FC2ブログでSyntaxHighlighterを使って見る

ソースコードを綺麗に表示しているページ多いですよね。
コメントとかキーワードの色を変えてあったり、行番号がついていたり。
自分のブログでもできないかなぁと思って、ちょっと調べてみました。
あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net
結構前から色々あったんですね。。
知りませんでした^^;


ってことで、これ↓にしてみました。
syntaxhighlighter - Google Code
javascriptとCSSで実装されているようです。

以下、導入メモ


2009/11/11追記
以下の例は、追記部分で使用する場合に限るので注意してください。
「3.テンプレートの修正の(2)javascript追加」の部分ですね。
本文なんかで使用したい場合は、body閉じタグの上など適切な場所に追加してやってください。


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は、ファイル一覧で表示リンクから分かります。
 例)SyntaxHighlighter.css
 http://blog-imgs-21.fc2.com/g/r/e/greenonions/SyntaxHighlighter.css

3.テンプレート修正

(1)CSSリンク追加
 <head></head>の中に以下を追加


(2)javascript追加
 <%topentry_more>の下に以下を追加


必要に応じてjsファイルの指定を追加。


4.ソースの記述方法

表示したいソースは<textarea>内に書きます。





ソースの種類によってclassの指定を変えます。
参考:Languages - syntaxhighlighter - Google Code

Language Aliases
C++ cpp, c, c++
C# c#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt




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


Prev
英語
Top
SE&ビジネスパーソンとしてお勉強中なブログ
Next
PEAR MDB2パッケージを使ってFetch [PHP][Linux]

Comments

Re: FC2ブログでSyntaxHighlighter

以前、こいつをFC2で使おうと思ってほかのサイトさんで紹介されてた通りにやってみたんですが、JVSエラーがなぜか発生してしまって結局導入できませんでした。
しかしここで紹介されている通りにやってみたらうまくいきました。
紹介、ありがとうございました。

私の場合は動きませんでしたね。。
同じようにやったのですが、バージョンも同じですが、
悔しいです。。

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

SyntaxHighlighter を利用してWebページ上のソースコードを飾る

ども、ご無沙汰してます。スィンです。 10時ぐらいに寝ようと布団に入ったのですが、咳が出だして寝付けず。 せっかくなので、以前から導...

FC2ブログに SyntaxHighlighter を導入

FC2ブログに引っ越す動機になったのがこの syntaxhighlighter を使いたいと言うことでした。で、さっそく導入したのですが、導入にあたって参考に...

ソースコードを表示するjavascript

かなり便利そうなSyntaxHighlighterをオニオンソード!!さんのFC2ブログでSyntaxHighlighterを参考に導入してみた なんのトラブルも無くすんなり完了したっ...

ソースコードを美しく見せるJS「SyntaxHighlighter」をFC2ブログに入れてみた

ソースコードをWEB上で公開したい時などに役立つJS「SyntaxHighlighter」をこのブログにも入れてみたんですが、FC2ブログ用に備忘録として残してお...

FC2ブログでSyntaxHighlighter

以下のサイトが大変参考になる。 FC2ブログでSyntaxHighlighter ただ、アップロードしたHTMLのテンプレートにコピーする際には、アップロード先...

SyntaxHihglighterをFC2に導入

FC2にSyntaxHihglighterを導入してコードをきれいに表示させる方法を紹介します。

Top
SE&ビジネスパーソンとしてお勉強中なブログ

ブログ内検索

カテゴリー

最近の記事

最近のコメント

最近のトラックバック

RSSリンク

Amazon

楽天 人気商品

なかのひと

iKnow

Dictationバッジ

合わせて

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