Summary Views Not Rendering Syntax Highlighting

I have a home page view that renders a list of all of my sites pages. If the summary of one of the pages includes a content snippet with syntax highlighting, the rendered summary on the home page view doesn’t retain the formatting. See the image below:

Where as the post at locahost:1313/posts/my-first-post does have the syntax highlighting.

I’m using the Hyde theme from here.

How can I get the home page summary view to retain the syntax highlighting format?

Hi, we cannot help you with just a screenshot. We’d need to see your code.

1 Like

The code I’m using right now is just from the Hyde theme from spf13. The source can be found here:

You could try piping the summary to markdownify. AKA override the index template and edit line 9 here https://github.com/spf13/hyde/blob/c0cdd0ea1b477246ba9cb9e7123e80535e97ea8f/layouts/index.html#L9

To be:

{{ .Summary | markdownify }}

@zwbetz I tried what you suggested and that doesn’t work either.

Any other possible options? Thoughts/suggestions?

Thinking about this some more, I remember @budparr documenting different summary behavior depending on how the summary content was specified.

See Inconsistent behavior with .Summary tag

Then try specifying your summary with the more syntax:

<!--more-->
1 Like

I tried this snippet of code from that discussion:

I get the content wrapped in the <p> </p> tags (no <!–more–> was specified in the content). But the formatting is still the same. Sounds like that’s consistent with the behavior you were experiencing in that discussion.

Did you try adding the more comment into your content?

Yes I did. I didn’t get the <p> </p> tags wrapped around the Summary content, so I know that conditional block of code was working. It didn’t lead to the results I was hoping for though.

Hmm. I don’t use the summary variable in my personal projects so I’m not familiar with it like others. Sorry I couldn’t help. Perhaps someone else knows a way

Ah, I got it to work!

I misread this https://gohugo.io/content-management/summaries/#manual-summary-splitting

Content that comes before the summary divider will be used as that content’s summary and stored in the .Summary page variable with all HTML formatting intact.

I put the <!–more–> summary divider after content and it worked great!