SyntaxHighlighterのCSSをカスタマイズしてみる

Brogramming with Tom
photo credit: ryanoshea via photopin cc



SyntaxHighlighter CSS


SyntaxHighlighterというものがあります。これを使うことで、コードを綺麗に見せることができます。


しかし、デフォルトの設定がいまいちだったので、カスタマイズしてみることにしました。誰かもっとかっこいい感じにしてください...。


<style>
.syntaxhighlighter {
border: 1px solid #999999; /* 枠のサイズ、形態、色 */
/* 以下、角丸 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
line-height: 1.5em !important; /*行間調整*/
}

.syntaxhighlighter table td.gutter .line {
padding: 0 6px 0 13px !important;
}

/* タイトル */
.syntaxhighlighter table caption {
text-align: left !important; /* 文字位置 左揃え */
padding: 0.5em 0 0.5em 0.5em !important; /* 余白設定 上右下左の順 *
color: #999999 !important; /* タイトル文字の色 */
border-bottom: 2px solid #999999 !important; /* 下線のサイズと形態と色 */
background-color: #F5F5F5 !important; /* 背景の色 */
/* 以下、角丸 (意味ないかもしれません)*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
</style>


ちなみに、ツールバー[?]などを非表示にしたい場合は、以下のようにします。

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.defaults[&#39;toolbar&#39;] = false;
</script>



HTMLは以下のように書きます。言語とタイトル、ハイライトする行などを指定できます。

<pre class="brush: 言語; highlight: [ハイライトする行。1,4,8などと書くと複数行]; title: 'タイトル';"></pre>