ソースコードを綺麗に表示できていますか？ 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-linksauto-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は、追加でスタイルを指定したい場合に利用します。
例えば枠線追加できます。
<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は、折りたたみ表示が行えます。 デフォルトは、"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 件のコメント:
コメントを投稿