diff --git a/packages/zenn-cli/articles/304-example-embed-katex.md b/packages/zenn-cli/articles/304-example-embed-katex.md index 11121a5d..19d53289 100644 --- a/packages/zenn-cli/articles/304-example-embed-katex.md +++ b/packages/zenn-cli/articles/304-example-embed-katex.md @@ -265,6 +265,18 @@ issue: https://github.com/zenn-dev/zenn-community/issues/337 素数全体を2つのグループに分け、$p_1, …, p_k$ を「小さい」素数、$p_{k+1}$ 以降を「大きい」素数と呼ぶことにする。$N$ 以下の自然数で、「大きい」素数で割れる数と、「小さい」素数でしか割れない数に分け、前者の個数を $N_1$、後者の個数を $N_2$ とおく。当然 $N = N_1 + N_2$ である。 +## 数式番号を含む数式 + +issue: https://github.com/zenn-dev/zenn-community/issues/608 + +数式番号を含む数式に、スクロールバーが発生しないこと + +$$ +\begin{align} +J_w \ddot{\theta}_w &= T - \frac{f}{r} \\ +\end{align} +$$ + ## 折りたたみ :::details 詳細 diff --git a/packages/zenn-content-css/src/_embed.scss b/packages/zenn-content-css/src/_embed.scss index 0e13ca96..91b199bd 100644 --- a/packages/zenn-content-css/src/_embed.scss +++ b/packages/zenn-content-css/src/_embed.scss @@ -56,12 +56,23 @@ span.embed-block { margin: 1.5rem auto; } +embed-katex { + // issue: https://github.com/zenn-dev/zenn-community/issues/327 + // 横に長い要素がはみ出さないようにはスクロールバーを有効化する + overflow-x: auto; + // issue: https://github.com/zenn-dev/zenn-community/issues/608 + // .katex .vlist-t2 に指定されているネガティブマージン(margin-right: -2px)により一部のブラウザでスクロールバーが表示されるため + // ネガティブマージンを相殺するパディングを親要素に設定する + padding-right: 2px; +} + // prevent katex overflow // for inline $foo$ embed-katex:not([display-mode='1']) { - display: inline-flex; // Don't use inline-block here. - overflow-x: auto; + display: inline-flex; max-width: 100%; + // issue: https://github.com/zenn-dev/zenn-editor/pull/216 + // インライン要素ではいかなる場合でもスクロールバーを表示しない -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { @@ -75,5 +86,4 @@ embed-katex:not([display-mode='1']) { embed-katex[display-mode='1'] { display: block; width: 100%; - overflow-x: auto; }