Specifying the syntax highlighting theme styles to use for noclasses=true

[will]

I usually set markup.highlight.noclasses = false and put a Chroma stylesheet in the webpage. However, I noticed that these CSS classes are showing up in Atom feeds, and when they’re rendered in a feed reader, they’ll be meaningless.

It would be useful to be able to set noclasses=true and specify which Chroma scheme to use for styles, so the content will display the same in HTML and Atom outputs. Or have the ability to do that for specific output formats like Atom, so HTML output can still leverage classes from stylesheets.

[jmooring]

Markdown render hooks have a lookup order just like other templates.

layouts/_default/_markup/render-codeblock.rss.xml

{{ $result := transform.HighlightCodeBlock . (merge .Options (dict "noClasses" true)) }}
{{ $result.Wrapped }}

hugo.toml

[markup.highlight]
style = 'gruvbox-light' # change this if you want RSS feed to have different style
noClasses = false

The HTML output format will use classes plus a stylesheet generated by hugo gen chromastyles --style foo, while the RSS output format uses inline styles instead of classes.

[will]

@jmooring Thanks, but unfortunately that appears to only apply to the rendering of the content of the page generating the XML output, not the rendering of the content of its subpages. In other words, I see styles for the home page’s content, but I still see classes for pages “under” the home page in the feed. Perhaps I’m missing something?

Is there a way to manually render page content within the context of another output type?

For reference, I have in render-codeblock.atom.xml:

{{ $result := transform.HighlightCodeBlock . (merge .Options (dict "noClasses" true "style" "monokai")) }}

{{ $result.Wrapped }}

[jmooring]

I am unable to reproduce what you describe.

git clone --single-branch -b hugo-forum-topic-53759 https://github.com/jmooring/hugo-testing hugo-forum-topic-53759
cd hugo-forum-topic-53759
hugo server

[will]

I didn’t see a list.atom.xml default layout in your branch (or list.rss.xml), so I’m not sure what you were seeing.

Hmm, when I set up your branch like mine by applying this diff:

diff --git a/content/posts/_index.md b/content/posts/_index.md
index 596587b..bc6964c 100644
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@@ -3,3 +3,8 @@
 date = 2025-03-03T13:44:57-08:00
 draft = false
 +++
+
+```python
+def f(x, y):
+  x[y] = y
+```
diff --git a/hugo.toml b/hugo.toml
index ee89fef..cd64a5e 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -15,3 +15,18 @@ weight = 10
 name = 'Posts'
 pageRef = '/posts'
 weight = 20
+
+[mediatypes."application/atom+xml"]
+suffixes = ["xml"]
+
+[outputformats.atom]
+basename = "atom"
+isplaintext = true
+mediatype = "application/atom+xml"
+name = "atom"
+
+[outputs]
+home = ["atom", "html"]
+section = ["atom", "html"]
+taxonomy = ["atom", "html"]
+term = ["atom", "html"]
diff --git a/layouts/_default/_markup/render-codeblock.rss.xml b/layouts/_default/_markup/render-codeblock.atom.xml
similarity index 100%
rename from layouts/_default/_markup/render-codeblock.rss.xml
rename to layouts/_default/_markup/render-codeblock.atom.xml
diff --git a/layouts/_default/list.atom.xml b/layouts/_default/list.atom.xml
new file mode 100644
index 0000000..50de020
--- /dev/null
+++ b/layouts/_default/list.atom.xml
@@ -0,0 +1,21 @@
+{{ $page := . }}
+
+<?xml version="1.0" encoding="utf-8"?>
+
+<feed xmlns="http://www.w3.org/2005/Atom">
+    {{ with .Content }}
+        <content type="html">
+            <![CDATA[{{ . }}]]>
+        </content>
+    {{ end }}
+
+    {{ range $page.Pages }}
+        <entry>
+            {{ with partial "func-minify.html" (dict "content" .Content) }}
+                <content type="html">
+                    <![CDATA[{{ . }}]]>
+                </content>
+            {{ end }}
+       </entry>
+    {{ end }}
+</feed>
diff --git a/layouts/partials/func-minify.html b/layouts/partials/func-minify.html
new file mode 100644
index 0000000..473f7bc
--- /dev/null
+++ b/layouts/partials/func-minify.html
@@ -0,0 +1,10 @@
+{{ $params := . }}
+
+{{ $content := $params.content }}
+{{ $extension := $params.extension | default "html" }}
+
+{{ $path := print (sha1 $content) ".paige.tmp." $extension }}
+
+{{ $result := (resources.FromString $path $content | minify).Content }}
+
+{{ return $result }}

I see styles instead of classes for both section content and subpage content in http://localhost:1313/posts/atom.xml, where I expected the section content to have classes because hugo.config has noClasses = false and the subpage content to have styles because render-codeblock.atom.xml has merge .Options (dict "noClasses" true):

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
        <content type="html">
            <![CDATA[<div class="highlight"><pre tabindex="0" style="color:#3c3836;background-color:#fbf1c7;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span><span style="color:#af3a03">def</span> <span style="color:#b57614">f</span>(x, y):
</span></span><span style="display:flex;"><span>  x[y] <span style="color:#af3a03">=</span> y</span></span></code></pre></div>
]]>
        </content>
        <entry>
                <content type="html">
                    <![CDATA[<div class="highlight my-class" id=my-id title="Fenced Code Block Example"><pre tabindex=0 style=color:#3c3836;background-color:#fbf1c7;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-go data-lang=go><span style=display:flex><span><span style=color:#af3a03>package</span> main
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#af3a03>import</span> <span style=color:#79740e>&#34;fmt&#34;</span>

[...snip...]

[jmooring]

@will

I didn’t see

The RSS feed is rendered by Hugo’s embedded RSS template.

@will

I’m not sure what you were seeing

It sounds to me like you didn’t build the site as I asked.

[will]

It sounds to me like you didn’t build the site as I asked.

I did, but I curled the atom feed, which wasn’t there, so I copied over the atom config. My mistake. The behavior is the same either way.

Given my previous comment, it seems that merge .Options (dict "noClasses" true) does apply to the parent and child pages, which makes sense.

So why was I still seeing classes in subpages? Well, it turns out it was only certain subpages which used shortcodes that were essentially just a wrapper around {{ highlight $content $lang $options }}. If I set $options to (dict "noclasses" true) in my own highlight shortcode, then the classes disappear in the feed as expected. I see classes for content from {{< highlight html >}} and {{< css.inline >}} too.

So now the question becomes: How can I get the highlight function to use the highlighting options of the render code block template of the current output format, or at least manually set noclasses=true in the options passed to the highlight function for certain output formats? I can change my highlight shortcode to do that, but how would it determine the current output format?

[jmooring]

Shortcodes have a lookup order too.

[jmooring]

@will

I curled the atom feed,

Just out of curiousity, why wouldn’t you simply click on the easy-to-use links that I provided on the home page?

[will]

Just out of curiousity, why wouldn’t you simply click on the easy-to-use links that I provided on the home page?

I didn’t have the browser tab open in front of me, so I didn’t know there was a link. Safari doesn’t display feed XML files, it just prompts to download it, so I couldn’t have used it anyway. I was already debugging with an exampleSite and curl, so I just killed hugo server and re-ran it on your repo.

---

Shortcodes have a lookup order too.

Ah, gotcha. I was able to do the right thing in my own shortcode by copying code.html to code.xml and setting noclasses=true there.

Still, that doesn’t handle other shortcodes like the built-in ones mentioned above, and that would be useful.

Thanks for your help!