SyntaxHighlighterの設定項目 Ver 3.0

ソースコードを綺麗に表示できていますか？ Ardor(@ArdorOnline)です。 今回は、SyntaxHighlighterをより使いこなす為の設定をご紹介します。

オプション一覧

まずはどんなオプションがあるのかご紹介します。

オプション	意味
auto-links	ソースコード中URLのリンク表示
class-name	スタイルクラスの追加設定
collapse	ソースコードの折りたたみ表示
first-line	開始行番号の指定
gutter	行番号の表示設定
highlight	特定行のハイライト表示設定
html-script	htmlをハイライト表示する。 javascriptなど混在している際に設定
light	ソースコード表示を軽くする。 行番号等は表示されない
smart-tabs	スマートタブで整形するかどうか設定
tab-size	タブサイズを設定
pad-line-numbers	行番号の桁数指定
toolbar	ツールバーの表示設定

使用例と表示

auto-links

auto-linksは、デフォルトで"true"が設定されていて、リンク表示になります。 リンク表示でなくしたい場合は、"false"を指定します。

<pre class="brush: html; auto-links: true">
<div>
http://blog.asterlist.com
</div>
</pre>

http://blog.asterlist.com

http://blog.asterlist.com

class-name

class-nameは、追加でスタイルを指定したい場合に利用します。
例えば枠線追加できます。

<style type="text/css">
.source-code {
  border: 1px solid #999;
}
</style>
<pre class="brush: js; class-name: source-code;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

collapse

collapseは、折りたたみ表示が行えます。 デフォルトは、"false"です。折りたたむときは、"true"を指定します。

<pre class="brush: js; collapse: true;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

first-line

first-lineは、行の開始番号を指定できます。

<pre class="brush: js; first-line: 10;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

gutter

gutterは、行番号を非表示にできます。 デフォルトは、"true"です。行番号を非表示にするには、"false"を指定します。

<pre class="brush: js; gutter: false;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

highlight

highlightは、特定の行を強調できます。 また複数行指定も可能です。

<pre class="brush: js; highlight: [1,3];">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

html-script

html-scriptは、jsとhtmlが混在しているときに両方修飾することができます。

<pre class="brush: js; html-script: true;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

light

lightは、ソースコード表示を軽くします。

<pre class="brush: js; light: true;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

tab-size

tab-sizeは、タブサイズを指定できます。

<pre class="brush: js; tab-size: 2;">
<script type="text/javascript">
function getCode() {
 return "code";
}
</script>
</pre>

pad-line-numbers

pad-line-numbersは、行番号に0を付与するゼロパディングを指定できます。 また、行番号の余白を最大番号に合わせて調節できます。

<pre class="brush: js; pad-line-numbers: 3;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

toolbar

toolbarは、ソースコード表示の右上にある「?」を非表示に設定できます。

<pre class="brush: js; toolbar: false;">
<script type="text/javascript">
function getCode() {
  return "code";
}
</script>
</pre>

smart-tabs

smart-tabsは、タブでの整形をサポートしているようです。 HTML上では見栄えの変化がイマイチわからないので、省略します。

設定は、"smart-tabs: true;"といった指定になります。

最後に

いかがでしたでしょうか？
設定できるオプションが多いので、ソースコードに合わせて細かく設定してみてください。

最後までお読み頂きありがとうございます。