Why some part of my code get red color (maybe it's syntax check or something like that?)

[ZhengYuan-Public]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

I'm trying to create a template for math equations so I can speed up my writing process. There is a problem I noticed when I display my LaTeX equations as markdown code block (see pic below). I wonder why this is happening (it seems something characters became italic, so maybe it's a problem from kramdown?) and how to fix it.

Here is the text for the equation:

$$
\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}
$$

Here is the HTML file generated in the _site folder:

</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>

Operations you have already tried

Nothing yet.

Anything else?

No response

[ForsakenDelusion]

same question

[tis-starlight]

To fix this, add the following to assets/css/jekyll-theme-chirpy.scss file. If you don’t have the file already, create it:

html[data-mode=light] .highlight .err {
  color: var(--code-color);
  background-color: #ffffff00;
}

html:not([data-mode]) .highlight .err, html[data-mode=dark] .highlight .err {
  color: var(--code-color);
  background-color: #00000000;
}

---

edit: Solutions to prevent subscripts in formulas from becoming italicized

[ForsakenDelusion]

Hey bro,you know what,I absolutely adore you.But by the way, If people create using starer as I do, then they need to fill in the following content. For details, please see customizing-the-stylesheet

---
---

@use 'main
{%- if jekyll.environment == 'production' -%}
  .bundle
{%- endif -%}
';

/* append your custom style below */
html[data-mode=light] .highlight .err {
  color: unset;  /* I use unset to disable err?It seems to be working.. */
  background-color: unset;
}

html:not([data-mode]) .highlight .err, html[data-mode=dark] .highlight .err {
  color: unset;
  background-color: unset;
}