電電高専生日記

syntaxhighlighterをFC2ブログへ導入する

2014/07/04 16:59

syntaxhighlighterとは、WEBサイト上でプログラムのソースコードを掲載する時に用いるライブラリです。自動でソースコードを色装飾などをしてくれて、非常に読みやすくなります。数多くのプログラム言語に対応しています。

で、実際に試してみると、こんな感じ↓になります。

(function(){
    console.log("HELLO WORLD");
})();

導入の手順をささっと書いてみます。

まず、syntaxhighlighterの公式サイトに行きます。右サイドバーにある「download」をクリックします。「Click here to download」とあるリンクをクリックすれば、最新バージョンのソースファイルがzipでダウンロードされます。

次に、ダウンロードしたzipファイルを解凍し、必要なファイルをFC2ブログの「ファイルアップロード」でアップロードします。最低限必要になるファイルは、shCore.js、shBrushCss.js、shCore.css、shThemeDefault.css、clipboard.swfです。プラス、自分が掲載するであろうプログラム言語の名前が含まれているファイルをアップロードしましょう。

アップロードが終わったら、ブログテンプレートの変更です。ページのヘッダ部に、外部スクリプト・スタイルファイルの記述をします。ファイル「clipboard.swf」以外は全て記述しましょう。

さらに、ヘッダ部に以下の記述を書きましょう。


これで下準備は全て終了。

使い方を説明します。まずpreタグを作り、クラスに"brush:プログラム言語"を指定します。そしてpreタグの中に掲載するソースを入れるだけ。javascriptの場合、こんな感じ↓に書きます。

ソースコード

以上。
ファイルをアップロードするのが少し面倒ですね。

  • このエントリーをはてなブックマークに追加

最新記事

コメント(0)





プロフィール

名前:elkosendiary

性別:男

生年:1995年


2011年4月 高専入学
2016年3月 高専卒業
2016年4月 大学編入学
2018年3月 大学卒業予定

にほんブログ村 大学生日記ブログ 理系大学生へ
にほんブログ村

カテゴリ
Adsense
月別アーカイブ
ブログ内検索

おすすめ記事

「高専大学編入ログ」を作成しました

自作ゲーム「Defend PortMoresby!」バージョン3

【改良版】 RaspberryPiで作ったカメラ付き戦車ラジコン