Keep Formatting in Custom Shortcode

support
1

Hello,

I’m converting a site from Jekyll to Hugo, I’ve created a custom Shortcode to handle our FAQ and running into an issue with multi-paragraph answers.

My shortcode.

< div class=“accordion” id=“accordion-{{ .Get “type” }}”>
< div class=“card”>
< h6 class=“card-title”>
<a class=“collapsed” data-toggle=“collapse” href=“#{{ .Get “id” }}”>{{ Get “question” }}< /a>
< /h6>

  < div id="{{ .Get "id" }}" class="collapse" data-parent="#accordion-{{ .Get "type" }}">
  	< div class="card-body"> {{ .Get "answer" | markdownify }}< /div>
  < /div>

< /div>
< /div>

In Markdown file.

{{< faq 
type="general"
id="id"
question="question"
answer="
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
"
>}}

If I remove the line breaks and reformat it so it looks like one giant parapgraph it works.

{{< faq 
type="general"
id="id"
question="question"
answer="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. "
>}}

I’m not opposed to doing it like that but we have some rather lengthy FAQ’s and while it looks fine when rendered, its hard to read and work with in the .MD file.

Thank you.

2

Try using {{% ... /%}} instead of {{< ... />}}, it allows markdown parsing thus should respect line breaks. I can’t find where it’s mentioned in the docs but I read it somewhere. Maybe you should have to move the content of answer into .Inner.

1 Like
3

I would suggest that you put your “answer” and similar inside of the shortcode (aka inner content).

1 Like
4

Thanks for the help, I was able to get it working!

faq.html shortcode

<div class="accordion" id="accordion-{{ .Get "type" }}">
	<div class="card">
		<h6 class="card-title">
			<a class="collapsed" data-toggle="collapse" href="#{{ .Get "id" }}">{{ .Get "question" }}</a>
		</h6>

		<div id="{{ .Get "id" }}" class="collapse" data-parent="#accordion-{{ .Get "type" }}">
			<div class="card-body"> {{ .Inner | markdownify }}</div>
		</div>
	</div>
</div>

faq-wrapper.html shortcode

{{ .Inner }}

Example

{{% faq-wrapper %}}
{{< faq 
type="general"
id="id"
question="question"
>}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

{{% /faq-wrapper %}}

Not sure if this is the right way but it works.

5

You could get rid of the wrapper like so:

{{% faq type="general" id="id" question="question" %}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

{{% /faq %}}

{{ .Inner }} will return the answers.

1 Like
6

Thanks for the tip!