Syntax Highlighting

[daniel-wing]

I am using the theme through RStudio Blogdown package and I can't get the Syntax Highlighting working. I have tried every Param config I can think of and even tried to add a js.html in the patials/js folder to no success.

Is it just me? Any ideas on how to get it working?

[hanzei]

Could you share the code of your website?

[victoriadrake]

Hey @daniel-wing,

If this remains an issue please ensure pygmentsCodeFences = true and other syntax highlighting variables are set in your config file at the first level, and not under [params] or equivalent. Example config.toml:

baseURL = "http://example.com/"
theme = "introduction"
DefaultContentLanguage = "en"
pygmentsCodeFences = true

[params]
    themeStyle = "light"
...

Closing as stale for now.

[drmowinckels]

Hi.

I'm having issues with this at the moment. Been using this theme for my page a while, but trying to adapt to the theme updates, which broke some stuff.

baseURL                          = "http://example.com/"  # Your domain name. Must end with "/"
theme = "hugo-theme-introduction"
DefaultContentLanguage           = "en"                    # Default language for multilingual sites
pygmentsStyle       = "autumn"                    
pygmentsCodeFences  = true 
highlightStyle      = "monokai"     

[params]
    themeStyle                   = "light"                 # Choose "light" or "dark"

but I'm not getting code highlights :/

[victoriadrake]

Hi! Are you using code fencing properly? It should look like this in your markdown files:

```JavaScript
  const thisIsATest = () => {
    console.log("This is funny")
  }

Otherwise, I can be of more help if you link to your repo.

[github-actions[bot]]

It looks like this has been idle a while, so I am marking it as stale. Remove the label or comment if this issue should remain open.

[drmowinckels]

Hi.

Sorry for leaving this, I did not have time to actually fix the issue when I was trying last. Finally had some time to work with it, so this is what I have found so far.

Both I and the original poster are using the R-package blogdown for the website. This is where the issue is arising I believe. Since blogdown renders html, the code-fencing is actually not there for hugo to work with. This means that setting pygmentsCodeFences = true will not have any effect on pages rendered through blogdown.

This was not the case before integrated syntax-highlighting in hugo, so it really is a shame.

I am guessing this arises from what is discussed in a previous PR with Bulma and Chroma colliding.

I have tried generating chroma css and applying this through the customCSS parameter, but it does not seem to help.

[drmowinckels]

in case other blogdowners come here for help, I wrote a blogpost about how to fix syntax highlighting with this theme when using blogdown: https://drmowinckels.io/blog/changing-you-blogdown-workflow/