# Triple-backtick syntax not working for yaml (hljs)

**URL:** <https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460>\
**Category:** support\
**Created:** [February 10, 2018, 12:43am UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460 "2018-02-10T00:43:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahmet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ahmet/32/5192_2.png) [@ahmet](https://discourse.gohugo.io/u/ahmet)\
**Post date:** [February 10, 2018, 12:43am UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/1 "2018-02-10T00:43:17Z")

</div>

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`  
&nbsp;&nbsp;`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.

---

<div class="post-metadata">

**Author:** ![maiki](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maiki/32/16384_2.png) [@maiki](https://discourse.gohugo.io/u/maiki)\
**Post date:** [February 10, 2018, 1:42am UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/2 "2018-02-10T01:42:36Z")

</div>

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](http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases). For whatever reason, folks are trying to get it included in the [base language set](https://github.com/isagalaev/highlight.js/issues/1632). In the meantime, at least one person figured out [how to highlight YAML in Hugo](https://netdevops.me/2017/how-to-add-yaml-highlight-in-highlight.js/).

I don’t think this is a Hugo issue.

---

<div class="post-metadata">

**Author:** ![Jura](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jura/32/13581_2.png) [@Jura](https://discourse.gohugo.io/u/Jura)\
**Post date:** [February 10, 2018, 6:15am UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/3 "2018-02-10T06:15:09Z")

</div>

> [@maiki](#):
>
> 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.

I though the same thing as you, but I do see that YAML is listed in the [highlight.js demo page](https://highlightjs.org/static/demo/) (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).

---

<div class="post-metadata">

**Author:** ![Mikhail](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikhail/32/1138_2.png) [@Mikhail](https://discourse.gohugo.io/u/Mikhail)\
**Post date:** [February 10, 2018, 6:42am UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/4 "2018-02-10T06:42:28Z")

</div>

Technically YAML is a superset of JSON.

---

<div class="post-metadata">

**Author:** ![ahmet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ahmet/32/5192_2.png) [@ahmet](https://discourse.gohugo.io/u/ahmet)\
**Post date:** [February 10, 2018, 11:58pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/5 "2018-02-10T23:58:36Z")

</div>

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](https://github.com/gohugoio/hugo/issues/4410) I think it warrants a bug report.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 14, 2018, 8:42pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/6 "2018-02-14T20:42:04Z")

</div>

> [@ahmet](#):
>
> I think this means Hugo’s default code highlighter choice for posts is not great.

The default and built-in native code highlighter in Hugo is Chroma and is both great and fantastic.

> **[GitHub - alecthomas/chroma: A general purpose syntax highlighter in pure Go](https://github.com/alecthomas/chroma)**
>
> A general purpose syntax highlighter in pure Go . Contribute to alecthomas/chroma development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![ahmet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ahmet/32/5192_2.png) [@ahmet](https://discourse.gohugo.io/u/ahmet)\
**Post date:** [February 14, 2018, 9:10pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/7 "2018-02-14T21:10:21Z")

</div>

@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):

> ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/8/8116432d938f0942756c3d90d02a6c49bd7890db.png)

Here’s the source markdown for this:

> ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/8/8abab0b31b7925c07a794fb9e03328bf96f508e4.png)

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.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [February 14, 2018, 9:12pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/8 "2018-02-14T21:12:32Z")

</div>

Set

```auto
pygmentsCodeFences = true

```

In your config.

---

<div class="post-metadata">

**Author:** ![ahmet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ahmet/32/5192_2.png) [@ahmet](https://discourse.gohugo.io/u/ahmet)\
**Post date:** [February 14, 2018, 9:19pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/9 "2018-02-14T21:19:53Z")

</div>

Thanks this has solved my problem.

I think what has confused me was that the stock theme I was using was importing Highlight.js.

---

<div class="post-metadata">

**Author:** ![kaushalmodi](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/kaushalmodi/32/2567_2.png) [@kaushalmodi](https://discourse.gohugo.io/u/kaushalmodi)\
**Post date:** [February 14, 2018, 9:20pm UTC](https://discourse.gohugo.io/t/triple-backtick-syntax-not-working-for-yaml-hljs/10460/10 "2018-02-14T21:20:32Z")

</div>

> [@bep](#):
>
> pygmentsCodeFences = true

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`?