Markdownの拡張について 画像に対してCSSを指定する コードブロック 数式サポート(Katex) オリジナル設問の作成方法の詳細
Book, Quiz, ChallengeともにMarkdown部分のHTML変換にはmarkedをベースとした独自拡張を使用しています。(CSSはそれぞれで少し異なりますが、HTMLへの変換部分はすべて同じです。)
以下ではMarkdownで使用可能な拡張について説明します。
※詳細のMarkdown記法に関しては「Markdown記法を活用する」をご確認ください。
Markdown記法では画像の幅を指定することができませんが、Track Testでは独自拡張により画像に対して任意のCSSを指定することができます。 (この方法でwidthが明示されない場合は、デフォルトでは参照された画像はwidth:100%で描画されます。)
画像に対してCSSを指定する場合は画像URLの後ろに空白を挟んで""で括って指定します。
Markdown仕様では最後の""で括られた部分は画像のtitle属性とされています。 しかし、実際には先頭の[]の部分でalt属性が指定されているため、ほとんど使用されることはありません。
Track Testではこの部分を画像のtitleではなくstyle属性にそのままマッピングしています。
通常のMarkdown同様3つ以上のバッククォート()を使ってコードブロックを記述することができます。 コードブロックでは自動的にシンタックスハイライトされますが、開始のバッククォートの後ろに言語名を記述することで言語を明示することができます。 また、言語名にplain`を指定することでシンタックスハイライトを無効化できます。
// 言語未指定のコードブロック。汎用的なハイライトが適用されます。 var a = 1;
``` javascript
// 言語を明示したコードブロック
var a = 1;
// シンタックスハイライトを無効化
var a = 1;
Markdown中でKatexを使用することができます。 Katexの文法についてはKatexのドキュメントを参照してください。
(注意) Katexの括り文字には \\\\( 〜 \\\\) を使用してください。 $ はデフォルトの穴埋めの指定文字となっているため使用できません。