SyntaxHighLighterの改行アイコンを消す方法

以前こちらの記事でSyntaxHighLighterの導入方法を書きました。

初期設定でも問題なく使えるのですが、改行アイコンが邪魔だったため消しました。

改行アイコンを消すことでツールバーのアイコンが消えてしまいます。

少しそこでつまずいたのでメモします。

（１）bloggerの「テンプレート⇒HTMLの編集⇒続行」に貼り付けたSyntaxHighLighterのコードから下記1行を消去して「テンプレートを保存」。

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>

（２）http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.cssにアクセスしてcssの内容をコピー。

（３）bloggerの「カスタマイズ⇒アドバンス⇒（スクロール下）CSSを追加」からコピーしたcssの内容を貼り付け。

（４）cssの下記箇所を修正。
　display～の行を修正するだけでも問題ありません。
padding～、text～は改行テキストのパディングとインデントの指定になるため必要であれば残してください。

・修正前

.syntaxhighlighter .line .content .block
{
    display: block !important;
    padding-left: 1.5em !important;
    text-indent: -1.5em !important;
}

・修正後

.syntaxhighlighter .line .content .block {
 background: none !important;
}

（５）urlの相対パスを、以下のように絶対パスに修正（4箇所）。
cssをbloggerに記述したことによって、ツールボックスのアイコン（png）が表示されなくなります。
pngファイルを読み込む際にcssと同ディレクトリを参照しますが、bloggerには該当のpngファイルが存在しないためです。

・修正前

 background-image: url(magnifier.png) !important;

 background-image: url(page_white_code.png) !important;

 background-image: url(printer.png) !important;

 background-image: url(help.png) !important;

・修正後

 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/magnifier.png) !important;

 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/page_white_code.png) !important;

 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/printer.png) !important;

 background-image: url(http://alexgorbatchev.com/pub/sh/2.0.320/styles/help.png) !important;

【参考サイト】
SyntaxHighlighter2.0の使い方 | Web制作支援 | ShanaBrian Website

長いソースをはみ出さずに投稿する方法

SyntaxHighLighter2.x系で長いソースがはみ出ないようにする方法をメモ。

（１）bloggerの「テンプレート⇒カスタマイズ⇒アドバンス⇒CSSを追加」へ以下のコードを記載。

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
}

【参考サイト】
pre要素で折り返しをするためのCSS: 小粋空間

bloggerへのSyntaxHighLighter（ver2.0.320）の導入

bloggerへのSyntaxHighLighterの導入方法は調べれば出てくるのですが、ver3.x系の導入方法が多いですね。

ver3.x系はソースコードの改行表示に対応してなかったので、自分はver2.x系（ver2.0.320）を導入しました。

以下、導入の際のメモです。

（１）How to Add Syntax Highlighter(v3) to Blogger Blogsにアクセス
（２）サイト内の「GENERATE　SCRIPTS」をクリック
（３）「Select a Theme」でbloggerへ表示するSyntaxHighLigherのテーマを、「Select Brushes」でSyntaxHightLigherを適用させたいコードを選択。
（自分はテーマは「default」コードはSQL、CSS、JavaScript、Xml、Javaを選択しました）
（４）選択したら「Generate」をクリック
（５）下記コードが表示されるのでコピー

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

（６）上記はver3.0.83（2012.11.15時点）なのでメモ帳などに貼り付けて、コードのhttp://alexgorbatchev.com/pub/sh/current/currentの部分をhttp://alexgorbatchev.com/pub/sh/current/2.0.320へ修正

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

（７）bloggerの「テンプレート⇒HTMLの編集⇒続行」から、上記コードを</head>の直前へ貼り付ける。

これでbloggerでのSyntaxHighLighterの導入は完了です。

bloggerへのソースの投稿方法は調べると出てくるので割愛。。

ただし、上記のままだと長いソースを投稿した際にソースがはみ出る場合があります。

はみ出さないようにする設定方法はこちらの記事で記載します。


【参考サイト】
・導入方法
BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
暇つぶし: Syntax Highlighter
・verによる違い
SyntaxHighlighter - ソースコードを見やすく表示させるJavaScript - 道すがら講堂
・ver2.0.320について SyntaxHighlighter 2.0.320 の使い方 - NAVER まとめ