How can I specify highlight styles to specific code blocks (multiple different code highlight styles)?

[edenian-prince]

Description

I have a quarto reveal.js presentation that needs to use multiple highlight-styles for different code chunks. The highlight-style: yaml option only takes two max arguments, one for light and the other for dark themes.

Is there a way to override the pandoc highlight styles within the quarto doc? Maybe using a fenced in code block to specify the style like this:

Slide 1

:::{.overide-highlight-style="espresso"}
``{r}
some code

``
:::

Slide 2

and having another code block with a different style:
:::{.overide-highlight-style="arrow"}
``{r}
some code other code

``
:::

It's not clear to me how I should go about this. If I could add a pandoc theme to a css rule I think this might be easier, but I'm not really sure how to do that either. I ran this in a terminal pandoc --print-highlight-style espresso > my.theme and got a theme file, but I'm not sure how I can make a css rule out of this without going wayy into a rabbit hole.

I'm not familiar with lua, but is this a situation where lua filters may be necessary?

[mcanouil]

Highlight style is used and applied by Pandoc globally.

See upstream issues:

• Printing highlighting styles as CSS jgm/pandoc#7860

From there, you could apply the styles manually or via a Lua filter.

[edenian-prince]

@mcanouil thank you! i think that worked. For anyone curious, here's how I got it to work

1. used the code in the link and assigned it to a file called espresso.css

style=${1:-espresso}
tmp=
trap 'rm -f "$tmp"' EXIT
tmp=$(mktemp)
echo '$highlighting-css$' > "$tmp"
echo '`test`{.c}' | pandoc --highlight-style=$style --template=$tmp > espresso.css

2. copy and paste the code in espresso.css and paste into my scss file
3. I wrapped the whole thing in a new rule called .express{}
4. I adjusted some of the code in the scss file to make the outputs look better in my slides
5. Then I wraped the code chunk in a fence with the name :::{.express} :::

qmd file:

---
title: "Highlighting examples"
title-slide-attributes: 
  data-background-color: "#bdcad4"
  data-background-size: contain
format: 
  revealjs:
    theme: [default,assets/another.scss]
    chalkboard: true
echo: true
revealjs-plugins:
  - codewindow
editor: visual
knitr: true
---

# with espresso highlighting {background-color="aquamarine"}

:::{.express}
```{r}
#| eval: false
#| classes: myframe
#| code-line-numbers: "1-2|"
mtcars |>
  filter(color==5) %>%
  mutate(hello=15)
# a comment

```
:::

# without espresso highlighting {background-color="aquamarine"}

```{r}
#| eval: false
#| classes: myframe
mtcars |>
  filter(color==5) %>%
  mutate(hello=15)
# a comment

```

here's the scss file:

/*-- scss:defaults --*/
$theme-darkblue: #01364C;

/*-- scss:rules --*/
.myframe {
  /*box-shadow: $back-blue 10px 5px 5px 0px;*/
  border: none;
  border-radius: 5px;
  margin-bottom: 10px !important;
  box-shadow: 0 20px 47px rgb(0 0 0 / 55%);
  width: fit-content;
  margin: auto !important;
  
}

.express {
  pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; text-align: right; vertical-align: baseline;
    border: none; 
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    background-color: #2a211c;
    color: #bdae9d;
  }
pre.numberSource { color:#bdae9d;}
div.sourceCode
  { color: #bdae9d; background-color: #2a211c; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ffff00; } /* Alert */
code span.an { color: #0066ff; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { } /* Attribute */
code span.bn { color: #44aa43; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #43a8ed; font-weight: bold; } /* ControlFlow */
code span.ch { color: #049b0a; } /* Char */
code span.cn { } /* Constant */
code span.co { color: #0066ff; font-weight: bold; font-style: italic; } /* Comment */
code span.do { color: #0066ff; font-style: italic; } /* Documentation */
code span.dt { text-decoration: underline; } /* DataType */
code span.dv { color: #44aa43; } /* DecVal */
code span.er { color: #ffff00; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #44aa43; } /* Float */
code span.fu { color: #ff9358; font-weight: bold; } /* Function */
code span.im { } /* Import */
code span.in { color: #0066ff; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #43a8ed; font-weight: bold; } /* Keyword */
code span.op { } /* Operator */
code span.pp { font-weight: bold; } /* Preprocessor */
code span.sc { color: #049b0a; } /* SpecialChar */
code span.ss { color: #049b0a; } /* SpecialString */
code span.st { color: #049b0a; } /* String */
code span.va { } /* Variable */
code span.vs { color: #049b0a; } /* VerbatimString */
code span.wa { color: #ffff00; font-weight: bold; } /* Warning */
code span.text { color: #bdae9d; font-weight: bold; } /* text */

code.sourceCode.r {
  background-color: #2a211c;
  
}

a {
  color: #bdae9d;
}

}

.reveal pre code {
  background-color: #2a211c;
  color: #bdae9d;
}

[cderv]

Please can you format correctly so that your shared experience can be really easy to read for others ?

https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us

Thank you !

[edenian-prince]

@cderv ah yes, thank you! hopefully it's formatted better now.

I also wanted to add some notes for anyone who finds this in the future. You can alter the pandoc highlight style in a code block by highlighting the part you want to change and inspecting it in chrome. The html will tell you what class/span it is. Once you have the class name you can reference it in your pandoc custom scss rule.

So for example, I wanted to highlight anything in my code chunk that had this type of comment, two #'s followed by four -'s ## ---- comment. I found that that comment uses the class code span.do

code span.do {
    color: #5e5e5e;
    font-style: italic;
}

I wanted to change that color to gold. So in my pandoc custom scss rule I did this:

.custom-pandoc{

   other-rules{} ...

   code span.do {
       color: gold;
       font-style: italic;
  }
}

Then I could add that rule into my code block with the custom highlighting called in the classes: custom-pandoc statement like this:

```{r}
#| echo: true
#| classes: custom-pandoc
code here
```