2012/12/14

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;"といった指定になります。

最後に

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

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

0 件のコメント:

コメントを投稿

ブログ アーカイブ