« 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


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

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

October 2021
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
31            

Recent Trackbacks

無料ブログはココログ