師匠の散歩

数式書いてみよ TEXTEX

はじめに

HTMLページで数式をきれいに書くのに、JavaScriptで記述された MathJax というのが利用できるようです。さらに探すと、最近はレンダリングが早いのが特徴のKatexというのが見つかりました。本サイトでの数式に応用するにあたり、「師匠が使うならこんな感じ」な部分を忘備録として残そうと思います。

なお、MathJaxおよびKatexが数式をレンダリングするのにタイムラグが発生します。特にMathJaxのほうが表示時間が長く、ページを表示しおわるまで数秒間かかることが多々あります。また、レンダリング失敗時は再表示F5キーを押していただくと改善しますが、何度かリトライする必要がある場合があります。以上をご了承の上閲覧をお願いします。

ちなみに、本シリーズのフォルダはtextexで、本来の読み方はテックテックとなるべきですが、日本の悪習にかぶれた師匠はついてふてふと読みたくなります。もちろんこのときの発音は [tʃᴐː tʃᴐ] ではなく [tef tef] です。 さらに、ロゴのTEXTEXは、Script利用の変換ではなく、CSSによる位置変更で作成しています。

確認した環境

System
Windows10 Pro
Browser
FireFox 74.0, IE 11,Chrome 81.0

MathJaxとKaTeXの同時比較

個別

まずはMathJaxから

  1. はじめに
    1. MathJaxって何?
    2. 参考サイト
    3. 制約条項(有料・無料)
  2. 導入編
    1. mathJaxを使えるようにするには
    2. MathJaxのWebサイトから呼び出す
    3. ダウンロードして使えるようにする
  3. 設置編
    • 基本構文
    • 適用できるHTML要素
    • エラー処理
    • 基本構文-2
  4. 変数編
    • 下付き、上付き、上下つき
    • ギリシャ文字・ローマン数字
    • 数学記号
    • 集合
    • 順列・組合せ
    • 図形・角
    • 特殊文字 点・丸
    • 特殊文字 マーク
    • 矢印
    • 空白/隙間/間隔/改行
    • カッコ
    • 文字サイズ
    • 式の文字フォント
    • テキスト文字のフォント
    • 特殊文字 その他
    • 囲み文字
    • ロゴ
  5. 関数編
    • 四則演算
    • 指数・対数
    • 三角関数
    • 絶対値
    • 微分・積分
    • 行列
    • CSS(style定義)
  6. begin{} end{}の使い方

適用例

KaTeX もええでぇ

  1. はじめに
    1. katexって何?
    2. 参考サイト
    3. 制約事項
  2. katexの簡単設置ページ
    1. HTML5 / XHTML1.0 Strict
    2. HTML4.01 Transitional / HTML4.01 Strict
    3. Doctype宣言なし 動作せず
  3. 設置編
    • 基本構文
    • 適用できるHTML要素
    • エラー処理
    • 基本構文-2
  4. 変数編
    • 下付き、上付き、上下つき
    • ギリシャ文字
    • 数学記号
    • 集合
    • 順列・組合せ
    • 図形・角
    • 特殊文字 点・丸
    • 特殊文字 マーク
    • 矢印
    • 空白/隙間/間隔/改行
    • カッコ
    • 文字サイズ
    • 式の文字フォント
    • テキスト文字のフォント
    • 特殊文字 その他
    • 囲み文字
    • ロゴ
  5. 関数編
    • 四則演算
    • 指数・対数
    • 三角関数
    • 絶対値
    • 微分・積分
    • 行列
    • CSS(style定義)
  6. begin{} end{}の使い方

適用例


履歴


Topに戻る