2016年4月22日

Prism.js使用中

このブログのソースコードハイライトはPrism.jsを使っている.使い始めた時から少し変わっているので,改めて書いておく.

ダウンロードして使う場合は公式ページから落とせばよさそう.CDNはcdnjsjsdelivrにある.ここではjsdelivrを使っている.とりあえずこんな感じ.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- コアスクリプト -->
<script src='https://cdn.jsdelivr.net/prism/1.4.1/components/prism-core.min.js'></script>
<!-- C++ -->
<script src='https://cdn.jsdelivr.net/prism/1.4.1/components/prism-clike.min.js'></script>
<script src='https://cdn.jsdelivr.net/prism/1.4.1/components/prism-c.min.js'></script>
<script src='https://cdn.jsdelivr.net/prism/1.4.1/components/prism-cpp.min.js'></script>
<!-- スタイルシート -->
<link href='https://cdn.jsdelivr.net/prism/1.4.1/themes/prism.css' rel='stylesheet'/>
<!-- COYスタイル -->
<link href='https://cdn.jsdelivr.net/prism/1.4.1/themes/prism-coy.css' rel='stylesheet'/>
</head>
<body>
<pre><code class="language-cpp">#include &lt;iostream&gt;
int main(int argc,char *argv[]){
    std::cout &lt;&lt; "Hello World!" &lt;&lt; std::endl;
    return 0;
}
</code></pre>
</body>
</html>

要するに,必要な.jsと.cssを読み,ハイライトしたい部分を<pre><code>で囲めば良い.こういう風にインラインでやる場合は,<pre></pre>を外して,単に

<code class="language-html">&lt;pre&gt;&lt;code&gt;</code>
とする.<code>のclassで言語を指定する.language-(言語名)となる.使う言語はコアとは別に用意されているので,別途読まなければならない.大体prism-(言語名).min.jsで用意されている.htmlはmarkupという名前で用意されているので注意.次のようにしておけばlanguage-htmlと書ける.

<script>
Prism.languages.html = Prism.languages.markup;
</script>

スクリプトには依存関係がある.とりあえず気がついたのは

  • prism-core.min.jsは必須で,最初に読む必要がある.
  • C++用のprism-cpp.min.jsより前にC用のprism-c.min.jsを読む必要がある.
  • C用のprism-c.min.jsより前にCっぽい用のprism-clike.min.jsを読む必要がある.

デフォルトだと高さが制限されていたり,スクロールバーが出たりするので,次のようにして解除している.

<style>
pre[class*="language-"] > code[data-language]{
    max-height: none;
    overflow: auto;
}
</style>

この辺はテーマにより違うっぽい.なかなかややこしい…….

0 件のコメント:

コメントを投稿

コメントの追加にはサードパーティーCookieの許可が必要です