$${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にこのファイルを登録しましょう。

note用KaTeX_IME辞書.txt

18.5 KB

ファイルダウンロードについて

ダウンロード

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{ちっちゃくしたり}} $$
出来るんじゃがのう。

『$${KaTeX}$$であれこれ遊んでみた』
の下書きより抜粋

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

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

下書きより抜粋

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

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

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

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

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

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

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

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

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

振り仮名を振る

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

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

下書きより抜粋

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

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

下書きより抜粋

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

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

下書きより抜粋

リアルのお笑いのツッコミと同様に、間が大事😁　文字を好みの大きさに変えた後、空白を入れたり、\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{　　ただのわがままだな}{欲しいところです。}}$$

絵文字を加工する

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

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

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

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

下書きより抜粋

どれも、①絵文字を大きくする　②\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}$$を記事作成に取り入れてみてくださいね。