にっき♪: Prism.js使用中

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

ダウンロードして使う場合は公式ページから落とせばよさそう．CDNはcdnjsとjsdelivrにある．ここでは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>

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

にっき♪

2016年4月22日

Prism.js使用中

0 件のコメント:

コメントを投稿