2023-06-25

はてなブログでTikZjaxを利用する（オンラインのTikZ）

はてなブログでTikZが利用できる，TikZjaxなるものがあるので紹介します。

設定
描き方
注意
- TeXとして
TikZの基本的な使い方
線の描画 \draw
- --
- circle
塗りつぶしfill
点にテキストを入れる node
点に名前を付ける coordinate
3dでかく
プロットテスト
ライブラリーテスト

設定

Markdown記法なら，以下をそのまま文末にでも書いておきます。

<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>

描き方

<script>の中にtikzpicture環境を書きます。

<script type="text/tikz">
  \begin{tikzpicture}
    \draw (0,0) circle (3cm);
  \end{tikzpicture}
</script>

見たまま編集の場合は，HTMLから編集をする。

<script type="text/tikz">
  \begin{tikzpicture}
    \draw[thick] (0,0) -- (6,1);
   \coordinate (O) at (0,0);
   \node[below] at (O) {O};
  \end{tikzpicture}
</script>

コンパイルに一瞬時間がかかりますが，このように表示されます。

注意

ライブラリは使えないようです。mathやcalcなどが呼び出せないので，使用にはかなりの制限があります。+, ^などの簡単な計算はできます。sinなどの関数を使うことはできません。

plotも使えません。

\defは使えます。

日本語に対応していないので，後述の\nodeに日本語を記述するとコンパイルしません。

TeXとして

TeXとして使おうとすると，次のようになります。

小さく表示されるので，あまり現実的ではないと思います。

TikZの基本的な使い方

線の描画 \draw

--

\drawは線をかくことができます。--あるいはtoは直線をかく命令です。

\begin{tikzpicture}
    \draw (0,0) -- (5,0);
  \end{tikzpicture}

オプションとして，太さ，色，スタイルなどが指定できます。

 \begin{tikzpicture}
    \draw[thin] (0,1) -- (5,1);
    \draw (0,0) -- (5,0);
    \draw[thick] (0,-1) -- (5,-1);
    \draw[very thick] (0,-2) -- (5,-2);
    \draw[ultra thick] (0,-3) -- (5,-3);
  \end{tikzpicture}

 \begin{tikzpicture}
    \draw[blue] (0,1) -- (5,1);
    \draw[red] (0,0) -- (5,0);
    \draw[green] (0,-1) -- (5,-1);
    \draw[yellow] (0,-2) -- (5,-2);
    \draw[gray] (0,-3) -- (5,-3);
  \end{tikzpicture}

 \begin{tikzpicture}
    \draw (0,1) -- (5,1);
    \draw[dashed] (0,0) -- (5,0);
    \draw[dotted] (0,-1) -- (5,-1);
  \end{tikzpicture}

circle

中心の座標を指定して，円をかくことができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \draw (2,1) circle (2cm);
  \end{tikzpicture}
</script>

\drawについてより詳しく

a-muneniku-sore.hatenablog.com

塗りつぶしfill

drawと同じ要領で，fillを使うと塗りつぶしができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \fill (2,1) circle (2cm);
  \end{tikzpicture}
</script>

デフォルトでは塗りつぶしの色は黒です。

fillのオプションで，色，透明度などを指定することができます。

<script type="text/tikz">
 \begin{tikzpicture}
    \fill[red] (2,1) circle (2cm);
    \fill[blue] (5,1) circle (2cm);
  \end{tikzpicture}
</script>

点にテキストを入れる node

\node at (座標) {};

\path (座標) node {};の代替命令

\begin{tikzpicture}

\node[below] at (0,0) {O};

\end{tikzpicture}

オプション

位置：above below left right

フォントサイズ：font=\scriptsize (フォントサイズTeXコマンド?)

塗りつぶし：'fill=white' (矩形の背景色)

形の指定がなければ，矩形で塗られる。

nodeに対する余白　'inner sep=0pt'

\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node at (-\d,0) {nothing};

\fill (0,0) circle (2pt);
\node[above] at (0,0) {above};

\fill (\d,0) circle (2pt);
\node[below] at (\d,0) {below};

\fill (2*\d,0) circle (2pt);
\node[left] at (2*\d,0) {left};

\fill (3*\d,0) circle (2pt);
\node[right] at (3*\d,0) {right};

\fill (4*\d,0) circle (2pt);
\node[above right] at (4*\d,0) {above right};
\end{tikzpicture}

shpaeを指定して fill を入れると次のようになります。

\begin{tikzpicture}
\def\d{2}
\fill (-\d,0) circle (2pt);
\node[above] at (-\d,0) {nothing};
\node[fill=blue,below] at (-\d,0) {fill=blue};

\fill (0,0) circle (2pt);
\node[above] at (0,0) {circle};
\node[fill=blue,below,shape=circle] at (0,0) {fill=blue};


\fill (\d,0) circle (2pt);
\node[above] at (\d,0) {cooridnate};
\node[fill=blue,below,shape=coordinate] at (-\d,0) {fill=blue};
\end{tikzpicture}

回転

\begin{tikzpicture}
\def\d{2}

\fill (0,0) circle (2pt);
\node[above,rotate=30] at (0,0) {rotate=30};

\end{tikzpicture}

点に名前を付ける coordinate

点に単に名前を付けたい場合に次のようにします。

\coordinate (名前) at (座標);

\node (名前) at (座標) {};を簡略化した命令です。

例えば，

 \begin{tikzpicture}
    \coordinate (A) at (0,0);
    \coordinate (B) at (2,3);
    \draw (A) -- (B);
    \node[left] at (A) {A};
    \node[right] at (B) {B};
  \end{tikzpicture}

一度点の名前を定義すると，以降で使用することができます。

tikzの座標は，座標と同時にベクトルとして取り扱うことができます。（calcライブラリー）

3dでかく

単純に3つの座標で表すと，自動で3次元として扱ってくれます。デフォルトの向きは以下の通りです。

 \begin{tikzpicture}
\draw[-latex] (0,0,0) -- (5,0,0) node[pos=1.1] {$x$};
\draw[-latex] (0,0,0) -- (0,5,0) node[pos=1.1] {$y$};
\draw[-latex] (0,0,0) -- (0,0,5) node[pos=1.1] {$z$};
  \end{tikzpicture}

プロットテスト

三角関数

ライブラリーテスト

2023-06-25

はてなブログでMathjax(TeX)を利用する。

TeX表記を用いて$F=ma$のように数式をきれいに表示します。$\rm{Schr\ddot{o}dinger}$方程式もこの通り。

$\def\DIS{\displaystyle}\def\fraction(#1/#2){\frac{#1}{#2}}$ $\def\ff(#1/#2){\frac{#1}{#2}}$ $\def\dd#1#2#3{\frac{d ^{#1}#2}{d #3^{#1}}}$ $\def\pdd#1#2{\frac{\partial ^{#1}#2}{\partial #3^{#1}}}$

$$i\hbar \ff(\partial /\partial t) \psi = \hat H \psi$$

Markdown表記なら，以下を文頭に置きます。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

数式（TeX）の記述

インラインスタイル

文中に数式を記入する（インラインスタイル）は，$ ではさむだけです。

インラインスタイルの数式の中では，$このように日本語を入力することができます。$ ただし，インラインスタイルでは1行で書かれ，改行はできません。

array環境を使うことができます。

$\begin{array}{} 1 \\ 2 \\ 3 \\ 4 \\ 5 \\ 6\end{array}$

Markdown記法で編集している場合は，\\の代わりに\\\と打つ必要があります。

\verbを使用することができます。

$\verb|\verbをしようしています。|$

一般的に使用頻度の高いTeXコマンド

ギリシャ文字（コマンドアルファベット順）

イータ$\eta $，

シグマ$\sigma$，

シグマ$\Sigma$，

タウ$\tau$を入れるとコンパイルしてくれません。

$$ \begin{array}{|c:l|c:l} \alpha & \verb|\alpha| \\ \beta & \verb|\beta| \\ \chi & \verb|\chi| \\ \delta & \verb|\delta| & \Delta & \verb|\Delta| \\ \epsilon & \verb|\epsilon| \\ \varepsilon & \verb|\varepsilon| \end{array} $$

$$ \begin{array}{|c:l|c:l} \gamma & \verb|\gamma| & \Gamma & \verb|\Gamma| \\ \iota & \verb|\iota| \\ \kappa & \verb|\kappa| \\ \lambda & \verb|\lambda| & \Lambda & \verb|\Lambda| \\ \mu & \verb|\mu| \\ \nu & \verb|\nu| \\ \omega & \verb|\omega| & \Omega & \verb|\Omega| \\ \phi & \verb|\phi| & \Phi & \verb|\Phi| \\ \varphi & \verb|\varphi| \\ \psi & \verb|\psi| & \Psi & \verb|\Psi| \\ \rho & \verb|\rho| \\ \varrho & \verb|\varrho | \end{array} $$

$$ \begin{array}{|c:l|c:l} \theta & \verb|\theta| & \Theta & \verb|\Theta| \\ \upsilon & \verb|\upsilon| \\ \xi& \verb|\xi| & \Xi& \verb|\Xi| \\ \zeta & \verb|\zeta| \end{array} $$

数学記号

$$ \begin{array}{} \times & \verb|\times| & かける \\ \div & \verb|\div| & 割る \\ \pm & \verb|\pm| & プラスマイナス \\ \mp & \verb|\mp| & マイナスプラス \\ \cdot & \verb|\cdot| & ドット \\ \cdots & \verb|\cdots| & 点々々 \\ \circ & \verb|\circ| & まる \\ \bullet & \verb|\bullet| & 黒まる \\ \leq & \verb|\leq| & 不等号イコール \\ \geq & \verb|\geq| & 不等号イコール \\ \ll & \verb|\ll| & 不等号 \\ \gg & \verb|\gg| & 不等号 \\ \leqq & \verb|\leqq| & 不等号イコール（日本学校バージョン） \\ \geqq & \verb|\geqq| & 不等号イコール（日本学校バージョン） \\ \equiv & \verb|\equiv| & 合同 \\ \to & \verb|\to| & 矢印 \\ \infty & \verb|\infty| & 無限大 \\ \sum & \verb|\sum| & 和大型記号 \\ \lim & \verb|\lim| & 極限大型記号 \\ \dagger & \verb|\dagger| & \end{array} $$

偏微分記号：$\partial$ \partial

積分記号：$\int $ \int

プランク定数（ディラック定数?）$\hbar$ \hbar

は，上記表に記述したとき，コンパイルしてくれませんでした。

アクセントタイプ

上付き添え字，$a^b$はコンパイルしてくれません。

$$ \begin{array}{} a_b & \verb|a_b| & 下付き \\ a' & \verb|a'| & プライム \\ \vec a & \verb|\vec a| & ベクトル \\ \bar a & \verb|\bar a| & バー \\ \hat a & \verb|\hat a| & ハット \end{array} $$

にょろチルダ$\tilde a$, ドット（時間微分など）$\dot a$は，上記の表の中に記述したとき，コンパイルしてくれませんでした。

大型アクセント

$$ \begin{array}{} \over{ab} & \verb|\over{ab}| \\ \overrightarrow{ab} & \verb|\overrightarrow{ab}| \end{array} $$

文字のスタイル

$$ \begin{array}{} \verb|\boldsymbol| & ベクトルで使用 &\boldsymbol{abcdABCD} \\ \verb|\mathrm| & &\mathrm{abcdABCD} \\ \verb|\mathit| & &\mathit{abcdABCD} \\ \verb|\mathtt| & &\mathtt{abcdABCD} \\ \verb|\mathbb| & 黒板書体　&\mathbb{abcdABCD} \end{array} $$

数学特有な記法

分数 \frac{}{}

$\frac{2}{7}$ $\DIS \frac{2}{7}$

ルート根号

$\sqrt{123asd}$ $\DIS \sqrt{123asd}$

行列 \begin{pmatrix}

$\begin{pmatrix} a \ b \end{pmatrix}$

カラー

$\rm \color{red}{color\; red}$

$\rm \color{blue}{color\; blue}$

$\rm \color{green}{color\; green}$

コンパイルされないコマンドの対処方法

以下のscriptを入れることで，$\sigma$, $\tau$などの文字があってもコンパイルされるようになります。

<script type="text/javascript">
addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content");if(a)for(var i=0;i<a.length;i++)for(var b=a[i].getElementsByClassName("keyword");b.length;)b[0].outerHTML=b[0].textContent},!1);
</script>

上付き添え字

a\^b

のようにエスケープさせることで$a^b$と表示できます。

参考：

kennz0.hatenablog.com

minus9d.hatenablog.com

設定

描き方

注意