How to center text?

support
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.

7

I think after the unsafe setting was turned off by default, your best bet is to create a shortcode that gets called as something that gets a raw string ({{<) and use markdownify within. So the shortcode would look like this:

<span class="text-center">{{ .Inner | markdownify }}</span>

Then you invoke the shortcode the following way, using {{< markdown tags:

{{< text-center >}}
Stuff to `process` in the *center*.

testing **123**

some other text
{{< /text-center >}}

This doesn’t need the unsafe setting set to true.

8

Or simpler, if you only inline elements (text and normal imgs):
put this in a css :

.center {
	text-align:center;
}

and use classs attributes on paragraphs:

blablabla
{.center}

The less we need shortcodes, the more portable, the cleaner and more easily written code imho.

2 Likes
9

CSS. This is literally what it was designed for.

10

A post was split to a new topic: Help with markdown attributes

11

This is better as it renders markdown url properly.

{{< center >}} 
[Home](/ "back to the top")   
{{< /center >}}

Thanks.