HUGO

How to center text?

#1

Markdown doesn’t seem to support centering text on its own, so I believe that I have to use html. According to the documentation, this is best done using a shortcode. So I defined the following shortcode:

<p style="text-align: center;">{{.Inner}}</p>

And then I try to use it as follows:

{{% center %}}
test
*emphasized test*
{{% /center %}}

In the resulting html, I obtain <!-- raw HTML omitted -->. I gather that this is because by default the feature is disabled in goldmark. Therefore, I added the following to my config:

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

The resulting html is

<p style="text-align: center;">
test
*emphasized test*
</p>

Markdown is not processed (no new lines and no emphasized text). According to the shortcode documentation, using % instead of < as the shortcode symbol should process markdown. So I don’t know what I am doing wrong.

Any help is greatly appreciated! Thanks.

#2

I haven’t tried this in a shortcode, but I have done something similar using HTML div tag wrapping around Markdown and using the Goldmark-version Hugo… Try putting a blank line above and below the Markdown you are trying to wrap, and may be use div tag instead of p tag.

2 Likes
#3

Thank you @kaushalmodi, this works.

Here is the shortcode:

<div style="text-align: center;">
{{.Inner}}
</div>

which outputs

<div style="text-align: center;">
<p>test
<em>emphasized test</em></p>
</div>
#4

Cool! But also show the Markdown content you typed to get that so that someone else who stumbles across the same can use that.

#5

It’s given in the original post. I kept it the same.

#6

Try to render a html file that is supported too. You can use pugjs in combination with hugo what I personally do also.