Is Inline Code Syntax Highlighting Possible

I want to use inline code syntax highlighting for both bookdown::pdf_document2 output and for blogdown. I came across this question on Stack Overflow. They said to do either `code`{.language} or `code`{:.language}. So I tried these two:

`cd .. && ls`{.shell}
`cd .. && ls`{:.shell}

Neither one worked. Is it possible to use inline code syntax highlighting?

The syntax you tried is indeed supported if you are using Pandoc's highlighting, meaning not using default highlighting argument in html_document() as it default to highlight.js. If you are using pdf_document() then this is ok. See doc of your format function Dynamic Documents for R • rmarkdown

Also you need to use a language supported by Pandoc highlighter and shell is not among supported class. You need to use bash not shell.

So try

`cd .. && ls`{.bash}
1 Like

shell is a supported class in highlight.js but not by pandoc's highlighter. Also, since I'm using blogdown, it uses highlight.js by default. How do I change this so that it uses pandoc's highlighting so I can use inline code syntax highlighting?

It seems like highlight.js support inline mode with a custom initialization (Highlight.JS Inline Code Syntax Highlightning · Issue #945 · highlightjs/highlight.js · GitHub) maybe not straightforward.

You can tweak option for default format blogdown::html_page() either per post or globally. You can also rely on Hugo Markdown renderer if their highlighting (chroma) is better for inline

See about format in blogdown in here 1.6 R Markdown vs. Markdown | blogdown: Creating Websites with R Markdown.

I don't know if switching highlighting could have big impact or not on your current website look. So choose the solution that suits you best

Changing the highlight option expects a highlight.js theme, not a pandoc theme, so that does not work. I tried to use Hugo shortcodes to use inline syntax highlighting: `r blogdown::shortcode("highlight", "bash", .content = "cd .. && ls", linenos = "inline")`, but it gave me this error:

> blogdown::build_site(build_rmd = "newfile")
Rendering content/blog/2022-05-07-you-should-prefer-command-line-software/index.Rmd... Quitting from lines 2-116 (index.Rmd)
Error in args_string(...) : All arguments must be either named or unnamed
Calls: local ... eval -> <Anonymous> -> shortcode_vector -> args_string
Execution halted
Error: Failed to render content/blog/2022-05-07-you-should-prefer-command-line-software/index.Rmd
Execution halted

As documented in An R Markdown output format for blogdown web pages — html_page • blogdown the highlight parameter is passed to bookdown::html_document2() with no further processing. So you should be able to pass a Pandoc highlight theme like tango or pygments. If it does not work, this could be because of something else. Maybe it conflicts with the Hugo theme used.

It seems like the blogdown::shortcode function is not perfectly compatible with setting attributes on highlight shortcode.
You can do this probably to make it works

blogdown::shortcode_html("highlight bash", linenos = "inline", .content = "cd .. && ls")
{{< highlight bash linenos="inline" >}}
cd .. && ls
{{< /highlight bash >}}

I don't know how that would behave within blogdown::html_page format, but I let you try and tell me :slight_smile:

The bookdown::html_document2 will not work with blogdown posts. I must set the output to blogdown::html_page.

Unfortunately, that gave me the same error as before. Right know it seems like inline syntax highlighting is not possible for me for blogdown, but it works in bookdown::pdf_document2 output. It's not a huge issue though, so it's not worth worrying about too much. Thanks for helping.

blogdown::html_page() is built upon bookdown::html_document2() and some argument are passed to this base function - it is explained in the doc linked above

Which one of the error ? Inline highlighting not working ?

Highlighting in blogdown is highly dependent of the hugo theme you are using as their could be conflict with Pandoc's highligting because highligth.js is used in the theme. Sometimes, it is built-in like in this topic

You need to carefully read the documentation of your theme and add the necessary piece of code to activate inline highlighting with highlight.js if not supported by default for example.

I don't know how I can help much. I hope you'll find a solution !

For the topic you linked, it is about the minimal theme. The minimal theme uses highlight.js. And it does not have inline syntax highlighting for different languages, it just has the same syntax highlighting for all languages.

The theme I use is fuji. I do not know much about HTML, SCSS, or JavaScript. But I do know that highlighting is mentioned in /assets/scss/_primer/markdown/code.scss. I'm fine with using either highlight.js or pandoc syntax highlighting, I just want inline syntax highlighting to work. I will leave another reply if I end up finding a solution.

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

If you have a query related to it or one of the replies, start a new topic and refer back with a link.