如何通过CSS修改.rpres格式RMarkdown中的R代码字体？

Got it, let's work through why your CSS rule isn't taking effect and fix it up. The core issue here is likely a mismatched CSS selector—your current rule is targeting elements with class r that are inside a <code> tag, but that's not how R code blocks are structured in the HTML generated from .rpres files.

Step 1: Double-Check the DOM Structure #

First, re-inspect the R code block in Chrome DevTools to confirm the exact element hierarchy:

• Right-click on your R code block → Select "Inspect".
• You’ll probably see a structure like this (common in .rpres outputs):

  <div class="reveal">
    ...
    <pre class="r">
      <code class="hljs">your R code here</code>
    </pre>
    ...
  </div>
  

  Or occasionally, the <code> tag itself will have the r class:

  <code class="r hljs">your R code here</code>
  

Step 2: Use the Correct CSS Selector #

Adjust your rule to target the right elements based on the structure you found:

If <pre> has the r class (most common scenario)

Use this selector to target the <code> inside the R-specific <pre> block:

.reveal pre.r code {
  font-size: 180%;
  font-weight: bold;
  color: green;
}

If <code> itself has the r class

Switch to this selector instead:

.reveal code.r {
  font-size: 180%;
  font-weight: bold;
  color: green;
}

Step 3: Override Higher-Priority Styles (If Needed) #

If your custom styles still don’t apply, it’s because default Reveal.js or highlight.js styles have higher specificity. Add !important to force your rules to take precedence (this is a blunt but effective fix for presentation styling):

.reveal pre.r code {
  font-size: 180% !important;
  font-weight: bold !important;
  color: green !important;
}

Step 4: Confirm Your CSS is Loaded Last #

Make sure your custom CSS file loads after the default Reveal.js styles. In your .rpres file, add this at the top to link your stylesheet properly:

---
title: "My Presentation"
output:
  revealjs::revealjs_presentation:
    css: custom.css
---

That should get your R code blocks styled exactly how you want them!

内容的提问来源于stack exchange，提问作者JD Long