Three questions/problems after extensive using

[ZhengYuan-Public]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Describe the bug

I have made a post to reproduce all problems described in this issue here.

Verticsl scroll bar appeared in list when it shouldn't

Math euqation alignment at multiple palces

Here is the markdown for the equation

$$
\begin{alignat}{2}
v_{\pi 1}^{(0)} &= v_0 \nonumber\\
v_{\pi 1}^{(1)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(0)} &\longrightarrow v_1 \longrightarrow \text{Value Iteration} \nonumber\\
v_{\pi 1}^{(2)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(1)} \nonumber\\
\vdots \nonumber\\
v_{\pi 1}^{(j)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(j-1)} &\longrightarrow \bar{v_1} \longrightarrow \text{Truncated Policy Iteration} \nonumber\\
\vdots \nonumber\\
v_{\pi 1}^{(\infty)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(\infty)} &\longrightarrow v_{\pi 1} \longrightarrow \text{Policy Iteration} \nonumber
\end{alignat}
$$

Code block grammar check (switching themes between dark and light is related)

Example 1

In light mode

• Some text became italic. Probably it's because those were between two *. It seems a kramdown problem but in dark mode it's different.

Here is the HTML element for the code block

<div class="language-markdown highlighter-rouge">
  <div class="code-header">
    <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span>
    <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button>
  </div>
  <div class="highlight"><code><table class="rouge-table"><tbody><tr>
<td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td>
<td class="rouge-code"><pre><span class="nt">&lt;Mandatory</span> <span class="na">Blank</span> <span class="na">Line</span><span class="nt">&gt;</span>
$$
<span class="se">\b</span>egin{align}
D_{KL}(P^<span class="err">*</span>(y|x_i)<span class="se">\ </span>||<span class="se">\ </span>P(y|x_i; <span class="se">\T</span>heta)) 
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i) log \frac{P^*</span>(y|x_i)}{P(y|x_i; <span class="se">\T</span>heta)} <span class="se">\\</span>
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i)[logP^*</span>(y|x_i) - logP(y|x_i; <span class="se">\T</span>heta)] <span class="se">\\</span>
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i)logP^*</span>(y|x_i) - <span class="se">\s</span>um_{y} P^<span class="err">*</span>(y|x_i)logP(y|x_i; <span class="se">\T</span>heta)
<span class="se">\e</span>nd{align}
$$
<span class="nt">&lt;Mandatory</span> <span class="na">Blank</span> <span class="na">Line</span><span class="nt">&gt;</span>
</pre></td>
</tr></tbody></table></code></div>
</div>

In dark mode,

• The italic problem is no longer there. Combined with the behavior in the light mode, I'm not sure if this is a kramdown proble.
• Some text start with \ also has color, which is not intended.

Here is the HTML element for the code block

<div class="language-markdown highlighter-rouge">
  <div class="code-header">
    <span data-label-text="Markdown"><i class="fas fa-code fa-fw small"></i></span>
    <button aria-label="copy" data-title-succeed="Copied!"><i class="far fa-clipboard"></i></button>
  </div>
  <div class="highlight"><code><table class="rouge-table"><tbody><tr>
<td class="rouge-gutter gl"><pre class="lineno">1
2
3
4
5
6
7
8
9
10
</pre></td>
<td class="rouge-code"><pre><span class="nt">&lt;Mandatory</span> <span class="na">Blank</span> <span class="na">Line</span><span class="nt">&gt;</span>
$$
<span class="se">\b</span>egin{align}
D_{KL}(P^<span class="err">*</span>(y|x_i)<span class="se">\ </span>||<span class="se">\ </span>P(y|x_i; <span class="se">\T</span>heta)) 
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i) log \frac{P^*</span>(y|x_i)}{P(y|x_i; <span class="se">\T</span>heta)} <span class="se">\\</span>
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i)[logP^*</span>(y|x_i) - logP(y|x_i; <span class="se">\T</span>heta)] <span class="se">\\</span>
    &amp;= <span class="se">\s</span>um_{y} P^<span class="ge">*(y|x_i)logP^*</span>(y|x_i) - <span class="se">\s</span>um_{y} P^<span class="err">*</span>(y|x_i)logP(y|x_i; <span class="se">\T</span>heta)
<span class="se">\e</span>nd{align}
$$
<span class="nt">&lt;Mandatory</span> <span class="na">Blank</span> <span class="na">Line</span><span class="nt">&gt;</span>
</pre></td>
</tr></tbody></table></code></div>
</div>

Example 2

The second problem is simpler. The standard output from a python console was marked problematic here.

Steps To Reproduce

I have made a post to reproduce all problems described in this issue here and you can find the markdown file for the post here.

Expected Behavior

1. Since the page can vertically grow downwards (almost) indefinitely, perhaps vertical scroll bars should never trigger in table?
2. Since kramdown translate markdown files to html and the math equation was already in the right html form (at least the contents are right, not sure about the format). I'm not familiar with the next steps before the final results were displayed in browser, so I'm not sure if it's a MathJax's problem. If so, I'll report it in MathJax's repo.
3. I have tried my best to compare the html in light and dark mode and they are the same to me. But the behavior mentioned above is a bit confusing, especially the italic behavior. So I'm not sure if the html has been generated (i.e. if the problem is caused by kramdown).

Environment

• Ruby: ruby 3.2.3 (2024-01-18 revision 52bb2ac0a6) [x86_64-darwin23]
• Jekyll: jekyll (4.3.3)
• Chirpy: jekyll-theme-chirpy (7.1.1)

Anything else?

No response

[huanyushi]

The second problem

I think you should use double & rather than a single &, if you want two columns to align.

As your example,

$$ \begin{alignat}{2} v_{\pi 1}^{(0)} &= v_0 \nonumber\\ v_{\pi 1}^{(1)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(0)} &&\longrightarrow v_1 \longrightarrow \text{Value Iteration} \nonumber\\ v_{\pi 1}^{(2)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(1)} \nonumber\\ \vdots \nonumber\\ v_{\pi 1}^{(j)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(j-1)} &&\longrightarrow \bar{v_1} \longrightarrow \text{Truncated Policy Iteration} \nonumber\\ \vdots \nonumber\\ v_{\pi 1}^{(\infty)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(\infty)} &&\longrightarrow v_{\pi 1} \longrightarrow \text{Policy Iteration} \nonumber \end{alignat} $$

$$
\begin{alignat}{2}
v_{\pi 1}^{(0)} &= v_0 \nonumber\\
v_{\pi 1}^{(1)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(0)} &&\longrightarrow v_1 \longrightarrow \text{Value Iteration} \nonumber\\
v_{\pi 1}^{(2)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(1)} \nonumber\\
\vdots \nonumber\\
v_{\pi 1}^{(j)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(j-1)} &&\longrightarrow \bar{v_1} \longrightarrow \text{Truncated Policy Iteration} \nonumber\\
\vdots \nonumber\\
v_{\pi 1}^{(\infty)} &= r_{\pi 1} + \gamma P_{\pi 1} v_{\pi 1}^{(\infty)} &&\longrightarrow v_{\pi 1} \longrightarrow \text{Policy Iteration} \nonumber
\end{alignat}
$$

[ZhengYuan-Public]

@huanyushi
Thanks for the tip! It solved my 2nd problem ❤️

[huanyushi]

The first problem

I think the text in a table is a inline element. But you use \displaystyle{} in table, which will make your equation become block element (or the same height with a black element). This will exceed the height of the table, so a scroll bar is generated.

If you don't want a scroll bar in y direction, you can just delete \displaystyle{}.

Another way is that you can modify css of the original template:

.table-wrapper {
    overflow-y: hidden;
}

This won't change the scroll bar in x direction. As an example:

But I'm not sure if this will cause other problems.

[huanyushi]

The third problem

It seems that * will be recognized as italic mark in markdown code. I think you should use latex code. This problem may be caused by kramdown.

$$
\begin{align}
D_{KL}(P^*(y|x_i)\ ||\ P(y|x_i; \Theta)) 
   &= \sum_{y} P^*(y|x_i) log \frac{P^*(y|x_i)}{P(y|x_i; \Theta)} \\
   &= \sum_{y} P^*(y|x_i)[logP^*(y|x_i) - logP(y|x_i; \Theta)] \\
   &= \sum_{y} P^*(y|x_i)logP^*(y|x_i) - \sum_{y} P^*(y|x_i)logP(y|x_i; \Theta)
\end{align}
$$

[ZhengYuan-Public]

@huanyushi
Thanks for you reply. For the 2nd problem, I just personally think the displaystyle of some equations are prettier. Could you give me some hint on how to override the table-wrapper? I have no idea how to do it...

For the 3rd problem, changing code block type from markdown to latex can solve the problem with *. But the dark mode behavior for markdown, and the python example are still confusing.