にっき♪: Prism.js使ってみた

新しい情報を書いてみました．

昨日のHTMLのシンタックスハイライト，Prism.jsを使ってみている．実は昨日iの段階ではhighlight.jsを使っていたんだけど，昨晩切り替えた．切り替えた理由はPrism.jsの方が新しいっぽかったから．KaTeX同様新しいものを使ってみようかと．一覧があったのでそこから適当に選んでみた．

ただKaTeXと違ってものによって実際の記事の書き方を変えないとならないのが難点．KaTeXでもMathJaxでもTeX的な書き方をすればいいだけだけど，シンタックスハイライトを行うやつの場合はライブラリに応じた書き方をしないとならない．つまり後から変えると記事を全部書き換える必要が出てくるので，あまり消えそうなやつは選べず．

公式ページには書いていないんだけど，CDNがあったのでそれを使うことに．ダウンロードしても置き場をどこにするか悩まないとならないし．というわけでこんな感じ．

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- スクリプトとスタイルシートのロード -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css' rel='stylesheet'/>
</head>
<body>
<pre><code class="language-markup">&lt;html&gt;
&lt;body&gt;
Test
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</body>
</html>

普通にダウンロードした場合は拡張プラグインやテーマを選べるんだけど，CDNからは今は選べず．多分全部ロードされてスタイルはデフォルトになっているんだと思う．拡張が全部入っているのはちとうざい．ソース内のhttp://がリンクされたりしているのはそのせい．まぁそのうち改善されるかと．基本的には<pre><code>で囲めばよいようだ．codeのclassで言語を指定する．language-(言語名)なんだけど，HTMLの言語はmarkup．次のようにしておくとlanguage-htmlとかけるようになる．

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

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

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

ダウンロードしたのでも試してみたけど，max-heightやoverflowがどこに設定されているかはテーマによるらしい．なかなかややこしい．

言語の方は用意されているのは最小なのかな？LaTeXがないのでコピーしてきて追加．

<script>
Prism.languages.latex={comment:/%.*?(\r?\n|$)$/m,string:/(\$)(\\?.)*?\1/,punctuation:/[{}]/,selector:/\\[a-z;,:\.]*/i};
</script>

これでlanguage-latexでLaTeXがハイライトされる．

\documentclass{jsarticle}
\begin{document}
\LaTeX ソースのハイライト．数式：$f(x) = x^2$．
\end{document}

.bstはなかった．ってか普通にあったはてなダイアリーが恐ろしいのだけど．割と言語の追加は簡単っぽいので，必要になったら追加かな．

にっき♪

2015年4月23日

Prism.js使ってみた

0 件のコメント:

コメントを投稿