FC2ブログ

スポンサーサイト

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

↑やる気アップにご協力をお願いします。わぁいヽ(∇⌒ヽ)(ノ⌒∇)ノわぁい♪

こんな記事もありますよ


FC2ブログにSyntaxHighlighter3.0.83を導入してみた!(導入・利用編)

SyntaxHighlighterの導入記事の第2弾になります。

準備編では、ダウンロードからアップロードまでを行いましたが、
今回は、ブログのテンプレートを編集したり、実際に利用したりしてみたいと思います。

なおこの導入方法に関しては、Linux愛好者の独り言
紹介されている内容を参考にして記述しています。
詳細な説明等も記載されていて大変参考になりました。
カテゴリー:SyntaxHighlighterを一読されることをお勧めします。

では、実際にすすめていきませう~ ヾ(〃^∇^)ノ♪

まずは、ブログテンプレート編集から進めてみたいと思います。



その前に!!
必ず、現在利用しているテンプレートを複製したりして、
間違えてもすぐに復元できるようにしていてくださいね・・・

だって・・・一切保障できましぇんもん・・・(T‐T)

まずは、ヘッダー部分<head> ~ </head>の中に下記の文字を貼り付けます。
<link rel=stylesheet type=text/css href="アップロードしたアドレス/shCore****.css">
<head> ~ </head>のどこに記述していいのか悩む場合は、</head>の
直前に書いてしまってよいと思います。

href=" " の間には、(導入編)でアップロードした際に表示された、CSSファイルの
アドレスになるので注意してください。

上記の記述は、SyntaxHighlighterの書式に関するCSSファイルとの接続するための
ものです。

では本体を利用するための記述です。

下記を、<%topentry_more>の次の行に追加してください。
<script type=text/javascript src="http://アップロードしたアドレス/shCore.js">
</script>
<script type=text/javascript src="http://アップロードしたアドレス/shBrushPhp.js">
</script>
<script type=text/javascript src="http://アップロードしたアドレス/shBrushVb.js">
</script>
<script type=text/javascript src="http://アップロードしたアドレス/shBrushXml.js">
</script>
<script type=text/javascript>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
<%topentry_more>を探すのが大変かもしれませんが、その辺は努力と根性で(^^ゞ

shCore.js は必須になります。
それ以外の shBrushPhp.js ・ shBrushPhp.js ・ shBrushPhp.js
の3つですが、これは自分がアップロードしたファイルになります。
必要な数だけ追加してください。

追記(2011/1/5):
上記を<%topentry_more>の後に記述した場合、本文内でSyntaxHighLighterを利用している場合には、
追記(続きを読む)を表示しないと、SyntaxHighLighterが適用されなくなってしまうようです。

本文で利用する場合には<%topentry_body>の直後などに記述しておくと大丈夫みたいです。
ただ、表示が少し重たくなってしまう印象が自分にはありましたので、
追記部分にのみSyntaxHighLighterを利用するようであれば、
上記の場所がいいような気がします。(^^ゞ
<script type=text/javascript>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
上記の部分は、ブログを書く際に自動改行を利用してもそのまま
使えるようにするための記述になります。

ブログを書くときに自分で改行タグを打ち込む方には
必要の無いところになるようですが、自分には必要でした。(^^ゞ

ここまで出来たら、基本的に動作するはず・・・です・・・(-。-) ボソッ

とりあえず、ここまで出来たらテンプレートを更新しておいてください。
更新しないと、折角の努力が破棄されてしまいますもんね・・・(;^_^A

さて実際に正常に動作するかどうかですが、これは記事を書いてみないことには
わからないので、新規に記事を作成してみてください。

SyntaxHighlighterで表示したいコードの前後に
<script class="brush:xml" type="syntaxhighlighter">


]]></script>
のように記述するとSyntaxHighlighterが適用されると思います。

<![CDATA[]]> は無くてもとりあえずは、大丈夫のような気がしました。
あくまでも、自分は・・・(;^_^A

1行目の class="brush:xml"の部分ですが、
今回はHTMLを記述しているので、"xml"を指定しています。

実際に利用する場合は、その記述するプログラムの言語に対応した文字を
指定してください。

下記に代表的(と思われる)言語と指定する文字と必要なファイルの対応表を
掲載していますが、それ以外に色々と対応しています。

詳細は本家サイト(Bundled Brushes)のページを参照されてください。

言語対応表
利用したい言語指定文字必要なファイル
ActionScript3
as3
shBrushAS3.js
C#
c-sharp
shBrushCSharp.js
C++
c
shBrushCpp.js
CSS
css
shBrushCss.js
JavaScript
js
shBrushJScript.js
PHP
php
shBrushPhp.js
SQL
sql
shBrushSql.js
Visual Basic
vb
shBrushVb.js
XML(HTML)
xml
shBrushXml.js

また、<script class="brush:xml" type="syntaxhighlighter">~</script>の中では
基本的に"<"や">"もそのまま利用することができますが、html形式などで利用する際には
"<"を&gt;と記述したり、">"を&lt; (&は半角)として記述しないと
正確に表示されないこともあるっぽいです。そこも注意してください。m(_ _)m

どうか・・・これで、基本的に動作してくれてますように・・・

次は、見た目を少し変化させるということで
CSSカスタマイズ編になります。

蛇足という名の補足
SyntaxHighLighterの使い方として、
<pre class="brush:xml" type="syntaxhighlighter">



</pre>
のように<pre>で囲む方法がまず紹介されていますが、
"<"や">"等を利用する際に必ず変換しなければないということで、ここでは割愛させていただいてます。
詳しくは、Linux愛好者の独り言等をご覧いただくとよいと思います。

追記(2010/11/16):
Preタグを利用した場合とScriptタグを利用した場合の違いですが、
Scrptitタグを利用した場合には、SyntaxHighlighterが読み込まれるまで
記述したコードが表示されませんが、Preタグを利用した場合は、
SyntaxHighlighterが読み込まれる前の段階で記述したコードだけは表示されるようです。

プラグインなどとの兼ね合いでSyntaxHighlighterの読み込みに時間がかかる場合には
Preタグを利用したほうがいいのかもしれないです。

また、Preタグで記述した場合にはブログ作成時時のプレビューにも
その内容が表示してくれます。但し、"<"や">"は変換してあげる必要はありますが・・・
↑やる気アップにご協力をお願いします。わぁいヽ(∇⌒ヽ)(ノ⌒∇)ノわぁい♪

こんな記事もありますよ


コメントの投稿

非公開コメント

Author's Profile ~自己紹介~

Genzo

Author:Genzo
PCは一応自作できるレベル。
ワード・エクセルなら基本的に
扱えるレベル。
プログラム・・・?ん?
VBA・・・?ん?ん??
それって美味しいですか?


~ 当ブログについて ~

~ Mail2Genzo  ~

Calender&Search かれんだーと検索

11 | 2018/12 | 01
- - - - - - 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 - - - - -

Access2Genzo内で検索

Category ~かてごりー~

Comments Tree ~こめんとつりー~


Link ~りんく~

ブロとも申請フォーム

Counter ~かうんた~

Since 2010/08/01:

Online:

タグクラウド

最新トラックバック

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