#XyJax

[dev-memo]

tumblr を markdown で投稿するときの注意点

投稿後、再編集するために編集ボタンを押すと消えるもの（下書き��どの保存後を含む） 再編集時には再度入力しないといけない

コードで記載した </head> タグ部分

XyJax で記載した <0.5ex> 部分

XyJax で記述するときに公式サイトのサンプルどおりの記述だと図が表示されない要因

\\ は \\\\\ に変更する必要がある

[F**:blue] は [F\*\*:blue] に変更する必要がある ※[F**:xxxx] の色指定の記述が 1 箇所だと表示できるけど 2 箇所だと表示できないので変更する

画像を挿入する場合

テキストエディタを「リッチテキスト」に切り替える必要がある（切り替え後にカメラアイコンをクリックして挿入）

画像挿入後にテキストエディタを「マークダウン」に戻すことは可能だけど、もともと入力してた「マークダウン」の表記は変わってしまうことがある

[confessionsofalionholic]

COnspiracy: jAx Is XyLaX. xYjAx

[dev-memo]

tumblr に XyJax で図を表示させてみた

$$ \begin{xy} \xymatrix @=4pc { x \ruppertwocell^f{\alpha} \ar^(0.35){f'}[r] \rlowertwocell_{f''}{\alpha'} & y } \end{xy} = \begin{xy} \xymatrix @=4pc { x \rtwocell^f_{f''}{*[r]{\scriptstyle \alpha'\cdot\alpha}} & y } \end{xy} $$

前提条件

MathJax は設定済み。

MathJax の設定方法についての投稿

設定方法

以下から XyJax をダウンロード https://github.com/sonoisa/XyJax

ダウンロードファイルから /extensions/TeX/xypic.js を探して修正

ポイント：tumblr では静的ファイルを置換する度にパスが変更されるため動的に対応できるようにする。[MathJax] だと競合しているのか上手く動作しないため任意の値 [xypic] に修正。

// 修正前 // MathJax.Ajax.loadComplete("[MathJax]/extensions/TeX/xypic.js"); // 修正後 MathJax.Ajax.loadComplete("[xypic]/xypic.js");

tumblr の[外観を編集]ー[テーマの編集]ー[ html を編集]

[設定マーク]ー[テーマアセット]ー[ファイルを追加]で修正した xypic.js をアップロードする。

ポイント：アップロードしたファイル横に表示される[挿入]をクリックすると html 上のカーソル位置に絶対パスが挿入できる。

表示された html から MathJax 設定箇所を以下に変更する。

ポイント：MathJax.Ajax.config.path["xypic"] は、アップロードしたファイルの絶対パスにおける /xypic.js を除いた部分を設定する。

ポイント：MathJax.js の指定箇所では、?config=TeX-AMS_CHTML の記述は削除する。

<script type="text/x-mathjax-config"> MathJax.Ajax.config.path["xypic"] = "https://static.tumblr.com/xxxxxxx/zzzzzzzzz"; MathJax.Hub.Config({ extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], "HTML-CSS": { availableFonts: ["TeX"] }, tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, TeX: {extensions:["AMSmath.js","AMSsymbols.js","[xypic]/xypic.js"]} }); </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>

あとは投稿する

$$ \begin{xy} \xymatrix @=4pc { x \ruppertwocell^f{\alpha} \ar^(0.35){f'}[r] \rlowertwocell_{f''}{\alpha'} & y } \end{xy} = \begin{xy} \xymatrix @=4pc { x \rtwocell^f_{f''}{*[r]{\scriptstyle \alpha'\cdot\alpha}} & y } \end{xy}

と入力すると以下が表示される。

$$ \begin{xy} \xymatrix @=4pc { x \ruppertwocell^f{\alpha} \ar^(0.35){f'}[r] \rlowertwocell_{f''}{\alpha'} & y } \end{xy} = \begin{xy} \xymatrix @=4pc { x \rtwocell^f_{f''}{*[r]{\scriptstyle \alpha'\cdot\alpha}} & y } \end{xy} $$

参考サイト

パスの指定方法は以下を参考にした。 https://groups.google.com/forum/#!topic/mathjax-users/ZDr2nXqJJDA

MathJax の js を指定する際、config を設定していたのでずっとハマってた。以下サイトに助けられた。 http://dameal-man.blogspot.jp/2016/01/xyjax.html

[dev-memo]

レスポンシブなサイト対策

数式と iframe の要素（ youtube, infogram ）が 枠からはみだすのを防ぐためにしたこと。

設定

数式と iframe それぞれで設定。

数式

MathJax.Hub.Config に linebreaks: { automatic: true } を追加 MathJax.Hub.Config の設定に関連した投稿

<script type="text/x-mathjax-config"> MathJax.Ajax.config.path["xypic"] = "https://static.tumblr.com/hke9tin/uxJq8o4ns"; MathJax.Hub.Config({ messageStyle: 'none', extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], "HTML-CSS": { linebreaks: { automatic: true }, availableFonts: ["TeX"], undefinedFamily:"'M PLUS 1p', 'Source Sans Pro', sans-serif", scale:68 }, tex2jax: { linebreaks: { automatic: true }, inlineMath: [['$','$'], ["\\(","\\)"]], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, TeX: {extensions:["AMSmath.js","AMSsymbols.js","[xypic]/xypic.js"]} }); </script>

iframe

css に iframe 用のクラス追加

.res-iframe { position: relative; width: 100%; } .res-iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

投稿時に iframe 要素を囲って投稿

padding-top の数値は $\frac{高さ}{横幅} \times 100$

<div class="res-iframe" style="padding-top:290%;"> <iframe ../></iframe> ← infogram などでリンクコピーしてきた iframe 要素 </div>

参考

iframe 要素 https://www.taniweb.jp/blog/reference/8999/