ayu-mushi's website
Madokoでサイト作りました
- Published
2016-10-5 - Last Modified
2017-09-23
- Source of This Page(GitHub)
- https://github.com/ayu-mushi/ayu-mushi.github.io/blob/develop/src/article/new-site-is-started.mdk
1. 作った
これからサイトをやっていきます。例えば記事とかを書きますよ。
この記事では、筆者のことと、サイトを作るときに使わせてもらった技術とを紹介します。
2. 自己紹介
ayu-mushiといいます。
Haskell、計算機科学などに関心があります。
あとはトップページに使ってるSNSなどへのリンクが貼ってあるので見て下さい。
3. Madoko
本サイトで記事を生成するのに使いました。
Madokoは色々な拡張を提供した高機能なMarkdownプロセッサーです。プログラミング言語Kokaの開発者Daan Leijen氏によって、Kokaで書かれました1。 名前は“Markdown in Koka”に由来します(, 2016)。
公式サイトは“Welcome to Madoko”。
BibTeXかCitation Languageかによる参考文献の管理、 LaTeXによる数式描画、 amsthmのHTML版、 あらゆる要素のナンバリングと参照(番号は表示しないようにもできる)、 をサポートしているため、学術文書の執筆に適しています。
同じソースからPDFもHTMLも出力できます。 テストとして、サイト作りました PDF版としてこのページのPDF版をアップしました。 PDF出力には、LaTeXとXeLaTeXとが使えます。 PDFで日本語を使う場合、XeLaTeXを使用し、フォントを指定する必要があります。 具体的なコードは、madokoを使う | 情報分析・システム開発のタロスカイ株式会社を参照して下さい。
ブロックやインライン要素に対して、css風のセレクタや、挿入・置換、などの機能があり、拡張性が高いです。
ちなみに、設定は色々いじったのでこのサイトに変なところがあってもMadokoのせいとは限りません。 このサイトの設定ファイルは“ayu-mushi.github.io/myprelude.mdk at develop · ayu-mushi/ayu-mushi.github.io · GitHub”として公開しました。
以下では機能の紹介とテストのために、サンプルを挙げます。
3.1. 文献言及(citation)
例えば、Madoko Reference[@Leijen201604]を参照。
見よ!
ぐへへへ[@Leijen201604]。3.2. 数式
$\sum _ {i}^{n}$数式は、LaTeXで描画され、svg画像として出力されます。 また、MathJaxなどで数式を描画するような設定にもできます。 LaTeXの方は、パッケージが使える(MathJaxでもあるものは使えます)ので、可換図式なども通常のLaTeXと同じように書けます。
Package: tikz-cd
TikzCd { replace:"~ Math &nl; \begin{tikzcd}&source;\end{tikzcd}&nl;~ &nl;" }~ TikzCd
A \arrow{rd} \arrow{r}{\phi} & B \\ & C
~3.3. リスト
* A
* B
被定義項A
: 定義項A
被定義項B
: 定義項B
1. A
2. B
3.4. 定理環境
~ Theorem {#javataro_thm; caption: "定理A"}
~~ Proof
すごい証明。
It is proof.
~~
~
~ Theorem {caption: "███の定理"}
~~ Proof
███
~~
~
Theorem [#javataro_thm]. を参照デフォルトでは定理、証明といった言葉は英語でしたが、以下のreplacerで日本語に変えました。
.theorem { replace: "/Theorem/定理/" }
.proof { replace: "/Proof/証明/" }replacerでは、css風のセレクタに対し、正規表現でどう置換するかを指定できます2。
3.5. 脚注
脚注![^1]
[^1]: ちなみに、3.6. 自分で定義したやつ
3.6.1. ルビ
Madokoの置換を利用して定義。
&source;が置換元の内容を表す変数。
.ruby { replace: "<ruby><rb>&source;</rb><rp>《</rp><rt>&rtext;</rt><rp>》</rp></ruby>" }* [死喰い人]{.ruby; rtext: "デスイーター"}
* [獅子]{.ruby; rtext: "ライオン"}3.6.2. サンプルコード記法
この記事で使われたMadokoによるMadokoに対するサンプルコード記法は公式のレファレンスに載っているものを参考にして書きました。
Sample { replace: "~ Begin Sampleblock {.panel .panel-default}&nl;\
~ Begin samp-code-body {.panel-body}&nl;\
````madoko&nl;&source;&nl;````&nl;\
~ End samp-code-body&nl;\
~ Begin samp-code-footer {.panel-footer}&nl;\
&source;&nl;\
~ End samp-code-footer&nl;\
~ End Sampleblock&nl;\
"}サンプルコード記法のサンプルコード
~ Sample
**こんにちは!!**
δ
-----そう
......なんだって
~