Syntax highlighting

[allanleal]

I find Doks one of the most elegant website templates for documentation. I'm wondering if Doks supports syntax highlighting (e.g., Python, C++, etc.). I could not find any code blocks with syntax highlighting in https://getdoks.org/.

[h-enk]

Thanks!

Doks supports the Hugo syntax highlighting. However I "switched it off" per default because I was not satisfied with the Chroma styles available (to match with the Doks look and feel). My idea was to implement the GitHub light syntax theme (best match with the Doks look and feel — in my opinion) and was in the process of converting it to a Chroma style (I was halfway and realized a 100% match is not feasible — so I stalled it). Also, the GitHub Chroma style is not what I had in mind (not really a match with the Primer style — I think).

That having said, you can enable syntax highlighting by uncommenting line 17 of ./assets/scss/app.scss:

// @import "components/syntax";

You would then get my half-half GitHub style. However, you could also generate an other style by following the Hugo instructions and copy that in ./assets/scss/components/_syntax.scss

Note: for production, make sure to add to the ...whitelister([ section of purgecss in ./config/postcss.config.js:

          './assets/scss/components/_syntax.scss',

Apart from Hugo syntax highlighting, you could also implement a npm package like e.g. prismjs.

Hope this helps.

[aghwotu]

Hello @h-enk. Sorry for the late response. It is a private repo. Is it okay if I add you as a collaborator? Thank you again.

[h-enk]

Hello @aghwotu, that's OK

[aghwotu]

Hello @h-enk I have added you to the repo 😀

[h-enk]

Hey @aghwotu, I've created a PR 😀

[aghwotu]

@h-enk I have merged it. It is superb! Thank you! You're awesome.

[allanleal]

Hi @h-enk - I'll also try out your solution later. I would recommend you however to have a switch/option in Doks to more easily enable this feature.

[vivekragunathan]

Yeah, it would be highly convenient if the code theme itself (at least for the well-known ones) can be specified in the config file

codeTheme = dracula

Something like that.

[h-enk]

Yeah, I think so too: #699