2017年2月15日水曜日

[Blogger]ブログ上でプログラムを綺麗に表示 [ブログデザイン]



日々のトラブルを記録したブログ。
今回は、ブログ運営の際にプログラムのソースコードを綺麗に貼り付けるための記事です。

この記事は、以下の条件がすべて当てはまる方向けの記事です。

「ブログ上でプログラムのソースを表示したい。他の人のブログで綺麗に表示されているので俺もやってみよう。」と、思い始めましたが、結局ひどい目に合いました。


結論から言うと、一般的に使用されているgoogle-code-prettifyではなくSyntaxHighlighterというものを使うことになりました。

ドツボにハマっている人が絶対いると思い、記録に残します。この記事は、成功に至るまでの苦労を記録したものです。

成功する手順をすぐ知りたいという方はこちら


1.プログラムのソースをブログ上で綺麗に表示したい

世のブログには、CSSやJavaScriptのソースを枠内に納め、行番号付きで綺麗に表示しているものがたくさんあります。その枠内を選択-コピーするとページ内の変なスペースが入ったりすることなくコピーできちゃうアレ。

調べようにもキーワードが分からず時間が掛かってたのですが、キーワードは「シンタックスハイライト」。やっとそこまでたどり着きました。

どうやら以下を使ってシンタックスハイライトなるものを実現するらしい。
google-code-prettify

世のブログには、下のどちらかをダウンロードして使うと書いてあります。
通常版 prettify-4-Mar-2013.tar.bz2
small版 prettify-small-4-Mar-2013.tar.bz2
また、”テーマ”を変える機能があり、各種のテーマが公開されているとのこと。

ここでまずハマったので覚書。
google-code-prettifyには通常版とsmall版の2種類あり、ごっついカスタマイズを行う場合は通常版、ちょっとしたカスタマイズしかしないよという場合はsmall版を使う、らしい。

google-code-prettifyをダウンロードして解凍したファイルのうち、使用するのは下の3ファイル。(複数の言語を使用する場合はその分の.jsファイルを追加)
prettify.css
prettify.js
lang-使用したい言語.js

ここで注意点が二つ。

◇カスタマイズしたテーマを使用したい場合は、どの道prettify.cssを別ページから入手するので↑のprettify.cssは不要。
各種のテーマを公開しているページから好みのものを選ぶが、ダウンロードボタンが「.css」「.min.css」の二つ。通常版を使う場合は「.css」、small版を使う場合は「.min.css」を使わないといけない。右クリックからファイルとして保存し、それをprettify.cssとリネームする。

これで必要なファイル3つ揃うことになる。(複数の言語を使用する場合は+α)


GoogleのBloggerでブログ運営

揃ったファイルをサイトにアップしようとしたところ、アップする場所が見つかりません。なんとGoogleの運営するBloggerではファイル置き場がないらしい。

      なぁーにぃいいいいいい!?


Bloggerでは.js、.cssファイルを内部に置けない

置けないものは仕方ないので、GoogleサイトやGoogleドライブにファイルを置いて一般公開設定にした上でブログから呼び出します。

仕方ないのでわざわざGoogleサイトにディレクトリを作ってそこに置きました。


外部に置くとアクセス遅すぎ

HTMLを編集して、記事内にコードを書き該当ページを開いてみました。
とりあえずは成功しました。

さぁカスタマイズと何回か修正・確認を繰り返してる内に気付きました。読み込みが完了しないときがあります。

何かおかしい…。

HTMLの編集、記事内のタグに間違いがあるのかと調べ続けました。どうにも原因が分からず色んな検索ワードで調べた結果、判明しました。

GoogleのサービスではIPv6の規格を採用しており、IPv4を使用してアクセスをすると、やたらと表示まで時間が掛かることがあります。

てことは、Bloggerでシンタックスハイライトをする=アクセス遅すぎな人が出てくるってことジャン!?

      こんなもん使い物にならん!







というわけで、それまでの苦労は全部無駄でした。

外部にファイルを置くのではなく、内部のスタイルシートとJavaScript/HTML用ガジェットで…とがんばりましたが、うまく行きません。

困り果てました。で、やっと見つけてうまくいったのがコレ→SyntaxHighlighter

ここでもまたトラブルがありましたが、とりあえず成功する手順は以下。


SyntaxHighlighterでやっと成功…

事前準備

まず、リンク先を記述するために使うべきファイル名を調べます。
好みのテーマを選び、.cssのファイル名…※1をメモる。
使いたい言語を選び、Brush aliasesとFile name…※2をメモる。


HTMLの編集画面へ入ります。
Bloggerのトップ(管理画面)の左側メニューから、テンプレート > HTMLの編集 ボタン

カスタマイズしない場合

以下のコードを<body>~</body>内に貼り付ける。
ただし、
2行目の******.cssを選んだテーマのファイル名(※1)に書き換える。
4行目の******.jsを調べた「File name」(※2)に書き換える。複数ある場合は、行を追加。

カスタマイズしない場合
1 <link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css" rel="stylesheet" type="text/css"/>
2 <link href='//agorbatchev.typepad.com/pub/sh/3_0_83/styles/******.css' rel='stylesheet' type='text/css'/>
3 <script src='//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
4 <script src='//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/******.js' type='text/javascript'/>
5 <script type="text/javascript">
6  SyntaxHighlighter.config.bloggerMode = true;
7  SyntaxHighlighter.all();
8 </script>

↓こちらがSyntacsHighlighterでの表示。
<link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css" rel="stylesheet" type="text/css"/>
<link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/******.css" rel="stylesheet" type="text/css"/>
<script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" type="text/javascript"/>
<script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/******.js" type="text/javascript"/>
<script type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<script>タグにasync="async"属性を入れると動かなくなるので注意。


カスタマイズする場合

以下のコードを<body>~</body>内に貼り付ける。
ただし、
1行目の******.cssを選んだテーマのファイル名(※1)に書き換える。
3行目の******.jsを調べた「File name」(※2)に書き換える。複数ある場合は、行を追加。

カスタマイズする場合
1 <link href='//agorbatchev.typepad.com/pub/sh/3_0_83/styles/******.css' rel='stylesheet' type='text/css'/>
2 <script src='//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>
3 <script src='//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/******.js' type='text/javascript'/>
4 <script type="text/javascript">
5  SyntaxHighlighter.config.bloggerMode = true;
6  SyntaxHighlighter.all();
7 </script>

↓こちらがSyntacsHighlighterでの表示。
<link href="//agorbatchev.typepad.com/pub/sh/3_0_83/styles/******.css" rel="stylesheet" type="text/css"/>
<script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" type="text/javascript"/>
<script src="//agorbatchev.typepad.com/pub/sh/3_0_83/scripts/******.js" type="text/javascript"/>
<script type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<script>タグにasync="async"属性を入れると動かなくなるので注意。

カスタマイズする場合は、この後スタイルシートをコピーしてBlogger内に貼り付けします。

以下のファイルをまず読み取ります。
shCore.css

内容をコピーして、Bloggerのテンプレートデザイナーへ。
Bloggerのトップ(管理画面)の左側メニューから、
テンプレート > カスタマイズ ボタン
コピーしたCSSを適用する
調整項目が並んでる中に「上級者向け」をクリック > 中にある「CSSを追加」 を選択
shCore.cssの内容を貼り付け(一番最後でOK)て、ブログに適用ボタンを押す。

貼り付けたコードを編集することでスクロールバーを消すなど必要なカスタマイズを入れることができます。


ブログの記事を編集

実際にプログラムを表示したい記事内で、ソースを以下のように記述します。
ただし、1行目の***は、↑の事前準備で調べた「Brush aliases」 の名前に置き換え。

<pre class="brush: ***; first-line: 1; highlight: [,];" title="">

ここに表示したいソース

</pre>


やっとできた…、長かった…。
Webデザイナーでもプログラマーでもない人間が凝ったことをしようとすると酷い目に合います。












透過PNG画像を作成できる簡単サイトと輪郭抽出のコツ【フリーソフト不要】
パソコン
PCの自作関連、便利ソフト、プログラム。
PC関連
画像関連
UWSC奮闘記
DIY
スピーカ製作、電気回路等のDIY。
自作スピーカ
ブログ
ブログ運営の話題。アドセンス、アナリティクス、サーチコンソールなど。
アドセンス関連
他のGoogleツール
その他
雑記
まとまりのない記事。生活用品や映画。
アホの雑記

免責事項
ホームへ戻る




2 件のコメント:

  1. 忙しいところ、すみません。

    BloggerってBlogram対応してないはずなのにグーバウォークが動いているので、
    どのように貼り付けたのかを教えていただけないでしょうか?

    公式の回答では、対応していないということでしたので、気になってしまいました。

    返信削除
  2. >鴉辺譜鼻勝さん

    ご質問ありがとうございます。

    ↓こうですね。
    タグ1 src="//widget.blogram.jp/blogparts/gooberWalk?uid=******" type="text/javascript" charset="UTF-8">タグ2
    ここにHTMLを貼るとエラーが出るので→タグ1…scriptの開始タグ、タグ2…scriptの終了タグ
    やってることとしては、先頭のプロトコル指定http:、https:を削除してるくらいですかね。(訪問者の閲覧に任せるように)

    http://blogram.jp/help/faq_member.html#howtoBlogparts
    ↑を見ると、楽天とexciteは設置できないとありますが、BloggerはFAQがないだけで非対応という訳ではないみたいですよ。

    返信削除