Syntax Highlighter in Code Blocks

support
1

Looking for some syntax highlighting in the code blocks. I want to avoid the SyntaxHighlighter By Alex Gorbatchev, as I understand it’s unnecessary with hugo markdown, and anyway I didn’t see any brushes for elisp, and the ones I loaded didn’t work.

The bundled syntax highlighter is not working so far with my set-up. I have syntax.css loaded when the page loads, and pygmentsCodeFences = true in the config. Also have toggled on and off pygmentsUseClasses = true, doesn’t seem to make any difference. I am using ~~~ to define the code block rather than backticks, which works when hugo renders the site (except for the syntax highlighter).

Here’s sample code block before rendering that doesn’t work:

~~~{elisp}
;hydra
(use-package hydra
;:pin melpa-stable
:config
(use-package use-package-hydra
;:pin melpa-stable
);use-package-hydra
(use-package hydra-posframe
:load-path hydra-posframe-p
:config
(require 'hydra-posframe)
:custom
(hydra-posframe-parameters
'((left-fringe . 4) (right-fringe . 4) (height . 18) (width . 105) (min-height . 17) (max-height . 30) (top . 25)))
:custom-face
(hydra-posframe-border-face ((t (:background "#ffffff"))))
(hydra-posframe-face ((t (:background-color "#6272a4"))))
:hook
(after-init . hydra-posframe-enable)
);end use-package-hydra-posframe
);end use-package hydra
;Pretty Hydra
(use-package pretty-hydra
:config
(require 'pretty-hydra)
);end use package pretty hyrda
;title generator
(require 's)
(require 'all-the-icons)
(with-eval-after-load 'all-the-icons
(declare-function all-the-icons-faicon 'all-the-icons)
(declare-function all-the-icons-fileicon 'all-the-icons)
(declare-function all-the-icons-material 'all-the-icons)
(declare-function all-the-icons-octicon 'all-the-icons)
)
;define an icon function with all-the-icons-faicon
;to use filecon, etc, define same function with icon set
 (defun with-faicon (icon str &rest height v-adjust)
    (s-concat (all-the-icons-faicon icon :v-adjust (or v-adjust 0) :height (or height 1)) " " str))
;filecon
 (defun with-fileicon (icon str &rest height v-adjust)
    (s-concat (all-the-icons-fileicon icon :v-adjust (or v-adjust 0) :height (or height 1)) " " str))

~~~

After rendering the html reads as this:

<pre><code class="language-elisp">
;hydra
(use-package hydra
;:pin melpa-stable
:config
(use-package use-package-hydra
;:pin melpa-stable
);use-package-hydra
(use-package hydra-posframe
:load-path hydra-posframe-p
:config
(require 'hydra-posframe)
:custom
(hydra-posframe-parameters
'((left-fringe . 4) (right-fringe . 4) (height . 18) (width . 105) (min-height . 17) (max-height . 30) (top . 25)))
:custom-face
(hydra-posframe-border-face ((t (:background &quot;#ffffff&quot;))))
(hydra-posframe-face ((t (:background-color &quot;#6272a4&quot;))))
:hook
(after-init . hydra-posframe-enable)
);end use-package-hydra-posframe
);end use-package hydra
;Pretty Hydra
(use-package pretty-hydra
:config
(require 'pretty-hydra)
);end use package pretty hyrda
;title generator
(require 's)
(require 'all-the-icons)
(with-eval-after-load 'all-the-icons
(declare-function all-the-icons-faicon 'all-the-icons)
(declare-function all-the-icons-fileicon 'all-the-icons)
(declare-function all-the-icons-material 'all-the-icons)
(declare-function all-the-icons-octicon 'all-the-icons)
)
;define an icon function with all-the-icons-faicon
;to use filecon, etc, define same function with icon set
 (defun with-faicon (icon str &amp;rest height v-adjust)
    (s-concat (all-the-icons-faicon icon :v-adjust (or v-adjust 0) :height (or height 1)) &quot; &quot; str))
;filecon
 (defun with-fileicon (icon str &amp;rest height v-adjust)
    (s-concat (all-the-icons-fileicon icon :v-adjust (or v-adjust 0) :height (or height 1)) &quot; &quot; str))

</code></pre>

Looking at syntax.css there are a lot of classes, for example line numbers, .chroma .ln . Getting these working in the code blocks would be stellar.

Any tips here for a Hugo novice?

2

I’ve written on this in the past, maybe it’s helpful https://zwbetz.com/syntax-highlighting-in-hugo-with-chroma/

1 Like
3

Thanks. Very helpful!

Put at first the syntax options under a list in the configuration file. Did not work until moved them to the main configuration section.

Nope:

[params]
pygmentsOptions = "linenos=5"
pygmentsCodefences = true
pygmentsStyle = "pygments"

Yup:

pygmentsOptions = "linenos=5"
pygmentsCodefences = true
pygmentsStyle = "pygments"

Problem: dark style code block background on white page background propogates out of code block.

background-propogate
background-propogate.PNG1781×278 14.7 KB

It looks like chroma generates a table inside of a div with inline styling, inside of a div with class “highlight.” Deselecting background from element.style{}, when the div with inline styling is selected (in
devtools), isolates the background to the code block with border-radius properties.

Any idea how to fix this?

Also, is there a way to localize the pygmentsStyle to the post frontmatter to have different code block styles for different posts?

Any wiz encountered this? Any tips?

4

Add some custom CSS to tweak Chroma’s styles.

Not that I know of.

Edit: On 2nd thought, you could generate a Chroma stylesheet for each style that you wanted. Then in your page front matter, have a param that specifies which stylesheet to use, then handle that switching logic in your template.

1 Like
5

Thanks. Good to know!