ワサコレ戦記の備忘録-pone

pone_web ワサコレ・スマホ・タブレット・パソコン・クルマ

TOP >> スポンサー広告 >> 【FC2】SyntaxHighlighter 3.0.83 導入編 -1-TOP >> Web site >> 【FC2】SyntaxHighlighter 3.0.83 導入編 -1-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
※古い記事を試すときは自己責任で!

この記事にリンクを貼る


Trackback: -- |  Comment: --

【FC2】SyntaxHighlighter 3.0.83 導入編 -1-

【FC2 BLOG♘用】
元々code用にスタイルシートを使っていましたが SyntaxHighlighter で見ると非常にキレイでわかりやすかったので導入することを検討しました。
SyntaxHighlighterでググるとたくさんHITします、FC2で導入されているブログをいくつかやってみましたがうまくいきませんでした。

関連記事:
・【FC2】SyntaxHighlighter 3.0.83 導入編 -1-
【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-
【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-



またバージョンも1.5 2.0 3.0 とあり、色んなところを見て廻りましたが3.0が一番使いやすく感じたので3.0の導入を詳しく解説してくれている
電脳太助さんの「電脳スピーチ blog」
を参考にさせてもらい無事設置完了したので備忘録として記載しておきます。

まずは最初にSyntaxHighlighterをダウンロードしましょう。
2011/3/19現在では3.0.83が最新バージョンのようです。
SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/)

解凍すると以下のファイル、フォルダが作成されます。


この中から必要なファイルを取り出します。
「scripts」には各言語のためのJavaScriptが入っています。
「styles」には,デザインをきめるcssが入っています。

必要なファイルは
「shCore.css」
「shCoreDefault.css」
「shCore.js」
「shAutoloader.js」
「shLegacy.js」
「shBrushXml.js」
です。

バージョン3.0からは「shAutoloader.js」が必要な言語JavaScriptを必要に応じて読みだしてくれるので「scripts」フォルダにあるjsファイルを全部アップしてもいいのですがScript文が長くなるので必要なモノだけアップしています。
最終的にはこのファイルをアップしました。
shCore.css
shCoreDefault.css
shAutoloader.js
shBrushCss.js
shBrushJScript.js
shBrushPerl.js
shBrushXml.js
shCore.js
shLegacy.js
shBrushPlain.js


では設置方法です。

<head>~<head>部分にcssファイルを読み込ませます。
ファイルの保存場所(your_blog)を自分のブログに合わせて変更します。
<link type="text/css" rel="stylesheet" href="your_blog/shCore.css" />
<link type="text/css" rel="stylesheet" href="your_blog/shCoreDefault.css" />


次にJavaScriptを使ってSyntaxHighlighterを動作させるのですがバージョンの違いや記載場所の違いなど情報が錯乱していてどれもうまくいきませんでした。

読み解いていってようやく答えがわかりました。
バージョン3.0から導入されている「shAutoloader.js」は必要になるjsファイルをその都度読み込んでくれます。
なので最初に宣言しておく必要がありません。

しかし、本文中のSyntaxHighlighterを見つけて必要なjsファイルを読み込む場合、その記述が最初の方にあるとどの言語で書かれているかわかりません。
なので</body>直前に記載する必要があります。


しかしさらに問題が発生です。


このブログでは写真を表示させる場合、「LightBox」を使っています。
この「LightBox」も</body>直前に記載する必要がありました。

関連記事:
LightBoxをFC2ブログへ導入する方法



最初は「LightBox」→「SyntaxHighlighter」の順番で書いていたのですが、Firefox他のブラウザは問題ないもののIEだけはスクリプトエラーで動作しませんでした。
ここに気づくのが一番時間かかりました。
なので今は「SyntaxHighlighter」→「LightBox」の順番で書き、どちらの機能も動作しています。

では、肝心のcodeです。
ファイルの保存場所(your_blog)を自分のブログに合わせて変更します。
<script type="text/javascript" src="your_blog/shCore.js" charset="euc-jp"></script>
<script type="text/javascript" src="your_blog/shAutoloader.js"></script>
<script type="text/javascript" src="your_blog/shLegacy.js"></script>
<script type="text/javascript" src="your_blog/shBrushXml.js"></script></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader
(
"css your_blog/shBrushCss.js",
"js jscript javascript your_blog/shBrushJScript.js",
"perl pl your_blog/shBrushPerl.js",
"text plain your_blog/shBrushPlain.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
これで完了です。

bloggerModeをtrueにすることによってFC2ブログ等で自動改行機能を使ったままでも表示通り反映されます。
SyntaxHighlighter.config.bloggerMode=true;
の部分です。

注意点
<pre>~</pre>の中ではHTML特殊文字を変換する必要があります。
文字"&'<>
キーワード表記&quot;&amp;×&lt;&gt;
10進表記&#34;&#38;&#39;&#60;&#62;


HTMLの変換は非常にめんどくさいのでこちらのサイトを利用させてもらってます。
HTMLタグ変換ツール(http://www.samurai-logic.com/php/crypt/html.php)


実際の使い方です。
codeまたはタグを書きます。これはホームページ作成ソフトなんかでも構いません。
それを変換します。HTMLタグ変換ツール

変換したらブログ上に貼り付けて<pre class="brush: 使用する言語;">~</pre>で囲みます。
これで完了です。

例えば
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
を表示したい場合は、タグを変換して
&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;strong&gt;SyntaxHighlighter&lt;/strong&gt;&lt;/span&gt;
にします。

そして<pre class="brush: 使用する言語;">~</pre>で囲みます。
Brush name
ソース種別
Brush aliases
設定できるコード
File name
JSファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js

今回はhtmlなので
<pre class="brush: html;">&lt;span style=&quot;color:#FF0000&quot;&gt;&lt;strong&gt;SyntaxHighlighter&lt;/strong&gt;&lt;/span&gt;</pre>
となります。

実際に表示すると
<span style="color:#FF0000"><strong>SyntaxHighlighter</strong></span>
このように表示してくれます。

ソースを選択したい場合は、内部でダブルクリックすると全選択してくれるのでそのままコピーするだけです。

様々なオプションがありカスタマイズ可能です。それはまた後日掲載したいと思います。
(現在表示中のCSSもカスタマイズしたスタイルです) ※古い記事を試すときは自己責任で!
Web siteの関連記事

この記事にリンクを貼る


TOP > スポンサー広告 > 【FC2】SyntaxHighlighter 3.0.83 導入編 -1-TOP > Web site > 【FC2】SyntaxHighlighter 3.0.83 導入編 -1-

この記事に対するコメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://recoboo.blog28.fc2.com/tb.php/88-ff7f4113
この記事にトラックバックする(FC2ブログユーザー)

SyntaxHighlighter導入メモ

fc2ブログにSyntaxHighlighter導入する手順 自分用備忘録です。

studio201
2011/07/21 16:28

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