Blogger カスタマイズしてみた【No.2】

2014年9月2日火曜日 fukui,

Bloggerカスタマイズ、はっじまっるよ〜((( ´‿ゝ`)))
というわけでこんにちは|‘ω‘*) うぇぶ屋見習いの fm です。
前回はフォントサイズやフォントファミリーなどのスタイルを整えたよっていう内容を書きました。
今回は、エンジニアブログなら必要不可欠、シンタックスハイライトを整えたよっていう内容です!
とても長いので以下、もくじです。
  • すてきライブラリ・highlight.js紹介
  • 手順1.必要な言語を選択してダウンロード
  • 手順2.ダウンロードしたファイルの確認
  • 手順3.必要なファイルをアップロード
  • 手順4.BloggerのHTMLにコードを追加
  • ブログ記事にコードを書くには

ではいってみましょー。

すてきライブラリ・highlight.js紹介

ブログにコードを引用するとき、べたーっと書いてあるよりも、エディタのようにハイライトされるのよいですよね(*‘ω‘ *)
というわけで、すてきな js ライブラリを見つけたので導入してみました。
その名も highlight.js です。

以下、すてきだなとおもうポイントを列挙です。
  • 対応言語は 86言語 !!!
  • 現在もアップデートされている !!
  • 導入がかんたん !!
    • デフォルトの言語のみならCDNでOK !!
  • スタイル(色分け)のパターンは 49種類 !!
    • かっこいいのからかわいいのまで豊富(((*‘ω‘ *)))
  • 記述方法がかんたん !!
というわけで、導入します。

手順1.必要な言語を選択してダウンロード

さっそく「Get version 8.1」というボタンをクリックして、ダウンロードページにいきます。
ページの上の方にCDNが記載されていますが、今回は言語を選択してカスタマイズしたものをダウンロードするのでスルーします。


↑のように「Custom package」項に言語がずらーっとならんでいます。すばらしいですね!
ここで、ハイライトしたい言語のチェックボックスをぽちぽち押していきましょー。
当ブログでは、デフォルトでチェックされている言語の他に、弊社エンジニアの希望から以下の言語をセレクトしました!
  • CMake
  • Erlang
  • Lua
  • Scala
  • Haskell
  • D
  • Haml
  • SCSS
チェックができたら「Download」ボタンを押しましょう。
「highlight.zip」というzipファイルがダウンロードできますヤッタネ!

手順2.ダウンロードしたファイルの確認

ダウンロードした「highlight.zip」を解凍して、ファイルを確認します。
  • CHANGES.md
    • いままでのアップデートした内容が仔細にかかれています
  • highlight.pack.js
    • 本体です
    • ただの文字を判別してハイライトしてくれるすごいやつです
  • LICENSE
    • ライセンスファイルです
  • README.md
    • READMEです
  • README.ru.md
    • まさかの多言語仕様 !!
  • styles/
    • シンタックスハイライトのスタイル用のファイルが格納されています
    • cssファイルと画像ファイルがごっちゃりはいってます

手順3.必要なファイルをアップロード

ファイルを確認したところで、ひつようなファイルをサーバー上にアップロードします。
今回アップロードするファイルは以下の2つです。
  • highlight.pack.js
    • 本体です
  • styles/github.css
    • ハイライトのスタイルです
    • みんなだいすき Github 風のスタイルになります
アップロード先は、弊社は他のブログ記事のとおりAWSを利用していますので、AWS S3です!
Googleドライブにアップロードでも使えるみたいなので、そちらでもよいですね(*‘ω‘ *)

手順4.BloggerのHTMLにコードを追加

長いですがあとちょっとです!
js ファイルと css ファイルがアップロードできたら、Bloggerの管理画面から、テンプレートページにいきましょう。
「HTMLの編集」ボタンを押すと、下図のページに移動します。しますよね(*‘ω‘ *)

それでは公式の使い方ページの「Getting Started」を参考に、<head> ~ </head> 内に、以下のコードを追加しましょう!
ちなみに当ブログでは、<title> ~ </title> の下部に書きました(`・ω・´)b
  
    <link rel="stylesheet" href="ここにアップロードしたCSSファイルのURL">
    <script src="ここにアップロードした highlight.pack.js のURL"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  
これで導入は完了です!
おつかれさまでした。o.+゚。(*′▽`*)。o.+゚。

ブログ記事にコードを書くには

それでは導入もすんだことなので、ブログ記事にコードを書いてみましょう(*‘ω‘ *)
書き方はこんな以下のとおり。かんたんです!
  
<pre>
  <code>
    ここにコードを書きます。
    言語を自動判定して、よしなにハイライトしてくれます。
  </code>
</pre>
  
ね、簡単でしょ?( ・´ー・`)

というわけで、よきエンジニアブログライフにご活用いただければ幸いです(*`・ω・´)b
次回は「いきなりブログのテンプレート変えたよ!」てきなお話のよていです。みていです。

|‘ω‘ *)ノシ