サイトで表示するコードを見やすくするsyntaxhighlighterを導入したり設定したり改造したりしたのでその備忘録。バージョンは3.0.83。

導入

まず、syntaxhighlighterのダウンロードページからダウンロード。解凍した中のscriptsフォルダとstylesフォルダを全てサーバーにアップロード。フォルダの中の使いたいスクリプトとスタイルシートをサイトのヘッダーに追加。

<head>
	<script src="scripts/shCore.js"></script> <!-- 必須 -->
	<script src="scripts/shBrushXml.js"></script> <!-- htmlやxmlのコードを書く場合 -->
	<script src="scripts/shBrushJScript.js"></script> <!-- JavaScriptのコードを書く場合 -->
	<script src="scripts/shBrushPython.js"></script> <!-- Pythonのコードを書く場合 -->
	<link rel="stylesheet" type="text/css" href="styles/shCoreDefault.css"> <!-- デフォルトのcss。他のテーマ使いたいなら他のcssを選択 -->
	<script>
		 SyntaxHighlighter.all(); //必須;
	</script>
</head>

実際に使う時はpre要素のクラス属性にクラス名を指定。

<pre class="brush: html"> <!-- htmlを書く時のクラス名 -->
	//ここにhtmlを書く;
</pre>

<pre class="brush: js"> <!-- JavaScriptを書く時のクラス名 -->
	//ここに処理を書く;
</pre>

言語ごとのスクリプトファイルやクラス名については行番号や各行背景色で見やすいソースコードビューライブラリ　SyntaxHighlighterを参照

設定・改造

右上のはてなマークを消す

サイトのヘッダーのscript要素に以下のコードを追加;

<script>
SyntaxHighlighter.defaults['toolbar'] = false; //←追加; 
SyntaxHighlighter.all(); //必須;
</script>

縦スクロールバーを消す

コードは全部表示されているのに縦スクロールバーが出るのは見栄えが悪いので、cssを編集する。shCoreDefault.cssの55行目辺りにある.syntaxhighlighterセレクタの中に以下の宣言を追加。
```
.syntaxhighlighter {
	overflow-y: hidden !important; /* 追加 */
}
```
1行ごとに色を変える

いわゆるしましまにする。shCoreDefault.cssの231~234行目辺りにある.syntaxhighlighter .line.alt1と.syntaxhighlighter .line.alt2のbackground-colorプロパティの値を変える。
```
.syntaxhighlighter .line.alt1 {
	background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
	background-color: #f8f8f8 !important; /* 変更 */
}
```
行を折り返す

長いと横スクロールバーが出るので横スクロールバーを消すために行を折り返す。shCoreDefault.cssの71行目辺りにある.syntaxhighlighter .lineセレクタを以下のように変更。
```
.syntaxhighlighter .line {
	white-space:pre-wrap !important; /* 変更 */
	word-wrap: break-word !important; /* 追加 */
}
```
行番号を消す

行を折り返すと、行番号が適切でなかったり、ブラウザによっては行番号がずれたりするので行番号を消す。サイトのヘッダーのscript要素に以下のコードを追加。
```
<script>
SyntaxHighlighter.defaults['gutter'] = false; //←追加;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all(); //必須;
</script>
```
参照： Syntaxhighlighter3.0.83で長い行を折り返して表示する
borderをつける

コードを書いている部分と文章をしっかり分けたほうが見やすいのでborderをつける。shCoreDefault.cssの55行目辺りにある.syntaxhighlighterセレクタの中に以下の宣言を追加。
```
.syntaxhighlighter {
	border: 1px solid #ddd !important;
}
```
タイトル部分の色を変える

pre要素のtitle属性にタイトルをつけると1行目にタイトルが表示される。その部分の色を変える。shCoreDefault.cssの243行目辺りにある.syntaxhighlighter table captionセレクタの中を変更。
```
.syntaxhighlighter table caption {
	color: #76daff !important; /* 変更 */
	background-color: #3d3d3e !important;　/* 追加 */
}
```

その他色々

タイトル部分のpadding調整

.syntaxhighlighter table caption {
	padding: 0.5em !important; /* 変更 */
}

コード部分のpadding調整

.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
	padding: 0 0.5em !important; /* padding-leftから変更 */
}

.syntaxhighlighter table td.code {
	padding: 0.5em 0 !important; /* 追加 */
}

Web活

「その他」カテゴリーアーカイブ

SyntaxHighlighterの導入と設定・改造

導入

設定・改造