2017年2月15日水曜日

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

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

この記事は、以下の条件がすべて当てはまる方向けの記事です。
     1.プログラムなどのソース(行番号付き、なし)をブログ上に表示したいと思っている。
     2.GoogleのBloggerを使ってブログを運営している。
     3.Bloggerは.jsファイル.cssファイルを内部に置けないので困っている。
     4.外部(別のGoogleのサービス)に置くとアクセスが遅すぎて困っている。


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



結論から言うと、一般的に使用されている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を別ページから入手するので不要。
      ◇各種のテーマを公開しているページから好みのものを選ぶが、ダウンロードボタンが二つあって「.css」「.min.css」
       通常版を使う場合は「.css」、small版を使う場合は「.min.css」を使わないといけない。
       右クリックからファイルとして保存し、それをprettify.cssとリネームする。

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



GoogleのBloggerを使ってブログを運営している

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

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

よく分からんのは、画像関係のファイルはアップできちゃうってこと。
画像のファイルはOKで、その他はNGってどういう差別だよ。
セキュリティ目的かもしれんが、それならロゴマークの横に書いとけよw
引越しする前に気づかせろよ。



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

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

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



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

HTMLを編集して、記事内にコードを書き該当ページを開いてみました。
とりあえずは成功しました。
さぁカスタマイズと何回か修正・確認を繰り返しているうちに気付きました。
読み込みが完了しないときがあります。

何かおかしい…。
HTMLの編集、記事内のタグに間違いがあるのかと調べ続けました。

どうにも原因が分からず色んな検索ワードで調べた結果、判明しました。

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

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

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




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

外部にファイルを置くのではなく、
内部のスタイルシートとJavaScript/HTMLの書けるガジェットを利用して何とかできないかとがんばりましたが、うまく行きません。
困り果てました。で、やっと見つけてうまくいったのがコレ→SyntaxHighlighter

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



やっと成功…

1. ここで、Brush aliasesとFile nameを調べる

   使いたいBrush nameに対応するBrush aliasesとFile nameをメモります。


2. HTMLの編集

   ここで好みのテーマを選択し、.cssのファイル名をメモる。…※

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

 [カスタマイズしない場合]

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

<link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="https://alexgorbatchev.com/pub/sh/current/styles/******.css" rel="stylesheet" type="text/css"></link>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/******.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

 [カスタマイズする場合]

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

<link href="https://alexgorbatchev.com/pub/sh/current/styles/******.css" rel="stylesheet" type="text/css"></link>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/******.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>


3.スタイルシートの編集

 [カスタマイズしない場合]

   作業なし

 [カスタマイズする場合]

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

   内容をコピーして、
   Bloggerテンプレートデザイナーへ入ります。
       Bloggerのトップ(投稿記事を管理する画面)の左側のメニューから、
       テンプレート > カスタマイズ ボタン
   コピーしたCSSを適用する
       背景や幅を調整する項目が並んでいる下の方に「上級者向け」という項目があるので開く。
       中にある「CSSを追加」 という項目を選択すると、CSSの編集画面が開きます。
       shCore.cssの内容を貼り付け(一番最後でいいと思います)て、ブログに適用ボタンを押す。

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


4.ブログの記事編集

   表示したい部分を以下のように記述する。
   ただし、1行目の***は、1.で調べた「Brush name」 に書き換える。

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

ここに表示したいソース

</pre>



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


【関連記事】  はてなブックマークが機能しない!
ソーシャルボタンの並びがガタガタ





0 件のコメント:

コメントを投稿