SyntaxHighlighterの導入方法

Tweet

Category JavaScript 2018/03/27

問題

SyntaxHighlighter ってやたらとファイルが多いですが、どれをどう使うとよいのですか。

答え

以下を読み込めば使える。

• CSSのCore
• CSSのデフォルトテーマ（もしくは任意のテーマ）
• javaScriptのCore
• javaScriptのBrushを必要なだけ（JS、CSS、php、HTML…）

ソースをダウンロードしてきて自分のサーバーに置いてもよいし、CDNを利用して読み込んでもよい。

例

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.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/shBrushJScript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>

HTML側は、syntax highlight したい要素に、class を付与しましょう。

<pre class="brush:html">
<pre class="brush:css">
<pre class="brush:js">
<pre class="brush:php">

どのBrushを使ったらよいか？は以下の通り。