When I use this in my posts:
```yaml
apiVersion: apps/v1beta1
kind: Deployment
metadata:
name: helloweb
```
Highlight.js is not able to detect the YAML language. So instead of rendering with a code block with full-gray background, it renders like this:
apiVersion: apps/v1beta1
kind: Deployment
metadata
name: helloweb
Is anyone else seeing this problem? When I remove the “yaml” directive on the first line, it renders as a normal code-block but it can’t detect that it’s YAML.
We can’t tell how you have it set up without seeing your code, so share a link if you want someone to check it.
When the code renders, is the class="language-yaml" being set? Also, I don’t see YAML on the highlightjs language list. For whatever reason, folks are trying to get it included in the base language set. In the meantime, at least one person figured out how to highlight YAML in Hugo.
I don’t think this is a Hugo issue.
I though the same thing as you, but I do see that YAML is listed in the highlight.js demo page (choose ‘Config’ in the left hand side menu. YAML is at the bottom in that category.)
But other than that, we’ll indeed have to see the Hugo code to figure this one out (if it’s a Hugo problem at all).
Technically YAML is a superset of JSON.
I think this means Hugo’s default code highlighter choice for posts is not great.
I’ve used static site generators Jekyll (ruby) and Pelican (python) before and both supported the ```yaml syntax out of the box just fine.
I think Hugo should do better here. YAML is a fairly common language in blog posts etc.
(I’ve tried mitigating this problem by using {{<highlight yaml>}} shortcode, however since I use other shortcodes within my code blocks, for some reason, nesting did not work and the inner shortcode was rendered as-is.)
EDIT(2018-02-14): I reported this at Hugo’s issue tracker. https://github.com/gohugoio/hugo/issues/4410 I think it warrants a bug report.
The default and built-in native code highlighter in Hugo is Chroma and is both great and fantastic.
@bep Apologies if I’m getting this wrong. When I use triple-backtick syntax in my markdown posts, the resulting <pre> tag is not getting any special treatment by Chroma.
Chroma seems to be working only when I use the {{<highlight}} shortcode. (The contents of the <pre> tag is processed heavily.)
Here is a screenshot illustrating the problem (this is the “kiss” theme):
Here’s the source markdown for this:
Note that I do not intend to use the {{<highlight}} shortcode as it will not render correctly on GitHub markdown and is not portable to other blogging platforms. I need the triple-backtick syntax to work.
Set
pygmentsCodeFences = true
In your config.
Thanks this has solved my problem.
I think what has confused me was that the stock theme I was using was importing Highlight.js.
Was wondering… Should pygmentsCodeFences and other pygments* variables that apply to Chroma too be deprecated (may be obsoleted in about a year or so?), and be replaced with generic names that refer to neither pygments nor Chroma?
Something like highlightCodeFences or syntaxhlCodeFences?