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

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

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

ダウンロード

まずは「SyntaxHighlighter」をダウンロードします。

Download

解凍すると以下の構成になっているので、「Styles」フォルダの「SyntaxHighlighter.css」と「Scripts」フォルダから「shCore」(←必須)とあとは主要な4ファイル(shBrushXml,shBrushCss,shBrushJScript,shBrushPhp)をアップロードしておきます。

  • Scripts(shCore,shBrushXml,shBrushCss,shBrushJScript,shBrushPhp)
  • Styles(SyntaxHighlighter.css)
  • Uncompressed

設定

以下のコードをhead内に記述。SyntaxHighlighter.cssをアップロードしたURLに書き換えてくださいね。

次にbodyタグの上あたりに以下のコードを記述。パスは必要に応じて変更してください。

これで設定完了です。

使用方法

使用する時は、textarea内に表示したいソースコードを記入します。

クラス名は、表示するコードのタイプに応じて適宜変更してください。

  • 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)

【参考にした記事】

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

ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」

関連記事

RSSフィード twitter Google Bookmarks ソースコードを美しく見せるJS「SyntaxHighlighter」をFC2ブログに入れてみたをはてなブックマークに登録 はてなブックマーク
コメント一覧
コメントを残す


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

トラックバック


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

2010/08/18 | Webデザイナーのメモ帳 |

SyntaxHihglighterをFC2に導入

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

2011/03/20 | 日々是憂鬱 |

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

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

2011/12/18 | つーる亭 |

【備忘録】FC2ブログでまず最初にやるカスタマイズ + FC2ブログでよく使う変数

FC2ブログは個人的によく使うので、新しいブログを立ち上げる時にメモ代わりになるように、比較的よく使うカスタマイズの方法を備忘録的に書き残しておこうと思います。

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

タグクラウド