2
MathlogでのHTMLテクニック 任意色の枠など
130
0
$$\newcommand{acoloneqq}[0]{\ &\hspace-2pt\coloneqq}
\newcommand{ar}[1]{\operatorname{ar{#1}}}
\newcommand{asupplement}[1]{&\hspace{#1}\textsf}
\newcommand{beginend}[2]{{\begin{#1}#2\end{#1}}}
\newcommand{bm}[0]{\boldsymbol}
\newcommand{C}[0]{\mathbb{C}}
\newcommand{Defarrow}[0]{\xLeftrightarrow{\textrm{def}}}
\newcommand{FORMATDETECTION}[0]{}$$$${}
\newcommand{hen}[1]{{(\textrm{{#1}辺})}}
\newcommand{hygeo}[6]{{{}_{#1}{#2}_{#3}\lr[{\beginend{matrix}{{#4}\\ {#5}}\ ;{#6}}]}}
\newcommand{kfrac}[0]{\mathop{\Large\raise-1.8pt{\textrm K}}}
\newcommand{Kfrac}[0]{\mathop{\huge\raise-2.2pt{\textrm K}}}
\newcommand{kome}[0]{\textreferencemark}
\newcommand{leftshiftarrow}[0]{{\substack{\curvearrowright\\ \leftharpoondown}}}
\newcommand{lr}[3]{{\left#1{#2}\right#3}}
\newcommand{lvvr}[3]{\lr{#1}{\negmedspace\lr|{#2}|\negmedspace}{#3}}
\newcommand{N}[0]{\mathbb{N}}
\newcommand{ot}[0]{\leftarrow}
\newcommand{P}[0]{\mathbb{P}}
\newcommand{Q}[0]{\mathbb{Q}}
\newcommand{R}[0]{\mathbb{R}}
\newcommand{range}[1]{\rangeex{}{#1}{}}
\newcommand{Range}[1]{\Rangeex{}{#1}{}}
\newcommand{rangeex}[5]{\Rangeex{#1}{#2}{#3}{#4}{#5},}
\newcommand{Rangeex}[6]{{#1{#2}_{#4}#3#6\cdots#6#1{#2}_{#5}#3}}
\newcommand{rightshiftarrow}[0]{{\substack{\curvearrowleft\\ \rightharpoondown}}}
\newcommand{rmIm}[0]{\operatorname{Im}}
\newcommand{rmRe}[0]{\operatorname{Re}}
\newcommand{rprod}[0]{\mathop{\prod\!\llap\coprod}}
\newcommand{sahen}[0]{\hen左}
\newcommand{SETUP}[0]{}\require{physics}{}
\newcommand{slfrac}[2]{{{}^{#1}\hspace-4pt\diagup\hspace-4pt_{#2}}}
\newcommand{stirling}[3]{\lr[{\beginend{matrix}{{#1}\\ {#2}}{#3}}]}
\newcommand{Stirling}[3]{\lr\{{\beginend{matrix}{{#1}\\ {#2}}{#3}}\}}
\newcommand{uhen}[0]{\hen右}
\newcommand{vbin}[1]{\mathbin{{#1}\!\llap|\ }}
\newcommand{Z}[0]{\mathbb{Z}}
$$
| HTML in |  |
&&&axm <center><table><tr
><td class="fs-2">HTML in </td
><td><img style="width: 11em; padding-top: 4pt;" alt="" src="/logo_white.svg"><br></td
></tr></table></center><br>
内容
&&＆
$\kome$cssが制限されているため、非推奨の機能で代用しています。
最後だけ「&」を全角でエスケープしています。
参考
HTML | MDN
テキスト · Bootstrap v5.3
ぱるま, MathlogにおけるMarkdown記法に関するメモ
$\mathsf\LaTeX$のテクニック
ぱるま, MathlogにおけるMarkdown記法に関するメモ, 数式関連
sinh76821661, 裏技的マクロ \beginと\end、\leftと\rightを合体
詳細折りたたみ要素
タイトル
内容<summary>を省略すると「詳細」となります。画像
を<img alt="" src="URL">と置き換えることにより、属性が追加できるようになります。
また、こちらは「図N」が入りません。
![]()
無指定 imgタグ
<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Sarin-3D-balls.png">class="w-50"
恐らく Bootstrap だと思われる。<img class="w-50" alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Sarin-3D-balls.png">style="width: 10em;"
<img style="width: 10em;" alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/cb/Sarin-3D-balls.png">| サリン | |
| VX |  |
表に挿入した例。上部に不自然なスペースが入る。
画像引用元
参考
既存記法のHTMLによる代替
通常であれば不可能な場所での記法を可能にします。
タイトル
N=#の数+1
<hN>タイトル</hN>
<h1>は記事のタイトルと同じ形式になります。
タイトル
枠
四角だけ。
<div data-type="" class="box"><div class="title">タイトル</div><div class="body">内容</div></div>
thm(定理)をdef(定義)やprf(証明)に置き換えることで切り替えられる。
<div data-type="thm" class="box thm"><div class="title">タイトル</div><div class="body">内容</div></div>
入れ子にしたり<details>内に入れたりできます。
内外の組み合わせによっては正しく表示されません。date-typeは無くても機能しますが一応入れました。
入れ子
タイトル1
内容1
タイトル2
内容2
&&&def タイトル1
内容1
<div data-type="thm" class="box thm"><div class="title">タイトル2</div><div class="body">内容2</div></div>
&&&
任意の色
タイトル
内容
2か所あるseagreenが色。
<div style="border: solid seagreen;" data-type="axm" class="box axm"
><div style="background: seagreen; font-size: 0rem;" class="title"
><div style="font-size: 1.1rem;">タイトル</div></div
><div class="body">内容</div></div>
<details>
タイトル
内容
<details><div data-type="def" class="box def"
><div class="title">タイトル</div
><div class="body">内容</div></div></details>
横線
通常は---で表示されるものです。
<hr>
不要な改行の回避
1.
<タグ1>
<タグ2>
2.
<タグ1
><タグ2>
1の様に書くとタグの間に改行が入る場合があります。
これを回避する場合、2の様にします。
参考文献
投稿日：2023年10月3日
この記事を高評価した人
この記事を高評価した人
高評価したユーザはいません
この記事に送られたバッジ
この記事に送られたバッジ
バッジはありません。
投稿者
投稿者
コメント
コメント
他の人のコメント
コメントはありません。
読み込み中...
読み込み中