@manton I was trying to work on colors for code on my theme and on the bottom of the default theme’s css is what I think is the right place to set syntax highlight colors but I have no idea what all these things are referencing. Any guidance would be great, or if there is an easier way to import a syntax highlight scheme…
Hugo comes with a builtin selection of syntax highlighting styles. From the screenshot, it looks like you’re using Dracula. If you want your theme to use Dracula in code blocks, make sure your config.json contains a section like this:
"markup": {
"highlight": {
"style": "dracula"
}
}
I found that setting in Hugo’s documentation, and there’s a page about syntax highlightning as well.
I’ll have to figure it out, I ass that to my .json, which it is now the only lines in the file, it was blank before. Syntax isn’t highlighting… I wonder if I have to yank the other syntax stuff out of the stylesheet? maybe I’ll comment it out and try.
Try editing the config.json located under Default Templates instead. It should contain multiple lines with a markup property already there; complement that property with the lines above.
I got it, but now I have a conflict with the background color. I have to figure out how to resolve that. It can be seen at Tim Apple - Code (micro.blog)
What kind of conflict do you have, and what end result do you want? Maybe you are looking for something like this?
/** Code formatting */
pre, code {
font-size: 15px;
border: 1px solid #e8e8e8;
border-radius: 3px;
background-color: #393b58 !important;
}
Notice how I added !important to override the inline style from Hugo. That changes the code block to look like this:
You are now my hero…lol. I’m trying to figure out one last thing. On the homepage the code doesn’t show as code… if you look at Tim Apple Test(micro.blog). I don’t know if this can be remedied?
Based on what I’m seeing in the HTML, this was not placed in fenced code blocks or something similar for Markdown to properly see it as code. Without the Markdown, it’s hard to be sure, but make sure you’re wrapped in three ``` and a new line before and after.
Yeah, I have the start and lead ``` and it shows up when you click into the post, just not on the homepage with all the posts…
That’s because you’re showing summaries of the post on the homepage. The template for the homepage probably uses {{ .Summary }} instead of {{ .Content }}.
Summaries are great, but they are a summary of the text content. Moreover, it’s famously bad at handling certain types of edge cases, like posts starting with an image or a code block. There’s an open issue for that at the Hugo repository on GitHub.
So you have to work around that problem by:
- Avoid publishing blog posts that start with a code block. Always start with a long enough text paragraph instead. (Or use a short text paragraph and truncate the post with
<!--more-->.) - Change the template to show the full posts instead of summaries. Use
{{ .Content }}instead of{{ .Summary }}. - Implement your own summary functionality using the Hugo templating language. I’ll leave that as an exercise to the reader. But maybe the following is a good start?
{{ .Content | truncate 70 }}
3 Likes