Blogger に Syntax Highlighter を導入する

ソースコードを綺麗に表示するため、Syntax Highlighterを導入した。 Take2

※以下の導入方法はGoogle blogger 静的テンプレート用です。
→Dynamic Views(動的テンプレート)での導入方法はこちら

やることは大きく分けて下記３つ。

1. SyntaxHighlighter用スクリプトをコピー
2. Bloggerテンプレートにスクリプトを登録
3. ソースコードをPreタグで囲み、記事HTMLに記述

１．SyntaxHighlighter用スクリプトをコピー

Syntax Highlighter Scripts Generatorへ

好みのテーマと有効にしたい言語を選択してGenerate

スクリプトが作られるのでCopy to Clipboardを押してコピー

２．Bloggerテンプレートにスクリプトを登録

Bloggerテンプレート→HTMLの編集へ

</head>タグの直前にコピーしたスクリプトを貼り付け

保存して閉じる

３．ソースコードをPreタグで囲み、記事HTMLに記述

投稿画面のエディタをHTMLモードにする

このページのようにソースコードを加工する

表示したい場所に貼り付け

以上。

以下のように表示されます。

var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
} 

関連ページ：

• SyntaxHighlighter用にソースコードを加工する
• Blogger Dynamic Views に Syntax Highlighter を導入する

参考サイト：

• HTMLエスケープツール
• Syntax Highlighter Scripts Generator

SyntaxHighlighter用にソースコードを加工する

Syntax Highlighterで利用するため、ソースコードをPreタグで囲む方法をメモしておく。

１．貼り付けたいソースコードをコピー

java,css,htmlなんでもいいので貼り付けたいソースをクリップボードにコピーしておく

２．HTMLエスケープ＆Preタグ追加

HTMLエスケープツールへ

"変換前"にコピーしたソースコードを貼り付け

"オプション"はPreで囲むのみチェック、他は外す

"変換"をクリック

３．preタグにclass属性を追加

<pre>の部分を<pre class="brush:java">等に書き換える

brush:xxxの部分は貼り付けたいコードの種類によって書き換える
→使用できるブラシ一覧

このコードを各記事のHTMLに貼り付ける

ここ参照


以上。

参考サイト：

• SyntaxHighlighter
• HTMLエスケープツール

Google Bloggerのフォントをメイリオに変更してみた

もしかして: TextViewのフォントをメイリオに変更してみた 


全体をもうちょっといい感じにしたかったのでフォントをメイリオに変更してみた。

テンプレート　→　HTMLの編集

HTMLの中から「Variable definitions」を検索すると、下の方に「Variable name="・・・font"」があるから、そこに「,'meiryo','メイリオ'」を追加する。

このとき、Arialよりも前に追加しないとメイリオになってくれなかったので注意。

調子に乗っていろんなとこにメイリオ追加した。
page.text.font, menu.font, link.font, blog.title.font, blog.description.font, post.title.font

フォント変えただけだけど、かなり見やすくなった気がする。

参考サイト：emotam no matomeさん

Blogger Dynamic Views に Syntax Highlighter を導入する

ソースコードを綺麗に表示するため、Syntax Highlighterを導入した。

※以下の導入方法はGoogle blogger Dynamic Views用です。

→静的テンプレートでの導入方法はこちら

やることは大きく分けて下記３つ。

1. BloggerテンプレートにCSSを登録
2. ソースコードをPreタグで囲み、記事HTMLに記述
3. 各記事のHTMLにScriptを記述

１．BloggerテンプレートにCSSを登録

Bloggerテンプレート→カスタマイズへ

上級者向け→CSSを追加

下記２つのCSSの中身をコピーして貼り付け

• http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
• http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

ブログに適用ボタンを押して保存

２．ソースコードをPreタグで囲み、記事HTMLに記述

投稿画面のエディタをHTMLモードにする

このページのようにソースコードを加工する

表示したい場所に貼り付け

３．各記事のHTMLにScriptを記述

記事投稿画面のエディタをHTMLモードにする

エディタの一番下に以下のスクリプトを記述

<script src='http://syntaxhighlight-blogger-dynamic.googlecode.com/files/syntaxhighlighter-20111212.js' type='text/javascript'></script> 

以上。

以下のように表示されます。

var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
} 

関連ページ：

• SyntaxHighlighter用にソースコードを加工する
• Blogger に Syntax Highlighter を導入する

参考サイト：

• Easy Code Syntax Highlight on Blogger Dynamic Views
• syntaxhighlight-blogger-dynamic (sbd)
• HTMLエスケープツール
• Syntax Highlighter Scripts Generator