Only customize display equations in R not inline equations

Publishing Your Results
1

Hello everyone,

I would like to edit the style of the display equations in R Markdown, but not the inline equations. Apparently both are located within a span tag with class equal to math, so the CSS selector span.math will style both.

One solution that did work, but violates the underlying principle of R Markdown (https://rmarkdown.rstudio.com/authoring_pandoc_markdown.html%23raw-tex), is to apply an inline style attribute to a span tag wrapped around each display equation, which makes it hard to read the raw document.

Does the inline math equation have a unique id that separates it from display math equations? How would I find this out?

Is there an alternative way to solve this problem that does not involve using CSS selectors and knowing the id value for inline equations?

I am outputting to html and using the most recent version of RStudio. I have no additional extensions installed.

Cheers and thank you in advance,
Maureen

2

perhaps this ?

3

Hey, thank you for the response! I think this only works for pdf documents. When I try to use the newly defined function it does not work... it merely becomes in the html output verbatim as "\myNewFunction{$$the equation I want to format$$}". Putting the function reference in the $$s does not work either.

Cheers,
Maureen

4

image
image1440×900 131 KB

Well,

I figured out how to do it using the fenced_divs extension, but for some reason when I use the fenced div syntax for a displayed equation that is in the first element in a list, it changes the format of the first item in the list...see attached screenshot where the font color changes to black instead of staying orange. I am trying to turn the background color to pink for the displayed equations. See how it works for the subsequent two displayed equations. So there must be some bug in my code not the package...? Maybe someone sees something I don't?
Though, I do hope this post helps someone understand that you can use this extension, with this syntax and CSS to format R Markdown documents. The CSS code that is not included is just standard CSS code.

Here is the link to the reference I used:
https://pandoc.org/MANUAL.html

5

The block one should be a in span of class math and display and the inline one should be in a span of class math and inline. It is the first span of after the paragraph, the one most outer of the all block.

You can modify only the CSS for the inline element with this.

Example:

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

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{css, echo = FALSE}
.math.inline {
  background: red;
}
```


## R Markdown

$$
x + y
$$

$z+x$

image
image745×241 5.3 KB

Can you check that

6

Hello, Thank you for the response! That sort of CSS code is exactly the sort of code I am looking for, except for the block equations instead of the inline equations, but yes your code works great.

Do you know what the automatically assigned class is for the display equations? Display is a class I assigned and I have to write before every block equation like I did in the code above. It is not an automatically assigned class like .inline appears to be.

I am not sure what you mean by

I am still having trouble with some of the items in the bulleted list turning the color of the list numerals and I cannot figure out why. I am pretty sure it is not my code so I might file a bug, just as an update to everyone.

Update: If I explicitly style the list items using the "<li>" tag, then the issue goes away!

Update Actually the above post solves the issue if you combine it with this CSS code:

" .math:not([inline]) {
background-color: #f7f7f7;
}"

7

I believe it is display. You used the same name but in you code you used #display, so this is an ID in your case not a class. .math.display should target the block equations. And yes .math:not([inline]) this also works, but it will tarket any other node of class .math also.

To find the class of a node, you can use the inspector in your browser and look at where the element is encapsulated in.

image
image1791×372 25.5 KB

8

The code above initially worked and then all of a sudden it broke and stopped working, like the second time I ran it.

From your code view it definitely looks like the assigned class besides math is display. As you can see from the snapshot of my code, the class names are a lot more complicated:

image
image1440×900 143 KB

and include some inline style elements as well. I tried to reference the complicated class names and change the color just to make sure I knew which element I was selecting and then the font size changed. But it looks like the code you have above will work, and will hopefully work for most people. Interestingly enough, the color that is shown for the background when the element code is selected in the inspector is the color I assigned with the .math:not([inline]) code...

Thanks for the inspect element tip! I tried this, but saw how complicated the code was and thought I was looking at something else. It is nice to have conformation that this indeed is possible.

Cheers,
Maureen

9

Did you look into the code view in the tendered HTML or in the rstudio source pane ?
Seems like the second one.

Both are not the same and you should look into the first. Render the HTML and then open the code view with the inspector.

10

Thank you for the clarification on where to look. I was looking in the wrong place for changing the document output to html. I appreciate you pointing this out. The name of my element is slightly different, .MathJax_Display. I am so glad to know how to handle formatting elements in the future. Thanks!

Cheers,
Maureen

1 Like
11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.