Tikzjaxの導入
前の記事
https://knight-9999.hatenablog.com/entry/2021/01/05/173805
で、markdown + MathJax + xypicを組み込んで、数式と可換図式が描けるようになりましたが、 まだベン図などは描けないので、tikzjaxをさらに組み込んでみます。
（ブログ＞設定＞詳細設定＞headに要素を追加）
<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css"> <script src="https://tikzjax.com/v1/tikzjax.js"></script>
上手く書けるかな？
コード：
<script type="text/tikz">
\begin{tikzpicture}
\draw (0,0) circle (1in);
\coordinate [label=below right:$\mathcal{C}$](C) at (-1,2);
\coordinate (A) at (0,1) node [left=3] at (A) {$A$};
\coordinate (B) at (0,-1) node [left=10] at (B) {$B$};
\fill (A) circle [radius=2pt];
\fill (B) circle [radius=2pt];
\draw [->, thick] (A) to (B);
\draw (8,0) circle (1in);
\coordinate [label=below right:$\mathcal{D}$](D) at (7,2);
\draw [->, thick] (2,2) to [out=30,in=150] (6,2);
\coordinate [label=above left:$F$]() at (4,3);
\draw [->, thick] (6,-2) to [out=210,in=330] (2,-2);
\coordinate [label=below left:$G$]() at (4,-3);
\end{tikzpicture}
</script>
ちょっと描画されるまで、ちょっと時間かかるけど、、、。
ちなみに、MathJax, xypic, tikzjax も含めたすべての設定は
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_HTML">
</script>
<script type="text/javascript">// <![CDATA[
MathJax.Ajax.config.path["Contrib"] = "//cdn.mathjax.org/mathjax/contrib";
MathJax.Hub.Config({
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
showProcessingMessages: false,
tex2jax: { displayMath: [['$$','$$']], inlineMath: [['$','$']] },
TeX: { equationNumbers: { autoNumber: "AMS" }, TagSide: "left", TagIndent: "0em",
extensions: ["AMSmath.js","AMSsymbols.js","[Contrib]/xyjax/xypic.js"] }});
// ]]></script>
<link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script>
となります。
もっとサンプル
表示される？
コード：
<script type="text/tikz">
\begin{tikzpicture}
\draw [help lines] (0,0) grid (4.5,3.5);
\coordinate (O) at (0,0) node [below] at (O) {O};
\coordinate (A) at (3,0) node [below]at (A) {A};
\coordinate (B) at (1,2) node [above right] at (B) {B};
\end{tikzpicture}
</script>
なんか、%(パーセント)でのコメントが効かないなぁ、、、。
参考サイト：
