« Web天気予報を使って(中山道)トレッキング日程検討用ツールシート | Main | Windows10 アップグレード後フリーズし易い・・・原因調査中・・・ »

04/12/2016

ココログでソースコードを見栄え良く掲載するには・・・

ココログでソースコードを表示する際に、WordPressのように「ソースコードを切り出してきて表示している」かのような表現が出来ないものかと、かねてから思って居た。
Web検索してみると、「SyntaxHighlighter」というサイトからファイルをダウンロードし、ココログの管理ページから必要なファイル類をアドオンすれば、ソースコードテキストを囲んだ左側部分に、コード番号列を配したソースコード表示が出来るらしい。(詳細は「Todotaniのはやり物Log:
Syntax Highlighter 3.0の使用方法 」、「よしなしごと(技術関連の備忘録):ココログでソースコードをかっこよく表示する」等に詳しく書かれているので参考にすると良い。)
SyntaxHighlighter
 : 2004年に Alex Gorbatchev 氏により制作され、2016/4/12現在の最新版は 3.0.83(July 2, 2010)  というバージョンらしい。

《手順》
「Todotaniのはやり物Log:Syntax Highlighter 3.0の使用方法 」を参考に、やってみる。
①先ず、必要なファイルを
SyntaxHighlighter」からダウンロード。
 ・「
syntaxhighlighter_3.0.83.zip」 をダウンロードした。
 ・ファイルを展開すると、下図のようなフォルダとファイルが入っている。
Syntaxhighlighter1









②ココログに今回の設定のためのフォルダを用意する。
 ココログの「管理ページトップ」⇒「コントロールパネル」⇒「ファイル」と辿り、
 この「ファイル画面」で、次のような2つのフォルダを作成する。
  ・scripts
  ・styles

③次に②のフォルダに入れるファイルの選択とアップロード
 ダウンロードした scripts フォルダ には、多くの Brush ファイルがあるので選択に迷う。

僕は、下記 6個の言語用ファイルを選択し scripts のフォルダーにアップロードした。今回アップロードしたファイル以外の言語用(PHP、Ruby等)のものが必要になれば、またその段階でアップロードすれば良いので、必要最小限のファイルとした。
 ・shBrushCss.js
 ・shBrushJScript.js
 ・shBrushPlain.js
 ・shBrushVb.js
 ・shBrushXml.js
 ・shCore.js

同じくダウンロードした styles のフォルダからも、アップロードするファイルを選択する。表示するテーマを、Eclipse風、Emacs風等有り選べるので、
全てのファイルをアップロードしておいて楽しむのも良いらしいが、僕がアップロードしたのは、下記の 2つのファイル。
 ・shCore.css
 ・shThemeDefault.css

④ブログページにアクセスした際に、Syntax Highlighter を起動させる必要がある。
 これは、ブログのサブタイトルのところに 使用する JavaScript と CSS を書き込めば良いらしい。
 このためには、サブタイトル部に書き込む為の javascript を作っておかなければならない。
それは、テキストで作って貼り付ければ良いから・・・僕は Sublime Text3 で下記のようなものを作った。
Syntaxhighlighter2











⑤上記のテキスト部分をコピーして、
「ブログ」⇒「設定」 と辿り、「ブログのサブタイトル」部分に 貼り付ける。

「変更を保存」をクリックし、「サイトに反映」をクリックする。このとき全てのサイト内ファイルに反映する必要は無いと思うが・・・。 環境の設定は、ここで終了。

さて、ソースコードなど上手く表示出来るだろうか・・・ 


上記の javascript に適用してみよう・・・、

表記は Brush name 「XML」の場合、shBrushXml.js をダウンロードしてあるので、Brush aliases は「 xhtml 」を使う。
pre の記載は、
<pre class="brush: xhtml;"></pre> のようになる・・・

HTMLの編集画面にして ⇒
<pre class="brush: xhtml;"></pre> と書いて ⇒ この後、テキストを「~」部分に貼付ける。
記事の作成画面では、この貼り付けたテキスト部分が見えないぞ!

でも、このようになった。









Brush name の選択は、「NetyaSun : ソースコード表示 6.Brush nameを選択」にあるので参考にするのがよい。

上記テキスト表示で、
マークが表示されている・・・入れた記憶が無いが・・・何だろう?⇒「SyntaxHighlighter」からのメッセージだった!

次のブログ記事でも「Syntax Highlighter
」を使おうと思ったが・・・メッセージが表示されて、有効にならない。

« Web天気予報を使って(中山道)トレッキング日程検討用ツールシート | Main | Windows10 アップグレード後フリーズし易い・・・原因調査中・・・ »

PC and PC troubles」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/540128/63474839

Listed below are links to weblogs that reference ココログでソースコードを見栄え良く掲載するには・・・:

« Web天気予報を使って(中山道)トレッキング日程検討用ツールシート | Main | Windows10 アップグレード後フリーズし易い・・・原因調査中・・・ »

April 2017
Sun Mon Tue Wed Thu Fri Sat
            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            

Recent Trackbacks

無料ブログはココログ