Web

MathJax を試してみました。

投稿日:2017年7月6日 更新日:

MathJax は、HTML上で数式を美しく表示するための JavaScriptライブラリです。

基本的な使い方は、

  1. HTMLファイルに以下を記述して MathJax.js を読み込みます。
  2. HTMLファイルに LaTeX形式で式を書き、\[\] で囲みます。もしくは、バッククォートで囲みます。

こうしておけば、MathJax が数式を美しいHTML表現に変換してくれます。

以下のページで試してみました。

デモページ

? MathJax のテスト

また、これと似たサービスとして、iTex2Img – Online Latex Equation Editor があります。
こちらは、LaTeX形式で数式を書くとそれを画像に変換してくれますので、あとは HTMLファイルにその画像を埋め込むという使い方になっています。画像ですので、拡大縮小してしまうと汚くなってしまいますし、細かい調整が難しいです。その点 MathJax は、あくまで フォントとHTMLで表示してくれますので、キレイですしCSSによる調整も可能です。

MathJaxで生成した数式(のスクリーンショット画像)
iTex2Img で生成した画像

formula というウェブサービスもありますが、これは iTex2Img とだいたい同じです。

※ TeXの記号を調べる場合は、https://ftp.yz.yamagata-u.ac.jp/pub/CTAN/info/symbols/comprehensive/symbols-a4.pdf などが参考になります。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Chrome

Chrome のアドレスバーから任意のサイトの検索機能を使用する方法

目次1. Chrome の検索エンジン管理機能2. 任意サイトの検索機能を Chrome に追加して使用する1. アルクのサイトで検索したときの URL を調査する2. 検索エンジンとして追加する3. …

DokuWiki

DokuWiki のプラグイン開発に関する情報

DokuWiki をなるべくスマートにカスタマイズしようとすると(設定変更以上のことをやりたい場合です)、テンプレートかプラグインを自作せざるを得ません。他の方法があまり用意されていないためです。 テ …

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

BULMA

Bulma (CSS フレームワーク) のサンプルページを作りました

目次概要Flexbox をフルに活用しているシンプルなグリッドシステム学習が容易カスタマイズが簡単JavaScript は含まれていない。サンプルページBulma 公式サイトおわりに 概要 Bulma …