Markdownify with a triple quoted long multi paragraph string

support
1

Hello, I’m trying to get hugo to apply a class to multiple paragraphs outlined as such

[params.about]
        headline    = "Ipsum Lorem!"
        description = """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In diam sapien, fringilla vel accumsan vel, finibus nec libero. Phasellus egestas, felis a sollicitudin egestas, orci felis commodo lorem, ac laoreet est dui sit amet nulla. Fusce volutpat vulputate sapien. Curabitur faucibus maximus odio, ut commodo eros varius at. Donec feugiat tellus ut mi sagittis, id laoreet velit tristique. Pellentesque elit massa, scelerisque ac dignissim nec, ullamcorper at tortor. Cras velit felis, eleifend vel odio et, vehicula lobortis magna. Phasellus maximus ligula non egestas gravida. Donec quis convallis felis, vitae iaculis ante. Etiam dolor quam, pretium vitae sollicitudin eget, porta at justo.

Vestibulum hendrerit lorem vel dolor tincidunt, nec volutpat nunc suscipit. Nunc non urna porttitor, tristique lacus non, tempor nibh. Praesent vel eros vitae est pellentesque sollicitudin. In hac habitasse platea dictumst. Etiam tincidunt eleifend erat. In sit amet tellus commodo, efficitur augue nec, maximus urna. Praesent eu tortor leo. Cras venenatis elit pretium gravida dignissim. Cras sit amet metus fermentum, dapibus nibh sit amet, vestibulum erat. Vivamus feugiat, sem vel suscipit finibus, lacus mauris convallis mi, sed luctus lorem odio at libero. Mauris in purus turpis. Donec blandit velit non nisi luctus, condimentum viverra augue ultricies. Fusce lorem nibh, laoreet id erat vel, euismod elementum velit. Sed dui massa, rhoncus sit amet aliquam et, ullamcorper sit amet augue.

Quisque eu tincidunt felis, at auctor libero. Curabitur ac suscipit libero, id vehicula urna. Quisque id libero tempor, faucibus nibh nec, blandit ex. Nunc hendrerit rhoncus est eu ultricies. Cras convallis rhoncus nunc ac suscipit. In hac habitasse platea dictumst. Sed fringilla porta lacinia. Nulla auctor velit vel quam interdum, at rutrum tellus commodo. Curabitur molestie malesuada porttitor. Sed vel nisl condimentum, consectetur eros vitae, fermentum lectus. Sed nunc nulla, gravida id purus non, bibendum fringilla mauris."""
        buttonText  = "Book a Tour!"

with the partial template being:

<div class="col-lg-8 col-lg-offset-2 text-center">
    {{ with .Site.Params.about.headline }}
        <h2 class="section-heading">{{ . }}</h2>
    {{ end }}
    {{ if and .Site.Params.about.headline .Site.Params.about.description }}
        <hr class="light">
    {{ end }}
    {{ with .Site.Params.about.description }}
        <p class="text-faded">{{ . | markdownify }}</p>
    {{ end }}
    {{ with .Site.Params.about.buttonText }}
        <a href="#contact" class="btn btn-default btn-xl page-scroll">{{ . }}</a>
    {{ end }}
</div>

The result being:

z3B2GDn.png1307×801 94.8 KB

It’s only applying the text-faded class to an empty paragraph then generating classless

tags for the rest of the markdown paragraphs, is this expected and if so how do I rectify it to apply a class to every paragraph in the markdown block?

Thanks!

2

try to change

{{ with .Site.Params.about.description }}
   <div class="text-faded">
        <p>{{ . | markdownify }}</p>
   </div>
{{ end }}
3

That’s done the trick, can you explain why for future reference?

Thanks!

4

Since the <div> wraps the description, all <p>s nested within will inherit the class(es) of the <div>

1 Like