前の関連記事：Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる
？マークがくっついてきてコードがみえない
右上にSyntaxHighlighterへのリンクの緑の?マークがでています。
スクロールするとコードの上に乗っかってきてコードが読めません。
これは前の記事でテンプレートのheadに挿入した部分に
SyntaxHighlighter.defaults['toolbar'] = false;
を追加すれば表示されなくなります。
CSSを編集して縦スクロールバーを非表示にする
http://alexgorbatchev.com/pub/sh/current/styles/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; を追加します。.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
}
そしてまたこのファイルの内容をすべて選択してコピー。
管理画面→テンプレート→HTMLの編集]]></b:skin>
の前にペーストします。
さらに</head>の前に挿入した部分のshCore.cssへのリンクを削除します。
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> <script language='javascript' type='text/javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all(); </script>最終的にこれをテンプレートHTMLの</head>の前に挿入したことになります。
特定の行をハイライト表示する方法
<pre class="brush: css; highlight: [行番号];">と書くことにより特定の行をハイライト表示させることができます。
行番号は「,」で区切って複数指定できます。
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
}
参考にしたサイト
この通りにさせていただきました。他にもカスタマイズが載っています。
ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve
開始行番号変更やタイトル設定の方法も載っています。
0 件のコメント:
コメントを投稿