Worker CSS prevents bold formatting of inline code in Markdown cells

mootari commented 2 years ago

Describe the bug

Given an inline code element that is wrapped in <strong>:

**`this should be bold`**

the text will still display in normal weight, because Observable's worker styles contain the following declaration:

pre, code, tt {
    font: var(--monospace-font);
}

which overrides the bold formatting of the parent <strong>.

Expected behavior

Ensure that bold formatting is restored, by adding the following rule:

strong pre, strong code, strong tt {
  font-weight: bold;
}

Additional context

Ideally each property would have been defined separately:

pre, code, tt {
    font-family: var(--monospace);
    font-size: 14px;
    line-height: 1.5;
}

However, some authors may have redefined --monospace-font, and this change would break their styles.

Workaround

Add the following line in any Markdown or HTML cell:

<style>strong code { font-weight: bold }</style>

mootari commented 1 year ago

This also affects <code> inside headings.

CobusT commented 1 year ago

We opted to define the properties separately.

pre, code, tt {
    font-family: var(--monospace);
    font-size: 14px;
    line-height: 1.5;
}

Hoping it doesn't affect people who have redefined --monospace-font too much.

observablehq / feedback