SyntaxHighlighterをBloggerに安全に導入するためにあれこれした記録

ブログにソースコードを載せる際には，出来れば行数なんかも表示してキレイに表示したいですよね。

今回はコードをキレイに表示する「SyntaxHighlighter」を当ブログに導入したので，その方法を備忘録として記載しておきたいと思います。

• 1. 前置き
• 2. 方法
  • 2-1. Node.jsのインストール
  • 2-2. Firebase側の準備
  • 2-3. ファイルの準備
  • 2-4. ターミナルでの作業
• 3. 使用してみる
  • 3-1. Blogger側の設定
  • 3-2. 実際に使用
• 4. 参考にしたサイト
• 5. まとめ

1. 前置き

ソースコードをブログに今後載せるかどうかはさておき，もしも載せるときがきたとしたらキレイに表示したい。そう思い，コードをキレイに表示できる方法はないかと調べて出てきたのが「Syntax Highlighter」です。

例えばPythonのコードを以下のように表示できます（使いたいだけ）。

?

1 2 3 4 5 6 7 8 9 10 11 12

def ack(m, n):     if (m == 0):         return n + 1     if (n == 0):         return ack(m - 1, 1)     else:         return ack(m - 1, ack(m, n - 1))     for m in range(4):     for n in range(5):         print("--------------------\nAck({}, {}) = {}".format(m, n, ack(m, n)))

しかし，こちらをBloggerで導入しようとするとhttps環境下では危険だとエラーを吐かれました(※1)。確認すると，ホスティング先(※2)がhttpであるのが原因のよう。

あれま，ではどうすればいいんだ…と他の方法を検索すると，「FireBase」というものを使って自分でホスティングしちゃおう！的なの(※3)がいくつかヒットしました。

しかし，どのサイトも細かい部分は基本的に省かれており，初心者には少々キツい部分がありました。

はしょられている部分も拾いつつの備忘録にしておきたいと思います。詰んでいる方の参考にもなれば幸いです。

ちなみにBlogger向けの話です。

※1：厳密にはエラーというか警告ですね。せっかくサイトがhttpsで保護されているのにホスティング先にアクセスするためにhttpを使用しているせいで意味がなくなってしまいます。
※2：Blogger自体にSyntax Highlighterのファイルを置くことができないので，公式が用意してくれているホスティング先があります。
※3：この方法であればBloggerの「プレビュー」画面にも反映されるので，公開するまでコードがきちんと反映されるかドキドキする必要がありません。

2. 方法

それでは早速方法を。

2-1. Node.jsのインストール

まずはNode.jsをダウンロード・インストールしましょう。以下のサイトから，自分のPCにあったものを落としてきます。

Windows 64bit環境の方はWindowsインストーラーの64bitを選びましょう。インストール時は基本Nextを選択するだけで大丈夫です。

2-2. Firebase側の準備

おそらくBloggerを使っている皆さんはGoogleアカウントをお持ちのことでしょう。FirebaseはGoogleに買収されたサービスなので，Googleアカウントでログインできます。

以下からFirebaseにアクセス。「使ってみる」をクリックしましょう。

Googleアカウントでログインができたら，次はプロジェクトを作成します。今回は「Blogger's Syntax Highlighter」にしました。名前は自由ですが，日本語が使えなかったので注意が必要です。

2-3. ファイルの準備

続いてSyntax Highlighter自体のダウンロードです。以下のページの「Click here to download」をクリックし，Zipファイルをダウンロードし，解凍しましょう。

※Git Hubの方に公開されているものもクローンしてみましたが，なぜか内容物が異なり，多くのサイトが紹介している方法に対応できませんでした。

ちなみに参考にしたソースのダウンロードリンク先はリンク切れでしたので，素直に上記から行くのが楽です（ホントこれだけでも結構苦労した…）。

解凍した中のscripts，srcそしてstylesを使います

参考にしたサイトが追加していたのでその通りにしましたが，あとあと確認すると正直srcは要らない気もします。（きっと内部処理のために必要であるに違いない）

2-4. ターミナルでの作業

続いてはターミナル側での作業です。

コマンドプロンプトもしくはWindows PowerShellなどを起動しましょう。Macの方はターミナルですね。Macの方は今後表記するコマンドの最初に「sudo 」が必要だそうです（手元にMac系ないんだ，ごめん）。

最初の方はこちらのサイトを参考にしました。

起動したコマンドプロンプトに

npm install -g firebase-tools

と入力。
インストールが終了するのを待ちます。
その後，以下のコマンドを入力しFirebaseにログインします。

firebase login

匿名の情報の収集に関して問われるので，いいよって方はYを，嫌だって方はNを入力しましょう。
ブラウザが開き，Googleアカウントでのログイン承認を求められるのでログインしましょう。また，複数アカウント所持している場合は，Firebaseでプロジェクトを作成したアカウントにしましょう。

ログインが成功したらまずは初期化です。以下のコマンドを実行します。

firebase init

今回はホスティングを行うので

Hosting: Configure and deploy Firebase Hosting
sites

を選択します。矢印キー上下で選択肢移動，Spaceで選択です。選択し終わったらEnter(Return)で進みます。

プロジェクトは先ほど作ったものです。真ん中にあるはずです（他にもプロジェクトを作成している場合は異なるでしょうけど）。
続いての質問には「public」と答えましょう。

その次のものもY（Yes）で行くはずですが，自分の場合はエラーが出たのでNにしときました。

以上の作業で作成されたpublicに先ほどの3フォルダをぶち込みます。

ぶち込めたら，コマンドプロンプトの方で以下を入力し，デプロイ（アップデート的な）します。

firebase deploy

完了すると，プロジェクトのURLが示されます。

ちなみに万が一ターミナルを閉じてしまいURLが分からなくなってしまっても大丈夫です。
Firebaseの先ほど作成したプロジェクトにアクセスし，左側にあるメニューの「開発」をクリック。

開かれた中身のHostingをクリックし，表示されるページの「ドメイン」のURLを取得しましょう。

3. 使用してみる

それでは実際に使用してみましょう。

3-1. Blogger側の設定

まずはBloggerのテーマの</head>手前に以下のhtmlを記述しましょう。
headタグ内であれば良いので，ほかにもカスタマイズを施している場合はそれらとの順序は気にする必要はありません。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- SyntaxHighlighter導入 --> <!-- SyntaxHighlighter本体の記述 --> <link href='[得られたアドレス]/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='[得られたアドレス]/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='[得られたアドレス]/scripts/shCore.js' type='text/javascript'/> <!-- 選択する言語部分の記述 --> <script src='[得られたアドレス]/scripts/shBrushCss.js' type='text/javascript'/> <script src='[得られたアドレス]/scripts/shBrushXml.js' type='text/javascript'/> <!-- bloggerで使用するための記述 --> <script type='text/javascript'>   SyntaxHighlighter.config.bloggerMode = true;   SyntaxHighlighter.all() </script>

[得られたアドレス]には先ほどの作業で得られたプロジェクトのURLになります。コピペして使いましょう。Brushはpublicにぶち込んだscripts内にあるものであれば使えます。使用するものを記述しておきましょう。とりあえず全部載せるのもあり。
ちなみにデザインを変更したい場合は，shThemeDefault.cssを別のファイルに変更すればいいだけですので簡単です。何があるのかは以下から見れます。こんな感じだよ～というプレビューもあるので好きなテーマを選びましょう。

3-2. 実際に使用

以下のように<pre>タグで記述することでコードが表示されます。
記事作成をし，html編集に変更してから記述しましょう。
htmlやC++の#include等を記述する際は「<」を「&lt;」，「>」を「&gt;」で置き換える必要があるので注意してください。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<pre class="brush: python;">def ack(m, n):     if (m == 0):         return n + 1     if (n == 0):         return ack(m - 1, 1)     else:         return ack(m - 1, ack(m, n - 1))     for m in range(4):     for n in range(5):         print("--------------------\nAck({}, {}) = {}".format(m, n, ack(m, n))) </pre>

4. 参考にしたサイト

参考にしたサイトは以下の3つです。

5. まとめ

いかがでしょうか。一回導入さえしてしまえば，preタグにclassでそれぞれのBrushを指定するだけで楽々キレイなコードを表示できるようになります。

公式のホスティングがhttpのせいで，少々導入がめんどうですが，慣れていなくても1,2時間もあれば導入できますので，コードを頻繁に載せる方はぜひ！

2018年6月18日月曜日 Blogger Google Windows アプリ レビュー 備忘録