SyntaxHighlighter | ユーザー定義 | オプション設定の変更

Tags:

SyntaxHighlighterでは、行番号の表示有無や特定行の強調表示など、さまざまな設定項目を変更できる。ここでは、オプションを設定する方法について説明する。

オプションの設定方法

設定を変更するには、SyntaxHighlighter.all()を実行する前に、変更したい項目へ値を設定する。この方法で設定すると、同じページ内にあるすべてのソースコードに設定が適用される。

<script type="text/javascript">
  SyntaxHighlighter.defaults['項目1'] = 値1;
  SyntaxHighlighter.defaults['項目2'] = 値2;
  ...
  SyntaxHighlighter.all();
</script>

特定のソースコードだけ設定を変更するには、pre要素またはscript要素のクラスに、必須項目であるbrush:言語名とともに設定変更項目を追加する。

<pre class="brush:java;項目1:値1;項目2:値2">
...
</pre>

目的に応じて使い分ける。

行番号を非表示にする（gutter）

行番号は標準で表示される。非表示にするには、gutter項目をfalseに設定する。次のいずれかの方法で設定する。

<script type="text/javascript">
  SyntaxHighlighter.defaults['gutter'] = false;
  SyntaxHighlighter.all();
</script>

<pre class="brush:java;gutter:false">
...
</pre>

行番号を非表示にすると、次のように表示される。

  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter gutter

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
  <script type="text/javascript">
    //SyntaxHighlighter.defaults['gutter'] = false;
    SyntaxHighlighter.all();
  </script>
</head>
<body>
  <h1>SyntaxHighlighter</h1>
  
<pre class="brush:java;gutter:false">
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}
</pre>
  
</body>
</html>

開始行番号を指定する（first-line）

行番号を表示する場合、標準では最初の行が1から始まる。任意の番号から開始するように指定するには、first-line項目に開始行番号を設定する。次のいずれかの方法で設定する。例では行番号が7から始まるようにしている。

<script type="text/javascript">
  SyntaxHighlighter.defaults['first-line'] = 7;
  SyntaxHighlighter.all();
</script>

<pre class="brush:java;first-line:7">
...
</pre>

開始行番号を指定すると、次のように表示される。

  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter first-line

コードを実行

指定した行番号を強調表示する（highlight）

指定した行を強調するためにハイライト表示する。複数の行を指定する場合は、行番号を1つずつ指定する。highlight項目に、指定する行番号または複数行番号の配列を設定する。次のいずれかの方法で設定する。

<script type="text/javascript">
  SyntaxHighlighter.defaults['highlight'] = 4;
  SyntaxHighlighter.all();
</script>

<script type="text/javascript">
  SyntaxHighlighter.defaults['highlight'] = [2,5,7];
  SyntaxHighlighter.all();
</script>

<pre class="brush:java;highlight:4">
...
</pre>

<pre class="brush:java;highlight:[2,5,7]">
...
</pre>
  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter highlight

コードを実行

ソースコード内にURLが含まれる場合、標準では自動的にリンクが設定されることがある。自動リンクを設定しないようにするには、auto-linksをfalseに設定する。次のいずれかの方法で設定する。

<script type="text/javascript">
  SyntaxHighlighter.defaults['auto-links'] = false;
  SyntaxHighlighter.all();
</script>

<pre class="brush:java ; auto-links:false">
...
</pre>
  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter auto-links

コードを実行

ツールバーを非表示にする（toolbar）

SyntaxHighlighterを使ってソースコードを表示すると、標準設定では画面右上にツールバーが表示される。画面右上にある緑色の疑問符アイコンのことである。

SyntaxHighlighter Java

ツールバーを表示しないようにするには、toolbarをfalseに設定する。次のいずれかの方法で設定する。

<script type="text/javascript">
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
</script>

<pre class="brush:java ; toolbar:false">
...
</pre>

ツールバーを非表示にすると、次のように表示される。

  • 変更前

SyntaxHighlighter Java

  • 変更後

SyntaxHighlighter toolbar

コードを実行

ソースコードを折りたたんで表示する（collapse）

最初はソースコードを折りたたんで隠しておき、画面に表示されたexpand sourceなどのメッセージをクリックするとソースコードが表示されるようにできる。折りたたみ表示を有効にするには、collapseをtrueに設定する。次のいずれかの方法で設定する。

<script type="text/javascript">
  SyntaxHighlighter.defaults['collapse'] = true;
  SyntaxHighlighter.all();
</script>

<pre class="brush:java;collapse:true">
...
</pre>

折りたたんで表示されると、ソースコードはすぐには表示されず、expand sourceリンクが表示される。

SyntaxHighlighter collapse

expand sourceをクリックすると、ソースコードが表示される。

SyntaxHighlighter collapse

コードを実行

–

折りたたみ表示時に表示されるexpand sourceの文字列を変更することもできる。設定方法は次のとおりである。

<script type="text/javascript">
  SyntaxHighlighter.config.strings.expandSource = "msg";
  SyntaxHighlighter.all();
</script>

たとえば、次のように設定すると、

<script type = "text / javascript">
   SyntaxHighlighter.config.strings.expandSource = "ソースコードを表示";
   SyntaxHighlighter.all ();
</script>

次のように表示される。

SyntaxHighlighter collapse

コードを実行