Is Inline Code Syntax Highlighting Possible

[Amarakon]

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?

[cderv]

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}

[Amarakon]

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?

[cderv]

@Amarakon

Also, since I'm using blogdown, it uses highlight.js by default

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.

@Amarakon

How do I change this so that it uses pandoc's highlighting so I can use inline code syntax highlighting?

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

[Amarakon]

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

[cderv]

@Amarakon

Changing the highlight option expects a highlight.js theme, not a pandoc theme, so that does not work.

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.

@Amarakon

I tried to use Hugo shortcodes to use inline syntax highlighting

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

[Amarakon]

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

@cderv

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 >}}

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.

[cderv]

@Amarakon

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

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

@Amarakon

Unfortunately, that gave me the same error as before.

Which one of the error ? Inline highlighting not working ?

@Amarakon

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.

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

blogdown inline code color

Hi, I'm using this template [https://github.com/calintat/minimal] to create my website. Now, I've noticed that every time I write a code inline like for example the following line: dlyr basics: (i)filter(), (ii) arrange(), (iii) select(), (iv) mutate(), (v) summarize() and pipeline operator I get the code in red. Like the following: [image] I tried searching in the main.css file already but couldn't fine any line where I could change the color. I don't have the issue with the color when I knit the Rmd file to pdf or to word. Does anyone how I can edit the color of the inline code? I would really appreciate any help Karen

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 !

[Amarakon]

@cderv

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

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.