前の関連記事: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をカスタマイズする
55 56 57 58 59 60 61 62 63 |
.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% ; } |
62行目はiOS Safariでの行ずれを防ぐためのものです。(Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決参照。)
SyntaxHighlighterの環境設定
SyntaxHighlighter - Configurationに解説があります。
1 2 3 4 5 6 |
< 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ガジェットにいれることにします。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
< 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ガジェットに貼り付けます。
ガジェットの場所はどこでもよいようです。
1 |
< pre class = "brush: css;" >// ココにソースを記述</ pre > |
こうすることでいちいち「<」を「<」に書き換える手間が省けます。(Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる参照)
1 |
< pre class = "brush: xml;first-line:[10];highlight:[11]" >// ココにソースを記述</ pre > |
first-lineで先頭の行番号、highlightでハイライトする行番号を指定できます。
最初はGoogle+にアップグレードしてBloggerのブログを作成、という記事にしたかったのですが、調べれば調べるほどGoogle+の情報公開の範囲の限定方法がわからないのでGoogle+にアップグレードするのはやめました。
参考にしたサイト
SyntaxHighlighter
ソースコードをブログで綺麗に表示させるツール。
/packer/
JavaScript圧縮ツール。
Minify and Compress CSS
CSS圧縮ツール。
Google+ が実名ポリシーを撤廃。任意のプロフィール名を選択可能に - Engadget Japanese
実名を撤廃したといっても好きな名前にできるというわけではなく写真も顔写真でないといけません。
google+のプライバシーと個人情報を表示させない方法
デフォルトが非公開設定ならわかりやすいですのにね。
0 件のコメント:
コメントを投稿