「SyntaxHighlighter」各要素ごとの設定項目


[SyntaxHighlighter 関連記事]

※この記事はIE6でデザインが崩れます。

前回は「SyntaxHighlighter」のconfig(全体)設定をみていきました。今回からは各要素ごとに設定できる項目をみていきます。公式サイトでは「SyntaxHighlighter/Configuration」の「SyntaxHighlighter.defaults」に記載されています。この内容の説明がありましたので引用します。


SyntaxHighlighter.defaults holds all default values
for each highlighted element on the page.
These options are local to each highlighter element
and could be changed individually via parameters described
in the next section.
The list below represent a full list of options
that SyntaxHighlighter 2.0 supports:

訳:
「SyntaxHighlighter.defaults」は、ページ上でハイライトされる
各要素ごとに全てのオプションでデフォルト値をもっています。
これらのオプションは各要素ごとに設定でき、次に記載されている
パラメータを通して自由に変更することができます。
「SyntaxHighlighter2.0」がサポートするオプションは以下の
リストで全てになります。

では各オプションを詳しくみていきます。

auto-links


Allows you to turn detection of links in the highlighted element
on and off.  If the option is turned off, URLs won't be clickable.

訳:
ハイライト要素の中で、リンクの検出をオン/オフにします。
もしオプションをオフにするならば、URLはクリックできなくなります。

コードの中にURLを記述したときに、そのURLをリンクできるかどうかを設定します。デフォルトでは「ON」になっています。オプションをオフにするとクリックできなくなります。

(1)URLをリンクできる

<pre class="brush: javascript; ">
'http://memories.zal.jp/WP/'
</pre>

(2)URLをリンクできない

<pre class="brush: javascript; auto-links: false">
'http://memories.zal.jp/WP/'
</pre>

class-name


Allows you to add a custom class (or multiple classes)
to every highlighter element that will be created on the page.

訳:
そのページで作られるあらゆるハイライト要素に対して、
カスタムクラス(複数クラス可)を追加することができます。

スタイルシートのクラスをオプションとして設定することにより、ハイライト要素のデザインを変更することができます。

<style>
.syntax_sample { border: 2px solid black; }
</style>
<pre class="brush: javascript; class-name:'syntax_sample'">
サンプルコード
</pre>

「syntax_sample」クラスをCSSで設定してみました。
syntaxhlighter_class01
ライブラリにより生成されたタグをみると

class="syntaxhighter syntax_sample"

とそのハイライト要素全体に対してのクラス設定ができました。
class属性は、半角スペースを挟んで連続指定できるようなので、クラス名:synatexhighter と クラス名:syntax_sampleがデザインに反映されます。しかしその子である行番号やコードを表示する箇所にも各クラスが指定されていてデザインが上書きされました。いろいろ触ってみましたが、「class-name」オプションでどこのデザインが変更できるのかよくわかりませんでした。

collapse


Allows you to force highlighted elements on the page
to be collapsed by default.

訳:
ページ上のハイライトされた要素をデフォルトで隠すことができます。

ハイライト要素を最初はみえなくしておいて、クリックすると開くようになります。

<pre class="brush: javascript; collapse: true'">
サンプルコード
</pre>

first-line


Allows you to change the first (starting) line number.

訳:
最初の(スタート)行番号を変更することができます。

<pre class="brush: javascript; first-line: 10">
10行目からはじまります。
</pre>

font-size


Allows you to easily change the font size in the highlighted
elements without having to mess around with additional CSS

訳:
CSSを拡張したりいじったりしなくても、ハイライト要素の
フォントサイズを簡単に変更することができます。

demo」に従って試してみましたがうまくいきませんでした。

<pre class="brush: javascript; font-size: 200%">
フォントサイズ200%
</pre>

gutter


Allows you to turn gutter with line numbers on and off

訳:
行番号欄の表示・非表示を切り替えることができます。

<pre class="brush: javascript; gutter: false;">
サンプルコード
</pre>

highlight


Allows you to highlight one or more lines to focus
user's attention. When specifying as a parameter,
you have to pass an array looking value,
like [1, 2, 3] or just an number for a single line.

If you are changing SyntaxHighlighter.defaults['highlight'],
you can pass a number or an array of numbers.

訳:
ユーザの注意を引く為に、1行以上の行をハイライトすることができます。
パラメータとして明記するとき、「1, 2, 3]のように配列で指定するか、
単に1行だけ指定するときはその行番号を指定します。
もしデフォルト「'highlight'」を変更したいならば、
単に数字を指定するか、または配列で数字を指定するかにより
設定してください。

<pre class="brush: javascript; highlight: [1, 3];">
サンプルコード
</pre>

html-script


Allows you to highlight a mixture of HTML/XML code
and a script which is very common in web development.
Setting this value to true requires that
you have shBrushXml.js loaded and that
the brush you are using supports this feature

訳:
web開発において非常に一般的であるHTML/XMLコードやスクリプトの
混在をハイライトすることができます。この値を正常に設定するのには、
shBrushXml.jsをロードさせること、およびこの機能を使っている
ブラシが必要です

htmlやxmlコードもハイライトする機能です。この機能を使うのには「shBrushXml.js」をロードしておく必要があります。設定することにより下記サンプルでは、htmlタグである「pre」もハイライトされました。

<pre class="brush: javascript; html-script: true">
サンプルスクリプト
</pre>

light


Allows you to disable toolbar and gutter
with a single property

訳:
1つのプロパティでツールバーと行番号欄を非表示にできます。

<pre class="brush: javascript;light: true;">
サンプルコード
</pre>

ruler

Allows you to show column ruler on top of highlighted elements.

訳:
ハイライト要素の上部にカラムルーラを表示することができます。

<pre class="brush: javascript; ruler: true;">
サンプルコード
</pre>

smart-tabs


Allows you to turn smart tabs feature on and off.

訳:
きちんとしたタブ機能を使うかどうか設定します。

公式のデモの方がわかりやすいのでサンプルはデモもみてください。

<pre class="brush: javascript; smart-tabs: true";">
 サンプルコード
</pre>

tab-size


Allows you to adjust tab size.

訳:
タブサイズを調整することができます。

<pre class="brush: javascript; tab-size: 4'">
123412341234
1	2	3
</pre>
<pre class="brush: javascript; tab-size: 8'">
123456781234567812345678
1	2	3
</pre>

toolbar


Toggles toolbar on/off.

訳:
ツールバーの表示・非表示を設定します。

<pre class="brush: javascript; toolbar: false;">
サンプルコード
</pre>

wrap-lines


Allows you to turn line wrapping feature on and off.

訳:
ハイライトを領域として囲むかどうかを設定します。

横長になった場合に、折り返すか横スクロールを出すかの設定です。

<pre class="brush: javascript;wrap-lines: false;">
サンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコードサンプルコード
</pre>


[SyntaxHighlighter 関連記事]

「「SyntaxHighlighter」各要素ごとの設定項目」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です