$${KaTeX}$$であれこれ遊んでみた　$${解説編}$$

$\bf👇これを読んで下さい👇$

上の記事では、数式を記述する方法である$\KaTeX$の、数式以外の利用法を提案しています。
上の記事の中で、$\KaTeX$をどのように書いていたのか、解説を行っていきます。$\KaTeX$を書く際には、理解しづらい点、難しい点、手間のかかる点がありますが、それらを解決する方法を示していきます。
この記事を読めば$\KaTeX$入力が、簡単になるはずです。

冒頭の記事を読んでからでないと、訳が分からないと思います。この先に大して面白いことが書いてあるわけではありません。
少なくとも上の記事の方が$\underset{　　たぶん😅}{面白いです}$。

もうすでに読んできたという方は、このままお読みください。

$\Huge$

$\Huge$

$\Huge$

$\Huge$

冒頭の記事内の片隅に置かれた、魔導書を開いてきたという方。私の意図をくみ取って頂き、ありがとうございます$\Large😉👍$

記事は読んだけど、そんなのあったっけ？という方は、この記事を投稿する前に読まれた方だと思います。
もう一度$\Huge\raisebox{-8pt}{📕}\hspace{-20pt}\normalsize\underset{note}{🔯}$ 読みに行きますか？

IME辞書を登録しよう

$\KaTeX$の関数、\largeとかいうやつを覚えるのも入力するのも面倒ですよね。大見出し、小見出しのように文字を大きくして、さらに太字にするには、$\$\$\{\verb!\large\bf!…\}\$\$$なんて長ったらしく書かなければなりません。面倒この上ないです。

簡単に入力したいなら、IMEにこのファイルを登録しましょう。

2024年12月20日版

IMEのユーザー辞書ツールで、テキストファイルからの登録でＯＫ$\LARGE👌$　 些末なテキストデータですが、noteでの文章入力に特化していて、記事作成が捗ります。数式入力には向いていません$\LARGE😅$　環境やスマホ等によって出来ない方もいるかもしれませんが、ご了承ください$\huge🙇$

ファイルの内容を一部掲載します。

$$\def\arraystretch{1.1} \small \begin{array}{c|l|l} \text{読み} & {語句} & {コメント} \\ \hline \text{＄＄} & \verb!$$! \verb!{}$$! & {} \\ \hdashline \text{＄￥} & \verb!$$! \verb!{\Huge}$$! & {文字サイズ極大} \\ \text{} & \verb!$$! \verb!{\Large}$$! & {文字サイズ大} \\ \text{} & \verb!$$! \verb!{\small}$$!　他 & {文字サイズ小} \\ \hdashline \text{￥} & \verb!\huge! & {文字サイズ極大} \\ \text{} & \verb!\large! & {文字サイズ大} \\ \text{} & \verb!\tiny!　　　　他 & {文字サイズ小} \\ \hdashline \text{￥Ｔ} & \verb!\text! & {テキスト} \\ \text{} & \verb!\textrm! & {ローマン} \\ \text{} & \verb!\sf!　　　　　他 & {サイセリフ} \\ \hdashline \text{￥｜} & \verb!\overset{}{}! & {上仮名} \\ \text{} & \verb!\underset{}{}! & {下仮名} \\ \hdashline \text{￥ー} & \verb!\overline{}! & {上線} \\ \text{} & \verb!\sout{}! & {取り消し線} \\ \text{} & \verb!\underline{}! & {下線} \\\hline \end{array}$$

以上は主なものの一部ですが、他にもたくさんありますので、何がどのように変換されるのか確認してみてください。
必要のないものを削除したり、よく使う関数を追加したりして、IMEを自分好みにカスタマイズするのもおすすめです。

それでは解説に参りましょう。

文字装飾　ー初級ー

文字の大きさを変える

まずは、初級編。$\KaTeX$による文章表現の、基本中の基本中。

文字どおり、\hugeは文字を大きく、\tinyは小さくします。
\tinyの後には{ }が付いていて、\hugeの後にはありません。
{ }は、省略しても構わない場合があります。文字の大きさを変える関数の後は、なくても構いません。

\largeで文字を大きくし、さらに\bfで太字にしています。
この場合も{ }は省略して構いません。

省略できない例がこちら。
$\fbox文字囲い$はひと文字目。
$\fbox{文字囲い}$は{ }内の文字。

このように{ }の有無で、表示が変わるので注意しましょう。
{ }が省略可能でも、あえて{ }を付けて分かりやすくした方が良い場合があります。記事の読み手側の表示は変わらないので、記事の下書きが分かりやすくなるように付けるということです。

上の文例を＜コード＞内に書いておきます。

$${\huge大きくしたり}$$何なら
$${\tiny{ちっちゃくしたり}}$$
出来るんじゃがのう。

$${\large\bfお主はどうじゃ？}$$
$${\large\bf{やってみんか？}}$$

$${\fbox文字囲い}$$はひと文字目。
$${\fbox{文字囲い}}$$は{}内の文字。

右上に現れる❐を押して、自分の記事の下書きにコピペしてみましょう。
表示される文字を変えれば、$\KaTeX$を覚えなくてもそのまま使えます。

振り仮名を振る

次は、上仮名\oversetと、下仮名\underset。少し難しくなります。

\overset{うえかな}{上仮名}のように{ }がふたつ必要です。{ }内に入力する文字の順番に注意しましょう。

文字サイズを指定しない場合は\normalsizeとなり、周りの文字よりやや大きくなります。見た目を周りの文字に近づけるため、\footnotesizeで小さくし、さらに\sfでゴシック体に変え、$\KaTeX$使用を目立ちにくくしています。見た目を気にしなければ、ここまでしなくても大丈夫です。

リアルのお笑いのツッコミと同様に、間が大事😁　文字を好みの大きさに変えた後、空白を入れたり、\hspaceを入れたりして文字の位置を調整しています。
\hspace{?pt}は、空白と同じ役目をします。空白より細かい横方向の文字位置調整が出来ます。また数字をマイナスにすると、文字を重ね合わせる事もできます。\hspaceは、この後も頻繁に出てきます。

これらも＜コード＞内に書いておきます。

とある$${\overset{路地裏のマガジン}{魔術の禁書目録}}$$から選りすぐった魔導書じゃ。

$${\KaTeX}$$にも
$${\footnotesize\sf\overset{リンク設定でき}{転移魔法が使え}}$$るのじゃが、
$${\footnotesize\sf\overset{下線が表示され}{魔力探知でき}}$$ないため、
いまいちわかりづらいかも知れんのう。

ツッコミや合いの手を入れるのに
$${\large\underset{\small　　　ホンマか？　　ぅわ　ホンマや}{\hspace{-54pt}ピッタリじゃ。}}$$

この先は、中級、上級と進みますが、沼です。ハマると時間が溶けていくので、安易に踏み入らない方がいいかもしれません。難しいと思ったなら、途中は読み飛ばして、$\large\bf最後に$だけでも読んでください。

何かエラーがあると、表示されなくなります。即時プレビューがいまいち使いづらいのも、敬遠される理由。ことあるごとに下書き保存して、プレビューして、表示が正しいか確認。これでは、時間が溶けていきます。$\KaTeX$表記をおすすめしている私ですら、そりゃ$\LARGE{👹}\hspace{-18pt}\tiny{\raisebox{16pt}{ムキー}}$となりますよ。

慣れないうちは$\KaTeX$表記を少なめにして、ピンポイントで使いましょう。私の記事のように増し増しで書かないことです。

小技を駆使する　－中級－

リンクを設定する

インライン形式の、始まりの $\underbrace{\$\$\{から、終わりの\}\$\$}_{この間全て}$ までの全体に、リンクを設定します。$\KaTeX$内の一部の文字、ディスプレイ形式にリンク設定すると、表示されなくなります。また、ひとつの$\KaTeX$に複数のリンク設定は出来ません。

隣の文字にまたいで設定すると、このように$\KaTeX$表記部分の下線がなくなります。$\KaTeX$部分だけにリンクを設定し、両隣りに文字が無ければ下線は現れません。$\KaTeX$で空白だけを書いてリンクを設定すれば、一見して何もないかのようです。リンクを張ることを想定していなかったのかもしれません。
これはバグと思われるので、今後改善されるかも知れません。
しかし個人的には、このままにして欲しいところです。

隣りに文字がある状態で、$\KaTeX$部分だけにリンクを設定すると、少しだけリンクの線が現れます。冒頭の記事では魔力漏れと表現していましたが、$\small\xcancel{これはバグと思われるので、}$線が現れないように改善して$\underset{　　ただのわがままだな}{欲しいところです。}$

絵文字を加工する

記事へのリンクなどに使用している絵文字ですが、そのうちのいくつかは重ね合わせて表示しています。

どれも、①絵文字を大きくする　②\hspace{‐?pt}で位置を左に戻す　③文字を書き足す　の順で書いています。
\hspaceは横方向に文字の位置を変える関数。\raiseboxは縦方向に文字の位置を変える関数です。
３つ目の$\LARGE{👹}\hspace{-18pt}\tiny{\raisebox{16pt}{ムキー}}$は、\oversetでうまく表示されなかったため、この書き方に変えたものです。危うくそうなる所でした。

絵文字は、PC、スマートフォン、タブレットなど、環境の違いによって表示が微妙に変わったりするので、ある程度妥協が必要です。

上の例では、見やすくするために改行を入れていますが、インライン形式に改行を入れると、表示されなくなるので注意してください。

＜コード＞はこちら。

$${\Huge\raisebox{-8pt}{📘}\hspace{-20pt}\normalsize\underset{note}{🔆}}$$

$${\Huge{🚚}\hspace{-17pt}\normalsize{\raisebox{6pt}🐅}}$$

$${\LARGE{👹}\hspace{-18pt}\tiny{\raisebox{16pt}{ムキー}}}$$

まずはこれをコピペして、文字を入れ替えたりしてください。
慣れてきたら、自作してみてはいかがでしょう。

ディスプレイ形式に挑戦

お手軽に書けるインライン形式と違って、ディスプレイ形式は難しい。インライン形式より関数が増え、明らかに長くなる。エラーがあると表示されなくなり、その理由がどこにあるかわかりづらい。今までに何らかのコードの類を書いた事のない方にとって、ハードルが高いです。

数式以外で$\KaTeX$が利用されるのは、表作成が多いと思われます。この記事でも、IMEファイルの中身を披露するために、ディスプレイ形式で表を書いています。見た目を整えるのが簡単というメリットがあります。$\KaTeX$なしで表を書く場合、見栄えを整えるのに苦労します。表の画像を貼るのが一般的ですが、$\KaTeX$表記はnote上で修正出来るというメリットもあります

表作成方法を文章表現に活かしてみます。インライン形式で長文を書いた場合、自動改行されないため画面からはみ出してしまい、読めなくなります。横幅の狭いスマートフォンで顕著です。
長文を任意に改行して表示するなら、ディスプレイ形式が適しています。

$$
\begin{array}{l}\cr\Huge{誰じゃ💢}\cr\cr\Large{お笑いモンスターを}\cr\Large{召喚したのは❗}\end{array}
$$

ディスプレイ形式では、\cr または \\ を改行として実行します。見た目の改行は無視されます。さらに半角のスペースも無視です。紛らわしいですか？
見た目の改行と半角スペースは、下書きを見やすくするためだけに入れるものです。
上と下の＜コード＞は、全く同じ表示結果になります。

$$
\begin{array}{l}
\cr
\Huge{誰じゃ💢} \cr \cr
\Large{お笑いモンスターを} \cr
\Large{召喚したのは❗}
\end{array}
$$

$\small\verb!\begin{array}{???}…\end{array}!$
表作成に便利な関数です。???に入るのは、$\text{l、c、r、|、:}$です。例えば$\{\text{l|c:r}\}$のように書きます。詳しい説明は、また別の機会に。

$$\small \begin{array}{r|c:l} \text{l}& \text{左寄せ←　　　　 } & \\  \text{c}& \text{　→中央寄せ←　 } & \\  \text{r}& \text{　　　　→右寄せ } & \\  \text{|}& \text{}\hspace{-7pt}\text{⇐縦罫線　　　　 } & \\ \text{:}& & \text{}\hspace{-52pt}{縦破罫線⇒　 } \end{array}$$

文章表現で使う場合は、$\text{l、c、r}$のどれかひとつ入れればいいでしょう。
＜コード＞内で \\ を使用すると、コピペがうまくいかないので \cr を 使用しています。みなさんが普段書くときは \\ で構いません。

インライン形式で、同じような表示になるように書いてみます。

$${\Huge{誰じゃ💢}}$$
$${\Large{お笑いモンスターを}}$$ 
$${\Large{召喚したのは❗}}$$ 

これでも悪くないのですが、なぜか即時プレビューは、一行目のみです。全体のバランスを見るには、下書き保存してプレビューしなくてはなりません。面倒ですね。

インライン形式で、かつ即時プレビュー出来る書き方は、$\large\bf最後に$を見てください。

大枠で囲む

$$
\boxed{
\begin{array}{l}
西壁に向かいし あおば矢を射るや\cr
　　与一に優る魅脚なりけり\cr
\hspace{90pt}\footnotesizeにゃんころもち
\end{array}
}
$$

\boxedの{ }で挟むだけ。
使用している関数は、これまでに説明したものばかりですし、ディスプレイ形式の書き方を理解していれば、それほど難しくないと思います。

罫線文字の活用　ー上級ー

あみだくじ

太字の罫線文字━┃┣┫を使用して書いています。
細字の罫線文字─│├┤では、ずれてしまって思うような表示になりません。

$\KaTeX$を使わずに、普通に書いてみます。
┣━┫　┃　┣━┫
┃　┃　┣━┫　┃
┃　┣━┫　┃　┃
┣━┫　┣━┫　┃
このように隙間があり、つながっていません。

改行の幅を決める関数\def\arraystretch{?}で間を詰めます。
この関数を使わなければ、{ }内の数値を1.0にしたのと同じです。1.0では隙間が出来るため、0.8にして間を詰めます。

$$
\def\arraystretch{0.8}
\large
\begin{array}{l}
\Large\text{    A   B    C    D   E　} \cr
\text{　┣━┫　┃　┣━┫　} \cr
\text{　┃　┃　┣━┫　┃　} \cr
\text{　┃　┣━┫　┃　┃　} \cr
\text{　┣━┫　┣━┫　┃　} 
\end{array}
$$

$${\LARGE{📦}}$$$${\LARGE{🍰}}$$$${\LARGE{🎵}}$$$${\LARGE{👻}}$$$${\LARGE{😰}}$$

\large
以降の文字の大きさを\largeにします。

\Large\text{    A   B    C    D   E　} \cr
この行のみ文字の大きさを\Largeにします。次の行の大きさは、\largeです。

絵文字の行は、リンクを設定する必要があったため別ブロックにし、中央寄せしています。

トーナメント表

冒頭の記事のトーナメント表は、凝りすぎです。シンプルなものをお見せします。

$$\def\arraystretch{0.8} \small \begin{array}{r} \text{Ａ} \cr \cr \text{Ｂ} \cr \cr \text{Ｃ} \cr \cr \text{Ｄ} \end{array} \begin{array}{l} \hspace{-8pt} \text{━━┓　　　} \cr \hspace{-8pt} \text{　　┣━━┓} \cr \hspace{-8pt} \text{━━┛　　┃} \cr \hspace{-8pt} \text{　　　　　┣🏆} \cr \hspace{-8pt} \text{━━┓　　┃} \cr \hspace{-8pt} \text{　　┣━━┛} \cr \hspace{-8pt} \text{━━┛　　　}  \end{array}$$

$$
\def\arraystretch{0.8}
\small
\begin{array}{r}
\text{Ａ} \cr \cr 
\text{Ｂ} \cr \cr 
\text{Ｃ} \cr \cr 
\text{Ｄ}
\end{array}
\begin{array}{l}
\hspace{-8pt} \text{━━┓　　　} \cr
\hspace{-8pt} \text{　　┣━━┓} \cr
\hspace{-8pt} \text{━━┛　　┃} \cr
\hspace{-8pt} \text{　　　　　┣🏆} \cr
\hspace{-8pt} \text{━━┓　　┃} \cr 
\hspace{-8pt} \text{　　┣━━┛} \cr
\hspace{-8pt} \text{━━┛　　　} 
\end{array} 
$$

\begin{array}…\end{array}を２つ並べて表示しています。
左は出場者名、右はトーナメント部です。
２つに分けることで、トーナメント部の罫線がピッタリ合います。
そのままだと左右の間が空くので、\hspace{-8pt}で詰めています。
左右の行数を同じにしないと文字がずれるので、左にも\crを入れて行数を合わせています。

このトーナメント表をテンプレートとして、対戦人数を変えたり、┣を┗┏に、┫を┛┓に変更して勝敗結果を表したり、スコアの数字を入れ込んだりします。

縦型のトーナメント表も作れますが、出場者名が縦になってしまうのが気になります。

冒頭の記事のトーナメント表です。

$$
\def\arraystretch{0.8} 
\small
\begin{array}{r}
\text{モロッコ} \cr \cr 
\text{アメリカ} \cr \cr 
\text{日本} \cr \cr 
\text{スペイン} \cr \cr \cr \cr
\end{array}
\begin{array}{l}
\hspace{-8pt} \text{━━┓　　　　　　　┏━━} \hspace{-92pt} \text{4} \hspace{58pt} \text{1} \cr
\hspace{-8pt} \text{　　┗━┓　　　┏━┛　　} \cr
\hspace{-8pt} \text{━━┛　┃　　　┃　┗━━} \hspace{-92pt} \text{0} \hspace{18pt} \text{5🏆3} \hspace{20pt} \text{0} \cr
\hspace{-8pt} \text{　　　　┏━┛━┛　　　　} \cr
\hspace{-8pt} \text{━━┓　┃　　　┃　┏━━} \hspace{-92pt} \text{0} \hspace{52pt} {\small{1_{p5}}} \cr 
\hspace{-8pt} \text{　　┏━┛　　　┗━┛　　} \cr
\hspace{-8pt} \text{━━┛　　　　　　　┗━━} \hspace{-92pt} \text{1} \hspace{52pt} {\small{1_{p4}}} \cr
\hspace{41pt} \text{6　0} \cr
\hspace{-10pt} \text{モロッコ ━━┛━━ エジプト} \cr
\hspace{31pt} \text{3位決定戦} \cr
\end{array}
\begin{array}{l}
\hspace{-10pt} \text{フランス} \cr \cr 
\hspace{-10pt} \text{アルゼンチン} \cr \cr 
\hspace{-10pt} \text{エジプト} \cr \cr 
\hspace{-10pt} \text{パラグアイ} \cr \cr \cr \cr
\end{array}
$$

\begin{array}…\end{array}を３つ並べて表示しています。
得点などの数字は、罫線文字を書いた後、\hspace{‐?pt}を使用して重ねて書いています。レイヤーを２枚重ねているイメージです。

最後に

この記事の冒頭に、区切り線が並んだ空間がありましたよね。何もないと思いましたか？

$\scriptsizeフッフッフッ\\ないわけないじゃない$

$\LARGE{探せ❗} \\ \Large{この世の全てを}\\ \Large{そこに\underset{　んなわけない}{置いてきた}}$

これも、コビペして使えるようにしておきますね。

$${\scriptsizeフッフッフッ\\\ないわけないじゃない}$$

$${\LARGE{探せ❗} \\\ \Large{この世 の全てを}\\\ {そこに\underset{　んなわけない}{置いてきた}}}$$

右上の❐でコピペすると、 \\\ がなぜか \\ になります。
みなさんが普段書くときは、\\ で構いません。

改行を入れたいけど、ディスプレイ形式は面倒そうと思う方は、インライン形式のこちらを試してみてください。３行程度なら、これでも十分です。行数が多くなると表記が長くなるので、なにを書いているのかわかりづらくなります。インライン形式では、\cr は使えないようなので、 \\ で改行を入れてください。

以上です。

みなさんも、ぜひ$\KaTeX$を記事作成に取り入れてみてくださいね。