Confining colorful background to the area of an equation in rmarkdown

December 8, 2021

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>

>Solution :

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 class="Highlighted">
$$Y = \beta_0 + \beta_ 1 X_1 + \ldots + \beta_n X_n.$$
</div>