FC2ブログ

Ctrl + Z

人生をUndoしよう

 
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
10


スポンサーサイト

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

FC2ブログにSyntaxHighlighterを導入する方法

ブログにソースコードを綺麗に表示するために、SyntaxHighlighterを組み入れたいと思います。

SyntaxHighlighterを使うと、こんな感じに表示されます。


def main():
#ファイルオープン
with open('test.txt', 'w') as fp: #fpにファイルオブジェクトが入る
fp.write('hello world\n') #ファイルに書き込み
fp.write('hello python') #ファイルに書き込み
with open('test.txt', 'r') as fp:
for line in fp: #ファイル読み込み
print(line)

if __name__ == '__main__':
main() 




実は、Py習(http://pyshu.blog111.fc2.com/)というPython勉強サイトを運営しており、ここにもSyntaxHighlighterを導入しており2回目なのですが、予定通り、ハマッったので備忘録も兼ねて、情報を残しておきたいと思います。

ココで使用するのは、SyntaxHighlighter ver.3系のセットアップ方法です。ver.2系では使用できない方法もありますのでご注意ください。


(0) 導入の流れ

SyntaxHighlighterは、JavaScriptとCSSファイルから成り立っています。
ファイルは無料で使用可能です。(寄付受付有り。LGPL, MITライセンス)

① SyntaxHighlighterのダウンロードする
② 使用ファイルの確認とカスタマイズ
③ ファイルをアップロードする
④ テンプレートを書き換える

の順序で作業を行います。







(1) SyntaxHighlighterのダウンロード

SyntaxHighlighterは、
http://alexgorbatchev.com/SyntaxHighlighter/download/
からダウンロードすることができます。現在の最新バージョンは、ver.3.0.83です。






zipファイルがダウンロードされますので展開をします。










(2) 使用ファイルの確認とカスタマイズ

使用するファイルを確認します。
SyntaxHighlighterは、大きく分けて3つの部品群があります。


(i) CSSファイル

デザインを決めるのがCSSファイルです。CSSファイルは、Sytlesフォルダに入っています。
この中には、shCore.css と shCoreXXXX.css と shThemeXXXX.css という名前のものが入っています。
これは、
  shCoreXXXX.css = shCore.css + shThemaXXXX.css
という具合に、なっています。
そのため、
  shCoreXXXX.css をアップロードして使うか、
  shCore.css と shThemeXXXX.css の二つをアップロードして使うかを
を選べます。
お好きなほうを選んでいいのですが、ココでは説明しやすいように、shCoreXXXX.cssのほうを使用します。


各テーマのデザイン一覧です。



このまま使用しても良いですし、自分でカスタマイズしても構いません。カスタマイズする場合は、基本となる1種類を決めて、それをベースに改造するのが良いかと思います。



(ii) 共通のJavaScriptファイル

scriptsフォルダの中に、.jsファイルが沢山あります。shBrush~から始まるファイルと、それ以外のファイルがあるのがわかります。

必ず使用するのが、
  shCore.js
  shAutoloder.js
  shLegacy.js (これの使い方はようわからん・・・)
です。
必ず、scriptsフォルダにあるファイルを使用してください。srcフォルダにあるファイルは使ってはいけません(XregExpが定義されていない、というエラーが出て、正しく表示されません)。


(iii) 開発言語のBrushファイル

shBrushPython.jsなど、shBrush~から始まるファイルたちです。
表示したい開発言語のBrushファイルをいくつか選択してアップロードします。



(iv) ファイルのアップロード前に、先にCSSファイルのカスタマイズを行ってしまいます。

修正するのは、shCoreXXXXXX.cssファイルです。(shCoreDefault.cssなど)。

まず1つ目が、IE、Chromeで常に縦スクロールバーが表示されてしまう問題を解消する方法です。(ネタ元
下のソースのように、61行目を追加してください。


.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
}



次に、IEで最後の1行が表示されない問題を解消する方法です。(ネタ元
下のソースのように、75行目を追加してください。


.syntaxhighlighter table {
width: 100% !important;
margin-bottom: 1em !important;
}



つづいて、色変えたい場合ですが、230行目あたりから、好きなように変更します。
特に、偶数ライン、奇数ラインで色を変えたい場合は、.line.alt1, .line.alt2のbackground-colorの値を変えます。alt1が偶数ライン、alt2が奇数ラインです。


.syntaxhighlighter .line.alt1 {
background-color: #121212 !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #121212 !important;
}








(3) ファイルのアップロード

ファイルをアップロードします。
アップロードしなければならないファイルは、上にも書いたとおり、
  shCoreXXXXX.css
  shCore.js
  shAutoloder.js
  shLegacy.js
  shBrushXXXX.js (表示したい言語全て)
です。

何度も言いますが、.jsファイルは、必ず、scriptsフォルダにあるファイルを使用してください。srcフォルダにあるファイルは使ってはいけません


FC2ブログでの、ファイルのアップロードは、

12_upload.png

をクリックして行います。

12_upload2.png

複数のファイルを一気にアップロードできます。
アップロードを行ったら、赤文字の部分は、メモ帳にでも控えておいてください。
後で使います。

12_upload3.png







(4) テンプレートを書き換える

最後にやることは、ブログのテンプレートを書き換え、スクリプトが読み込まれるようにします。

メニューから、「テンプレートの設定」をクリックします。
12_upload4.png


表示された、テンプレートの設定画面の、「XXXXXXX のHTML編集」という中に、追加を行って行きます。

09_template更新s



まずは、<head>~</head>の中に、.cssと.jsをロードするように、コードを追加します。
</head>の直前に入れてください。
「ほげほげ」部分は、先ほどアップロードしたファイルのパスを、正しく入力してください。


<!-- SyntaxHighlighter Header -->
<link type='text/css' rel='stylesheet' href='http://ほげほげ/shCoreFadeToGrey.css' />
<script type='text/javascript' src='http://ほげほげ/shCore.js'></script>
<script type='text/javascript' src='http://ほげほげ/shLegacy.js'></script>
<script type='text/javascript' src='http://ほげほげ/shAutoloader.js'></script>
<script type='text/javascript' src='http://ほげほげ/shBrushXml.js'></script>
<!-- SyntaxHighlighter Header end -->


ココに記述するのは、Brush以外のファイル全てです。
(shBrushXML.jsはココに書くことで、html-scriptオプションが使えるようになるらしい)


次に、<body> の中に記述を行います。
記述する場所は、「本文」が表示された後の場所に行ってください。よくわからない方は、</body>の直前にでも書いてください。


<!-- SyntaxHighlighter -->
<script type='text/javascript'>
SyntaxHighlighter.autoloader(
'css http://ほげほげ/shBrushCss.js'
,'html xml xhtml http://ほげほげ/shBrushXml.js'
,'py python http://ほげほげ/shBrushPython.js'
,'c-sharp csharp http://ほげほげ/shBrushCSharp.js'
,'cpp c http://ほげほげ/shBrushCpp.js'
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter end -->



Autoloaderを使用した際の記述となります。Brushをheadで読み込まず、ブログでsyntaxhighliterを使用したときに、必要なスクリプトファイルを読み込むようになります。
先ほどと同様、「ほげほげ」部分は、アップロードしたファイルのパスを、正しく入力してください。


autoloader部分(全プログラム)

SyntaxHighlighter.autoloader(
'applescript http://ほげほげ/shBrushAppleScript.js',
'actionscript3 as3 http://ほげほげ/shBrushAS3.js',
'bash shell http://ほげほげ/shBrushBash.js',
'coldfusion cf http://ほげほげ/shBrushColdFusion.js',
'cpp c http://ほげほげ/shBrushCpp.js',
'c# c-sharp csharp http://ほげほげ/shBrushCSharp.js',
'css http://ほげほげ/shBrushCss.js',
'delphi pascal http://ほげほげ/shBrushDelphi.js',
'diff patch pas http://ほげほげ/shBrushDiff.js',
'erl erlang http://ほげほげ/shBrushErlang.js',
'groovy http://ほげほげ/shBrushGroovy.js',
'java http://ほげほげ/shBrushJava.js',
'jfx javafx http://ほげほげ/shBrushJavaFX.js',
'js jscript javascript http://ほげほげ/shBrushJScript.js',
'perl pl http://ほげほげ/shBrushPerl.js',
'php http://ほげほげ/shBrushPhp.js',
'text plain http://ほげほげ/shBrushPlain.js',
'py python http://ほげほげ/shBrushPython.js',
'ruby rails ror rb http://ほげほげ/shBrushRuby.js',
'sass scss http://ほげほげ/shBrushSass.js',
'scala http://ほげほげ/shBrushScala.js',
'sql http://ほげほげ/shBrushSql.js',
'vb vbnet http://ほげほげ/shBrushVb.js',
'xml xhtml xslt html http://ほげほげ/shBrushXml.js'
);




SyntaxHighlighter.config.bloggerMode=true;
の部分ですが、ブログは記事を書くと自動で改行が入ってしまうのですが、それでも綺麗に表示するためのコンフィグです。デフォルトはfalseなので、必ずtrueにしておきましょう。

その他、コンフィグは、本家のhttp://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/を見てください。
(他のBlogでは、stripBrs設定が必要かも)


これで、設定は終わったので右下の「更新」ボタンを押して、テンプレートを更新します。
最後に、問題が無いか確認してみてください。




次回は、「SyntaxHighlighterの使い方編」を行います。












スポンサーサイト


Comments

Leave a Comment


Body

プロフィール

Green

Author:Green
思ったこと、興味があることなどを適当に。
プログラミングとゲームの話が多いかも。

主に使ってるプログラミング言語
・C++
・C#
・Visual Basic
・Python

email address

最新コメント
最新トラックバック
月別アーカイブ
 
 
 
 
 
リンク (ゲーム)
 
 
Amazon
ゲーム

[2012/05/24] ドラゴンズドグマ(数量限定特典『バイオハザード6』体験版用DLコード同梱)  
  [2012/07/05] 世界樹の迷宮IV 伝承の巨神 (特典 ブックレット付きサウンドトラックCD付き)  
  [2012/07/19] ルーンファクトリー4 (特典 こっそり聴きたい添い寝CD(特製ヘッドフォン付き)付き)  
  [2012/08/02] ドラゴンクエストX 目覚めし五つの種族 オンライン(通常版)
[2012/08/02] ドラゴンクエストX 目覚めし五つの種族 オンライン (Wii USBメモリー16GB同梱版)  
  [2012/08/30] 初音ミク -Project DIVA- f(予約特典:デザイン保護フィルム(PlayStation(R)Vita専用)付き)  
 



DVD / Blu-ray

[2012/07/18] 映画けいおん! (Blu-ray 初回限定版)

[2012/08/29] [初音ミク]ミクの日大感謝祭 2DaysコンプリートBOX(初回受注生産限定盤) [Blu-ray]
 
 
Amazon
 

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