pdfquarto

Change how inline code is formatted in quarto PDF output

Quarto renders inline code (specified using backticks) in a very clear way when output to html: it changes the font, text color, and background color. But when outputting to PDF, it only changes the font, which is so subtle a change that most readers won't even notice. How do I manually change the formatting of inline code in a PDF document to match the formatting used in html documents?

Here's the default formatting of inline code in a quarto html document:

---
title: "test"
format: html
---

Use something like `this code` to do something.

enter image description here

And here's the default formatting when output to PDF:

---
title: "test"
format: pdf
---

Use something like `this code` to do something.

enter image description here

Solution

  • You can tweak \texttt, e.g. providing the gray background color and the purple font color from HTML output:

    \definecolor{codefontcolor}{RGB}{125,18,186}
\definecolor{codebggray}{HTML}{f8f9fa}
\let\textttOrig\texttt
\renewcommand{\texttt}[1]{\textttOrig{\colorbox{codebggray}{\textcolor{codefontcolor}{#1}}}}

    Using the default font, it would look like this in a .pdf:

    enter image description here

    Compared to the output in a .html:

    enter image description here

    You can also change the used font in .pdf output, one example is Source Code Pro:

    \usepackage{sourcecodepro}

    enter image description here

    ---
title: "test"
format: 
  pdf:
    include-in-header:
      text: |
        \usepackage{sourcecodepro}
        \definecolor{codefontcolor}{RGB}{125,18,186}
        \definecolor{codebggray}{HTML}{f8f9fa}
        \let\textttOrig\texttt
        \renewcommand{\texttt}[1]{\textttOrig{\colorbox{codebggray}{\textcolor{codefontcolor}{#1}}}}
---

Use something like `this code` to do something.