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ではファイル置き場がないらしい。

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

よく分からんのは、画像関係のファイルはアップできちゃうってこと。画像のファイルは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」に書き換える。複数ある場合は、行を追加する。

</head>の直前に貼り付け[カスタマイズしない場合]
1 <link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
2 <link href="https://alexgorbatchev.com/pub/sh/current/styles/******.css" rel="stylesheet" type="text/css"></link>
3 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
4 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/******.js" type="text/javascript"></script>
5 <script language="javascript" type="text/javascript">
6  SyntaxHighlighter.config.bloggerMode = true;
7  SyntaxHighlighter.all();
8 </script>

↓こちらはSyntacsHighlighterでの表示。
<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」に書き換える。複数ある場合は、行を追加する。

</head>の直前に貼り付け[カスタマイズする場合]
1 <link href="https://alexgorbatchev.com/pub/sh/current/styles/******.css" rel="stylesheet" type="text/css"></link>
2 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
3 <script src="https://alexgorbatchev.com/pub/sh/current/scripts/******.js" type="text/javascript"></script>
4 <script language="javascript" type="text/javascript">
5  SyntaxHighlighter.config.bloggerMode = true;
6  SyntaxHighlighter.all();
7 </script>

↓こちらはSyntacsHighlighterでの表示。
<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デザイナーでもプログラマーでもないポク太郎が凝ったことをしようとするとひどい目に合います。


【関連記事】プログラムの説明がし辛いので専用ツール作った
Bloggerへの引っ越し注意点まとめ
無料ブログでGoogleアドセンス通った【2017年3月】
[Blogger]応援コメントを下さった方々へのお詫び


スポンサーリンク



↓ ランキングに参加しています!(Ctrlキーを押しながら) ↓

blogramのブログランキング

ポク太郎の「俺の説明聞いてくれ」 
目次
ポク太郎の「俺の説明聞いてくれ」最キラー記事 IT関連
電気回路やプログラムの記事。元々のメインコンテンツ。
UWSC奮闘記
プログラミングのできる子に
デジタルの世界って
映画・ドラマ・芸能
ハリウッドが主のエンターテイメントの記事。最近は似顔絵多し。
戦士の息抜き
落書き漫画
数コマ漫画とアホ漫画。結局最大コンテンツに。
物思いに耽る
今日の数学
アホの雑記
取りとめもなく好き勝手に書く記事。不本意にも一番人気だったり。
役に立つかも
休むに似たり
好き勝手に書く
ブログ運営
AnalyticsやSerchConsolなどの使い方、アクセスアップに関する話題。
アドセンス関連
他の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がないだけで非対応という訳ではないみたいですよ。

    返信削除