Blogger:SyntaxHighlighter(2)表示をカスタマイズ-p--q

前の関連記事：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/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; 
}

7行目をハイライトしてみました。

参考にしたサイト

BloggerにソースコードをハイライトするSyntaxHighlighterを導入する | DevAchieve
この通りにさせていただきました。他にもカスタマイズが載っています。

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす | DevAchieve
開始行番号変更やタイトル設定の方法も載っています。

Blogger:SyntaxHighlighter(2)表示をカスタマイズ

前の関連記事：Blogger:SyntaxHighlighter(1)ブログにソースコードを綺麗に表示させる

？マークがくっついてきてコードがみえない

CSSを編集して縦スクロールバーを非表示にする

特定の行をハイライト表示する方法

参考にしたサイト

次の関連記事:Blogger:SyntaxHighlighter(3)iOS Safariで行番号がずれる問題を解決

0 件のコメント:

コメントを投稿

ブログ検索 by Blogger

Translate

最近のコメント

全記事