Hamburger menu [an error occurred while processing this directive]

mathjax.site

Ads by Google


サイト内検索 help
複数条件の場合はキーワードの間にスペースを入れてください。

mathjax.siteは、mathjaxとTexのサンプルを集めたサイトです。

mathjaxとTexのコードをコンテンツにしたサイトです。

こんな便利なmathjaxとTexをみんなで使いましょう。

生徒さん学生さん学校の先生や数学・化学好きの方がよく使う定番コードを一覧する予定です。

MathJaxとは、すべてのブラウザで作動するJavascriptによる公開されている数学表記の一種のエンジンです。

HTMLのmathjaxの設定方法（化学付き）

化学付きのmathjaxの設定スクリプトです。

MathJax version 4 mhchem.js 付

https://cdnjs.com/libraries/mathjax


mathjaxの超基本

コメントアウト

コンピューターのプログラムにおいて、特殊な記号を用いてソースコードを無効にすることをコメント‐アウト（comment out）いいます。

バグの修正記録や説明の記載などに利用します。

mathjaxのコメントアウトには、% を用います。

ちなみにHTML5のコメントアウトは、<!-- コメント -->です。

javascriptのコメントアウトは、 // 　（/* コメント */）です。

CSSのstylesheetのコメントアウトは、 /* 　コメント */　　です。

$$ ～ $$ ディスプレイ数式表示

10 × 10 = 100　

を mathjaxで表示します。

mathjaxのソースコード


$$  % ディスプレイ数式表示
% かけ算 \times
     10 \times 10 = 100
$$

結果

$$ % かけ算　\times 10 \times 10 =100 $$




\[ ～　 \] ディスプレイ数式表示

10/2 = 5

を　mathaxで表示します。

mathjaxのソースコード


\[ % ディスプレイ数式表示
%  分数表示　\frac{分子}{分母}
     \frac{10}{2} = 5
\]

結果

\[ % ディスプレイ数式表示
% 分数表示　\frac{分子}{分母} \frac{10}{2} = 5 \]

数式番号が付きません。

＝などを整える”&”も使えません。




\begin{align*} ～　 \end{align*} ディスプレイ数式表示

10/2 = 5

を　mathaxで表示します。


\begin{align*} % ディスプレイ数式表示
% 分数表示　\frac{分子}{分母}
\frac{10}{2} = 5
\end{align*}



結果

\begin{align*} % ディスプレイ数式表示 % 分数表示　\frac{分子}{分母} \frac{10}{2} = 5 \end{align*}

align（位置合わせ可能の別行立て数式）は、複数個の”&”によって1行内で複数個所の位置をそろえられる素晴らしい機能を使うことができます。

とりあえず、& を一個用いた例を示します。


\begin{align*} 
     y &= x + x  
\\
       &=2x
\end{align*}

結果

\begin{align*} y &= x + x \\ &=2x \end{align*}

インライン数式表示 \(　～　\)

文中でmathjaxの文字を表示させます。

関数　y=f(x) は　‥‥

mathjaxのソースコード

関数　\( y=f(x) \) は　‥‥

結果

関数　\( y=f(x) \)は‥‥



インライン数式表示 \$ ～ \$

mathjaxのソースコード

関数　$　y=f(x) $は‥‥

結果

関数　$　y=f(x) $は‥‥



mathjaxの計算例

mathjaxは、webに直接にきれいな数式を表示させることができます。

分数のかけ算

mathjaxのソースコード


\begin{align} % ディスプレイ数式モードは、数式をセンタリングして出力する際に用いるモード
% 数式を記述するにはalign，align*環境を利用 
% align*は、数式番号無し 
% 割り算は、\frac{分子}{分母}
% 掛け算は、\times
 \frac{1}{\cancel{3}} \times \frac{\cancel{6}}{5} 
\end{align}

結果

\begin{align} % ディスプレイ数式モードは、数式をセンタリングして出力する際に用いるモード % 数式を記述するにはalign，align*環境を利用 % align*は、数式番号無し % 割り算は、\frac{分子}{分母} % 掛け算は、\times \frac{1}{\cancel{3}} \times \frac{\cancel{6}}{5} \end{align} 


\[   %ディスプレイ数式モードの別表現
% \color{色}{染める対象}
\begin{align*}
\frac{\color{blue}{1}}{\bcancel{3}} \times \frac{\bcancel{6}}{\color{red}{5}} 
\end{align*}
\]

結果

\[ %ディスプレイ数式モードの別表現 % \color{色}{染める対象} \begin{align*} \frac{\color{blue}{1}}{\bcancel{3}} \times \frac{\bcancel{6}}{\color{red}{5}} \end{align*} \]


MathJax Documentation（リンク）



化学式・化学反応

mathjaxのソースコード


\begin{align*} % ディスプレイ数式表示 &機能有
	&\ce{_{6}^{12}C} % 化学式 mhchem.jsにより
\\ % \\は改行 
\\ 
	&\ce{CO2 + C    -> 2CO} 
\\ 
	\\ 
	&\ce{Ag+ + Cl-  -> AgCl v} 
\end{align*}

結果

\begin{align*} % ディスプレイ数式表示 &機能有 &\ce{_{6}^{12}C} % 化学式 mhchem.jsにより \\ % \\は改行 \\ &\ce{CO2 + C -> 2CO} \\ \\ &\ce{Ag+ + Cl- -> AgCl v} \end{align*}

Tex（テフ）の構造式、ベンゼン環のコード

Texは、web上で描けませんので、当websiteでは、

OverleafとCloud LaTeXを利用させて頂いて画面コピペのpng画像にしております。

アルデヒド

アルデヒド（aldehyde）の一般構造式

TeXのソースコード


% Cloud LaTeX  LaTeXエンジン lualatex
% Overleaf Compiler LaTeX
% TeX Live Compiler pLaTeX(ptex2pdf)
% アルデヒド（aldehyde）の一般構造式
\documentclass{jsarticle}
\usepackage[dvipdfmx]{graphicx}
\usepackage{chemfig}
\begin{document}
\chemfig{R-C(=[:60]O)-[:-60]H}
\end{document}

TikzJaxの設定コード

<head>に以下のようにリンクします。
<script src="https://mathjax.site/tikz/output/tikzjax.js" ></script>
<link rel="stylesheet" href="https://mathjax.site/tikz/output/fonts.css">

小生のサーバーに設定しました。

ご利用になられる方は、実験・研究がてら自由にリンクして頂いても構いません。

がらにもなく高速高機能サーバーですので、余裕のよっちゃんです。

ただし、小生は高齢者なのであと20年は生きれないかもしれません。

アルデヒドのTikzJaxのスクリプト

<script type="text/tikz" data-show-console="true">

% Cloud LaTeX LaTeXエンジン lualatex
% Overleaf Compiler LaTeX
% TeX Live Compiler pLaTeX(ptex2pdf)
% アルデヒド（aldehyde）の一般構造式
\documentclass{jsarticle}
\usepackage[dvipdfmx]{graphicx}
%すでにTikzJaxに含まれているので省略する
\usepackage{chemfig}
\begin{document}
\chemfig{R-C(=[:60]O)-[:-60]H}
\end{document}
</script>

webでの表示（小っちゃ！）




TikzJaxにすでに含まれているコード


\documentclass[margin=0pt]{standalone}
\def\pgfsysdriver{pgfsys-ximera.def}
\usepackage[svgnames]{xcolor}
\usepackage{tikz}


ベンゼン環


ベンゼン環のTeXのソースコード


\documentclass{jsarticle}
\usepackage[dvipdfmx]{graphicx}
\usepackage{chemfig}
% Overleaf Compiler LaTeX
% Cloud LaTeX   LaTeXエンジン lualatex
% Tex Live Compiler pLaTeX(ptex2pdf)
\begin{document}
\ % ベンゼン環
\textrm{ベンゼン環}
\\ % \\は改行
\\
\chemfig{*6(-=-=-=)} 
\end{document}


トリニトロトルエン

トリニトロトルエンのTeXのソースコード


\documentclass{jsarticle}
\usepackage[dvipdfmx]{graphicx}
% Cloud LaTeX LaTeXエンジン uplatex
% Overleaf Compiler LaTeX
\usepackage{chemfig}
\begin{document}
\ % トリニトロトルエン
\textrm{トリニトロトルエン}
\\ % \\は改行
\\
\chemfig{*6(-(-NO_2)=-(-NO_2)=(-CH_3)-(-O_2N)=)} 
\end{document}

トリニトロトルエン TikJaxのソースコード


<script type="text/tikz" data-show-console="true">
\usepackage{chemfig}
\begin{document}
\chemfig{*6(-(-NO_2)=-(-NO_2)=(-CH_3)-(-O_2N)=)} 
\end{document}
</script>

chemfig マニュアル

chemfig-en (2023).pdf

chemmacros-manual.texTeXファイルです（Download）。

便利なサイト

TeXclip v4.0

Convert LaTeX math equations to PNG/JPG/SVG images

Online Latex Equation Editor - Sciweavers

Convert LaTeX equations to SVG using MathJax