トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 21 2012

  • SyntaxHighlighter 3.0.83 導入手順

  • 掲載カテゴリ : ノウハウ集
前のBlogでも使用していたSyntaxHighlighterでCode表示が綺麗に見えるので最新Version（2012/8/21時点）を適用してみました。
以下、導入手順を簡単にまとめました。

１． SyntaxHighlighterのダウンロード
SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/)から3.0.83をダウンロード

２． 必須ファイルを抽出

「shAutoloader.js」
「shBrushXml.js」
「shCore.js」
「shLegacy.js」
「shCore.css」
「shCoreDefault.css」

３． 必要なCodeに対応したファイルを抽出

"shAutoloader.js"が必要に応じて読みだしてくれるようなので「scripts」フォルダにあるjsファイルを全部アップしてもよいようですが、(自分が)使いそうなファイルを抽出しました。

<参考>私は下記のファイルを抽出しました。
「shAutoloader.js」
「shBrushCss.js」
「shBrushJava.js」
「shBrushJScript.js」
「shBrushPlain.js」
「shBrushXml.js」
「shCore.js」
「shLegacy.js」
「shCore.css」
「shCoreDefault.css」

４． cssファイル修正
(1) IE、Google Chromeで縦スクロールバーが常に表示される場合の対処
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  overflow-y: hidden !important;  /* 追加 */
}


(2) IEで表示すると最後の1行が表示されない場合の対処
.syntaxhighlighter table {
  width: 100% !important;
  margin-bottom: 1em !important;  /* 追加 */
}

(3) お好みで色修正
.syntaxhighlighter .line.alt1 {
  background-color: white !important;  /* first lineを好みの色にします (white -> #fdfdfd 等) */
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;  /* second lineを好みの色にします (white -> #f7f7f7 等) */
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important; /* highlight lineを好みの色にします (#e0e0e0 -> #f8f9d1 等) */
}
※あとは、お好みで文字色やハイライト行の色を変更します。

５． ファイルをアップロード

４で修正したファイル含めて３のファイル全てブログサイトにアップロード

６． HTMLファイル修正

(1) <body>の前に下記の2行を追加
<link type="text/css" rel="stylesheet" href="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCoreDefault.css"/>

(2) </body>の前に下記の行を追加
<!-- begin:SyntaxHighlighter -->
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shCore.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shAutoloader.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shLegacy.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushXml.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
SyntaxHighlighter.autoloader
(
"css                    http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushCss.js",
"java                   http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushJava.js",
"js jscript javascript  http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushJScript.js",
"text plain             http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushPlain.js",
"xml xhtml xslt html    http://blog-imgs-53.fc2.com/t/r/i/trivialink/shBrushXml.js"
);
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
<!-- end:SyntaxHighlighter -->

基本的な導入は以上ですが、カスタマイズなどいろいろ試してみてください。

コメント

コメントの投稿

   管理者にだけ表示を許可する