"runin" & bfseries style for rmarkdown html section and subsection title - html

Question

I want to use the "runin" & bfseries style for section and subsection titles using rmarkdown
in both pdf and html, where "runin" means the section or subsection titles and the text are on the same line, and bfseries means using the bold black font-style for the titles.
In pdf, we can get these two goals by resorting to the latex and \usepackage{titlesec}, while in html I have no idea for the issues especially for the "runin" one (the bfseries one seems that it can be meet by manually adding something like **sec-title** or **subsec-title** ).
My demo rmd file is given as follows:
---
output:
html_document:
toc: no
keep_md: no
pdf_document:
latex_engine: pdflatex
keep_tex: no
header-includes:
- \usepackage{lipsum}
- \usepackage{titlesec}
- \titleformat{\section}[runin]{\bfseries}{}{0em}{}
- \titlespacing{\section}{0pt}{*3}{2ex}
- \titleformat{\subsection}[runin]{\bfseries}{}{0em}{}
- \titlespacing{\subsection}{0pt}{*1}{2ex}
---
```{css style, echo = FALSE}
h1{font-size: 20px; color: black;}
h2{font-size: 20px; color: black;}
body{font-size: 20px;}
```
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
# Ex. 14.3
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
## Solution
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
\lipsum[1]
# Ex. 14.4
Cluster the demographic data of Table $14.1$ using a classification tree. Specifically, generate a reference sample of the same size of the training set, by randomly permuting the values within each feature. Build a classification tree to the training sample (class 1 ) and the reference sample (class 0 ) and describe the terminal nodes having highest estimated class 1 probability. Compare the results to the PRIM results near Table $14.1$ and also to the results of $K$-means clustering applied to the same data.
## Solution
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
\lipsum[2]

Answer 1

This can be done with the help of CSS. Add the class .inline with title and subtitle for which you want to use "runin" & bfseries style.
---
output:
html_document:
toc: no
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{css style, echo = FALSE}
h1{font-size: 20px; color: black;}
h2{font-size: 20px; color: black;}
body{font-size: 20px;}
div.inline > h1,
div.inline > h2,
div.inline > p {
display: inline;
}
div.inline > h1,
div.inline > h2 {
font-weight: bold;
}
div.inline {
margin-top: 1em;
margin-bottom: 1em;
}
```
# Ex. 14.3 {.inline}
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
## Solution {.inline}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
# Ex. 14.4 {.inline}
Cluster the demographic data of Table $14.1$ using a classification tree. Specifically, generate a reference sample of the same size of the training set, by randomly permuting the values within each feature. Build a classification tree to the training sample (class 1 ) and the reference sample (class 0 ) and describe the terminal nodes having highest estimated class 1 probability. Compare the results to the PRIM results near Table $14.1$ and also to the results of $K$-means clustering applied to the same data.
## Solution {.inline}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Answer 2

If it is also a possibility to switch to Quarto (.qmd), there is the reference-able exercise option, e.g.
---
title: Exercise Example
format:
html:
css: styles.css
---
::: {#exr-14.3}
In Section 14.2.6 we discuss the use of CART or PRIM for constructing generalized association rules. Show that a problem occurs with either of these methods when we generate the random data from the productmarginal distribution; i.e., by randomly permuting the values for each of the variables. Propose ways to overcome this problem.
:::
::: {.solution}
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
:::
where styles.css looks like this:
.proof-title {
font-weight: bold;
}
Result: