Hilight.js Sample

<div class="hljs-wrap">
  <pre><code class="language-JavaScript">hljs.addPlugin({
  &#39;after:highlightElement&#39;: ({ el, result }) =&gt; {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});</code></pre>
</div>

デフォルトでは以下のように class="language-JavaScript" に指定した言語名（JavaScript）と行番号、コピーボタンが表示されます。

language-xxxx クラスを省略した場合は、自動検出された言語名が表示されます。

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});

行をハイライトするには、pre 要素に data-line-highlight 属性を指定します。

<div class="hljs-wrap">
  <pre data-line-highlight="1, 3-5"><code class="language-JavaScript">hljs.addPlugin({
  &#39;after:highlightElement&#39;: ({ el, result }) =&gt; {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});</code></pre>
</div>

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});

pre 要素に data-show-until 属性を指定すると、指定した行以降を非表示にし、Expand ボタンをクリックすると表示します。

<div class="hljs-wrap">
  <pre data-show-until="4"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

pre 要素に data-max-lines 属性を指定すると、指定した行数だけ表示し、残りはスクロールして見ることができます。

<div class="hljs-wrap">
  <pre data-max-lines="4"><code>...</code></pre>
</div>

<?php
$_POST['name'] = 'xxx';
$name = filter_input(INPUT_POST, "name");
?>
<form method="post">
  <input type="text" name="name" value="">
  <input type="submit" >
</form>
<p>name: <?php echo $name;

アコーディオンパネルでアニメーション表示するには、pre 要素に accordion クラスを指定します。

<div class="hljs-wrap">
      <pre class="accordion"><code class="language-JavaScript">hljs.addPlugin({
  &#39;after:highlightElement&#39;: ({ el, result }) =&gt; {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});</code></pre>
</div>

hljs.addPlugin({
  'after:highlightElement': ({ el, result }) => {
    if(result.language) {
      el.dataset.language = result.language;
    }
  }
});

Highlight.js カスタマイズ サンプル

Highlight.js カスタマイズサンプル