まえがき
フロントで使えそうなライブラリが、npmモジュールとしてしか提供されていないときがあります。しかし、npmモジュールは2017.8現在、直接ブラウザが読み込めるものではありません。
こうなると、普段はビルドツールなぞ使わず、雑なジャヴァスクリプトをべた書きしているプログラマ(私)であっても、ビルドツールを使わざるをえません。現在の代表的なビルドツールといえば、webpackです。
さて、世の中的にはふつう、ターミナルが大得意な人たちがモダンでイケてる開発をやるためにwebpackを使っています。ですから、このような雑なニーズに初歩的な操作で対応する方法は、言うまでもないぜという感じであり、意外に転がっていなかったりします。
そこで、このようなことをやる記事を書いてみます。
markdown-it-katex
今回は、Markdownで数式を入力したい人に関係のある
markdown-it-katex というnpmモジュールをブラウザに読み込ませてみます。
（以下は記事の主題とは無関係なので読み飛ばしてOK）
多くのmarkdownパーサは、その仕様上、$内の\を尊重してくれません。
しかし、数式入力で最もメジャーな記法であるLaTeXにとって\は頻出記号です。
そのままだと、MarkdownとLaTeXの共存に頭をひねる必要があって面倒です。
基本的に markdownの解釈をした後にTeX記法を解釈してるから起こってる問題な気がする・・・。 何が原因かわかるまでめちゃくちゃデバッグしました(ノД`)
from: はてなブログのTeX記法で数式を書く時用のチートシートと注意点
Markdownで数式を書きたい人にとって、$内の\を尊重してくれると嬉しいです。
markdown-it-katexとは、markdown-it のプラグインであり
このプラグインを挟むことでmarkdown-itが$内の\を尊重するようになります。
手順
前提として、Node.jsをインストール済みであることが求められます。
まずは、使いたいモジュールを用意するディレクトリを切り、npmモジュールを取ってきます。
（markdown-it-katexのみならず、markdown-itやjqueryもnpmモジュールとして取ってきています。
ただし、今回の例では、普通に<script>から読み込んでも構いません）
ターミナルを開き、次のコマンドを叩きます。
mkdir xx
cd xx
npm install webpack --save-dev
npm install markdown-it markdown-it-katex jquery
ビルド前のスクリプトを書きます。
// front.js
$ = require("jquery")
md = require('markdown-it')().use(require('markdown-it-katex'))
$(".markdown-body").html( md.render( $(".source").text() ) )
動作確認用のHTMLを書きます。
<!-- index.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css"/>
<div class=markdown-body></div>
<div class=source style="display: none">
# Hello $\KaTeX$ !
</div>
<script src="bundle.js"></script>
webpackの設定を書きます。
これはできるだけ、最小限にしました。
ただしsource-mapはつけていて、これを与えると、
ブラウザのdevtoolsで変換元のソースにもとづきデバグができます。
// webpack.config.js
module.exports = {
entry: './front.js',
output: {
filename: './bundle.js'
},
devtool: 'source-map',
};
ターミナルで、ビルドを実行しましょう。
$(npm bin)/webpack
ここで webpack.config.js を用意することすら面倒な人は、
コマンドに引数を書くことでビルドしても構いません。
$(npm bin)/webpack ./front.js ./bundle.js --devtool source-map
ビルドの結果、ブラウザで読み込め、かつnpmモジュールの諸々が入っている bundle.js ができます。
結果
$ ls
bundle.js
front.js
index.html
webpack.config.js
ブラウザで開いてみましょう。動いていますね。
