ホーム / 旧ブログ /

linuxBean14.04(20)BloggerにSyntaxhighliterを導入する方法

2015-05-16

旧ブログ

t f B! P L

前の関連記事：linuxBean14.04(19)VirtualBoxのホストOSとフォルダを共有


Bloggerで新しいブログを作ってまずSyntaxHighlighterを導入します。

(2016.7.22追記。v3.0.83からv4.0.1に入れ替えました。（linuxBean14.04(123)SyntaxHighlighter v4のブラシを作成する）v3.0.83にはUTF-8の半角スペースには2種類あるとBlogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決の問題が発生しますが、v4.では解消されています。ただし、v4の導入には自分でビルドする必要があります。)

VirtualBoxのゲストOSのChromeでのみ必要な設定


VirtualBoxのゲストOSのlinuxBeanのChromeで操作する場合、デフォルトのままではBloggerのレイアウト画面などでドラッグ操作ができませんでした。

Chromeを--touch-devices=123オプションをつけて起動するようにして解決しました。(linuxBean14.04(2)linuxBean設定ウィザードでソフトウェアを追加する参照。）


必要なファイルを選択する


SyntaxHighlighter - Downloadからsyntaxhighlighter_3.0.83.zipをダウンロードします。

解凍してできたsyntaxhighlighter_3.0.83フォルダから必要なファイルを選択します。

まずCSSファイルをstylesフォルダから選択します。

どのCSSファイルを選択するのかはSyntaxHighlighter - Default themeを参考にします（MDUltra以外の7つの例が見れます）。

shCoreDefault.cssはshCore.cssとshThemeDefault.cssを合体させたものなので、CSSファイルはshCore～.cssの8つから1つ選べばよいことになります。

しかしshCore.cssは少しカスタマイズしたいところがあるので、今回はshCore.cssとshThemeDefault.cssを使うことにします。

次にJavaScriptファイルをscriptsフォルダから選択します。

shCore.jsは必須です。

あとはハイライトさせたい言語によって選択します。

shBrushCss.js
shBrushXml.js

今回はCSSとXMLを選択しました。

ということで今回使用するファイルは以下の4つです。

shCore.css
shThemeDefault.css
shCore.js
shBrushCss.js
shBrushXml.js

(shCoreDefault.cssはshCore.cssとshThemeDefault.cssをまとめたものなのでそれを使うとファイル数が1つ減ります。）

(2015.9.25追記。テーマをshCoreDefault.cssからshCoreEmacs.cssに変更しました。）

shCore.cssをカスタマイズする

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;
  -webkit-text-size-adjust: 100%;
}
shCore.cssにこの61行目を追加することで縦スクロールバーが表示されなくなります。(Blogger:SyntaxHighlighter(2)表示をカスタマイズ参照。）

62行目はiOS Safariでの行ずれを防ぐためのものです。(Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決参照。）

SyntaxHighlighterの環境設定


SyntaxHighlighter - Configurationに解説があります。
<script>
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.all();
</script>
このブログではこのようにしています。

SyntaxHighlighter.config.bloggerModeはデフォルトでfalseですので設定する必要はないのですが、忘れないために書いてあります。

これをtrueにするとコード内の<br/>で改行されてしまうのでfalseにしています。(Blogger:SyntaxHighlighter(5)Configurationを設定する参照。)

3行目はツールバーの非表示、4行目はコード内のリンクをハイライトしない設定です。

5行目はSyntaxHighlighterの実行に必要なものです。

ちなみにこのブログでコードの下部に間抜けな空白行があるのは、横スクロールバーをfleXcrollでカスタマイズしていてその対処がうまくできていないからです。(SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされず参照。）

(2015.9.25追記。テーマ変更を機にSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で設定したfleXcrollは撤去することにしました。）

HTML/JavaScriptガジェットに入るようにファイルの中身を圧縮する


Bloggerのサーバー内にファイルを置く方法はないので外部ファイルサーバーの用意がなければ、ファイルの中身を直接HTML/JavaScriptガジェットにいれるしかありません。

Blogger:Googleサイトの利用をやめて表示速度を改善するでは外部ファイルサーバーよりもガジェットに入れたほうが速度が速かったので今回は直接HTML/JavaScriptガジェットにいれることにします。
<style>
shCore.cssの中身。
shThemeDefault.cssの中身。
</style>
<script>
shCore.jsの中身。
shBrushCss.jsの中身。
shBrushXml.jsの中身。
  SyntaxHighlighter.config.bloggerMode = false;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.all();
</script>
ガジェットにはこのように入れる予定です。

それぞれのファイルの中身をそのままコピペしていれても動くはずですが、HTML/JavaScriptガジェットには行数の制限があるようで、そのまま入れると途中で切られてしまう場合があります。

そこでそれぞれのファイルを圧縮します。

CSSファイルはMinify and Compress CSSを使って圧縮します。

JavaScriptファイルは/packer/で圧縮します。

Base62 encodeのチェックをつけていない方が圧縮率が高いです。

shCore.jsはすでに圧縮されているので圧縮不要です。

HTML/JavaScriptガジェットに貼り付けて設定完了



全部で34行になりました。1行の長さはすごく長いです。とくに25行目。

これをBloggerのレイアウトで追加したHTML/JavaScriptガジェットに貼り付けます。

ガジェットの場所はどこでもよいようです。
<pre class="brush: css;">// ココにソースを記述</pre>
あとはこのコードをBloggerのHTMLモードで貼り付けておいて、作成モードでコードをペーストするだけです。

こうすることでいちいち「<」を「&lt;」に書き換える手間が省けます。(Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる参照）
<pre class="brush: xml;first-line:[10];highlight:[11]">// ココにソースを記述</pre>
shBrushXml.jsを使う場合はxmlと書きます。

first-lineで先頭の行番号、highlightでハイライトする行番号を指定できます。

最初はGoogle+にアップグレードしてBloggerのブログを作成、という記事にしたかったのですが、調べれば調べるほどGoogle+の情報公開の範囲の限定方法がわからないのでGoogle+にアップグレードするのはやめました。

参考にしたサイト


SyntaxHighlighter
ソースコードをブログで綺麗に表示させるツール。

/packer/
JavaScript圧縮ツール。

Minify and Compress CSS
CSS圧縮ツール。

Google+ が実名ポリシーを撤廃。任意のプロフィール名を選択可能に - Engadget Japanese
実名を撤廃したといっても好きな名前にできるというわけではなく写真も顔写真でないといけません。

google＋のプライバシーと個人情報を表示させない方法
デフォルトが非公開設定ならわかりやすいですのにね。

次の関連記事:linuxBean14.04(21)Bloggerで使うJavaScriptの開発環境

ブログ検索 by Blogger

Translate

最近のコメント

読込中...

全記事

Created by Calendar Gadget

QooQ