読者です 読者をやめる 読者になる 読者になる

ポケットにチョコレート

ロハコ大好き子育て主婦が役に立ちそうなことを雑多に。日々節約、ちょっといいこと。

オススメ記事

はてなブログをカスタマイズ - SyntaxHighlighter設定編

はてなブログ

導入編に続き、設定についてです。

公式サイトですと英語で読むのが面倒になってしまうので(笑)日本語で自分用にも使えそうなものを抜粋してまとめておきます。

SyntaxHighlighter.defaults

デフォルト設定としておく場合SyntaxHighlighter.allの前に追記しておきます。

今のところ当ブログで適用させているのはソース内リンク無効のみです。

ソース内のリンクを無効にする:

SyntaxHighlighter.defaults['auto-links'] = false;

ソースを折りたたむ:

SyntaxHighlighter.defaults['collapse'] = true;

スタート行の番号を変更する:

SyntaxHighlighter.defaults['first-line'] = 5;

行番号を非表示にする:

SyntaxHighlighter.defaults['gutter'] = false;

指定行の背景色を変える:

SyntaxHighlighter.defaults['highlight'] = [1, 3 ,5];

ツールバー[?]を非表示にする:

SyntaxHighlighter.defaults['toolbar'] = false;

パラメータとして

部分的に適用したい場合はpreタグの中に記述します。例:

<pre class='brush: html; auto-links: false; first-line: 10;'>...</pre>

 テーマを変える

テーマを差し替えて全体の色などを変えることが出来ます。

公式サイトCSS Themesから選んでlinkタグの中の"shThemeDefault.css"を好きなテーマ名に書き換えます。例(Midnight):