Style html element inserted in yml does not work

Question

Hello I have inserted html elements into my yml file

  content : |
    Hello! I am a <span>Graphic Designer</span> & <span>Web Developer</span>.

This is how I added this content to my html <div class="content">{{ .content | markdownify }}</div> But once I tried to style it that way, it does not work, I wonder why!

.content{
    span{  
        color: $primary; 
    }
}

YAML is just a data format. What do you use to render from YAML to html? — Jkarttunen, Dec 07 '20 at 16:36
I am using Hugo framework things are Generated automatically — DINA TAKLIT, Dec 07 '20 at 17:14

score 2 · Accepted Answer · answered Dec 07 '20 at 17:21

2

Enable unsafe markup in yaml from the hugo config file.

Hugo shortcode ignored saying "raw HTML omitted"

markup:
  goldmark:
    renderer:
      unsafe: true

answered Dec 07 '20 at 17:21

Jkarttunen

6,764
4
27
29

score 1 · Answer 2 · answered Dec 07 '20 at 17:52

Thank you for your answer Jkarttunen, based on the link you shared: I was getting the same thing once I verified my generated website

Hugo shortcode ignored saying “raw HTML omitted”

So to fix it In the Hugo config file, you need to tell the default Markdown renderer, to render raw HTML.

For config.yml, you should add

markup:
  goldmark:
    renderer:
      unsafe: true

In my cas since I am using config.toml, I should add:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

Check the link shared in the previous response for more details.

Style html element inserted in yml does not work

2 Answers2