Customize the html output of theorem div

[AlbertLei]

There are some minor issues of the html output of theorem div. I am using quarto v0.3.114 on mac os.

A minimal example:

::: {#thm-line}

The equation of any straight line, called a linear equation, can be 
written as: $y=ax+b$.

A second par.

:::

See @thm-line.

::: {#thm-line2}

A second theorem.

:::

HTML output:

In the example above:

(1) Sometimes the theorem body begins in a new paragraph (as in Theorem 2), sometimes just following the theorem tag (as in Theorem 1). Not sure whether this is a design choice or not, but it might be better to let the body just follow the theorem tag for consistency.

(2) It's hard to tell the scope of the theorem body. For example, in theorem 1 "A second par" is part of the body, while "See theorem 1" is not. A possible fix is to put the whole theorem in a box environment. From my experience, many math blogs do that (eg, Terry Tao's blog). Another fix is to italicize the whole theorem/lemma/etc as LaTeX does.

I personally prefer the first fix (i.e., box). A con of the italicize approach is that users may not be able to use the markdown syntax ** for emphasis once the whole texts are italicized. LaTeX solves this problem by using the \emph command, which produces normal texts for emphasis in a italicized environment.

[jjallaire]

Thanks for this feedback! We are just getting a stable release out right now so can't make these changes immediately, but we will the feedback here and in your other issues and make some significant improvement. Will ping back here with question and/or when there is new code ready to review.

[AlbertLei]

Thanks for the info. I am satisfied with my quarto experience so far. Keep up the good work!

[dgomezcastro]

This would be nice for html and, specially, revealjs.

A possible fix is to wrap the theorem in a div environment and allow people to modify in the css. I currently hard-code the div for my theorems and use the following CSS (adapted from this answer)

.theorem-unnumbered {
    display: block;
    font-style: italic;
    font-size: 24px;
    font-family: "Times New Roman";
    color: black;
    margin: 5px;
    border-radius: 10px;
    background-color: rgb(222,222,231);
    box-shadow: 5px 10px 8px #888888;
}
.theorem-unnumbered::before {
    content: "Theorem. ";
    font-weight: bold;
    font-style: normal;
    display: inline-block;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    color: white;
    border-radius: 10px 10px 0 0;
    padding: 10px 5px 5px 15px;
    background-color: rgb(38, 38, 134);
}
.theorem-unnumbered p {
    padding: 15px 15px 15px 15px;
}