Confining colorful background to the area of an equation in rmarkdown-CodePudding

I would like to add a colorful background to equations. I have tried the code below, but, unfortunately, the colorful background expands to the margins instead of being confined to the equation. Could someone please help me?

---
title: "Untitled"
output: html_document
---

Some text

<div style="background-color: rgb(255,255,153);">
$$Y = \beta_0   \beta_ 1 X_1   \ldots   \beta_n X_n.$$
</div>

CodePudding user response：

You can do this with a CSS style. Put this into your document, or in a separate CSS file included in the YAML header:

<style>
span.MathJax {
  background-color: rgb(255,255,153)
}
</style>

That will make all of your MathJax code have a yellow background. If you only want display equations to have it, use

<style>
div.MathJax_Display > span.MathJax {
  background-color: rgb(255,255,153)
}
</style>

And if you only want one particular equation to have the colouring, then you should use a more specific selector, e.g.

<style>
#MathJax-Element-1-Frame {
  background-color: rgb(255,255,153)
}
</style>

where you would put in #MathJax-Element-2-Frame for the second equation, etc. With lots of equations this could be tedious, so you could add a class to the ones you want to highlight and select those, e.g.

<style>
div.Highlighted span.MathJax {
  background-color: rgb(255,255,153)
}
</style>

This one is regular:
$$Y = \beta_0   \beta_ 1 X_1   \ldots   \beta_n X_n.$$

This one is highlighted:
<div >
$$Y = \beta_0   \beta_ 1 X_1   \ldots   \beta_n X_n.$$
</div>

According to the comments, Bookdown may need you to request HTML-CSS rendering, which can be done with the right mouse click on one of the equations, and following the menus to Math Settings | Math Renderer | HTML-CSS.

CodePudding user response：

A DIV is a block element by default. A SPAN is an inline element.

Try this:

<span style="background-color: rgb(255,255,153);padding:10px;">
$$Y = \beta_0   \beta_ 1 X_1   \ldots   \beta_n X_n.$$
</span>

The padding controls the amount of color around the equation.