31

How do you center an item with Markdown? I'm looking for a solution that works in Grav.

Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
KylianMbappe
  • 1,896
  • 2
  • 15
  • 25

3 Answers3

36

Markdown does not support this feature natively, but you can achieve this wrapping Markdown into HTML.

As a rule of thumb, most 'flavors' of Markdown will render this as centered text:

<p style="text-align: center;">Centered text</p>

Specifically for Grav, as their documentation states, you should do these following steps:

in your system configuration file user/config/system.yaml make sure to activate the markdown extra option:

pages:
  markdown:
    extra: true

in your wrapper tag make sure to add the parameter markdown="1" to activate processing of markdown content:

<div class="myWrapper" markdown="1">
# my markdown content

this content is wrapped into a div with class "myWrapper"
</div>
Estevan Maito
  • 1,482
  • 1
  • 19
  • 23
  • 2
    This answer is good, but I find the fact baffling - why is text alignment missing from CommonMark (and most other markdown specs)? It seems so obvious, straightfoward, and useful, there must be some fact I'm missing... – k3davis Jun 18 '20 at 11:48
  • 2
    From https://daringfireball.net/projects/markdown/syntax#philosophy "A Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions." – Estevan Maito Jun 18 '20 at 14:55
  • 3
    Thanks @Estevan, that's helpful, though the distinction between text alignment and all of the other "tags and formatting" markdown does support seems somewhat arbitrary. ;) – k3davis Jun 18 '20 at 16:24
  • Does not work on jupyter notebook uploaded to github though. – rahul-ahuja Mar 09 '21 at 14:11
  • 1
    @k3davis Agreed. Simple headings and emphasis are easily achieved. It seems not a lot of 'mark up' is required to achieve text alignment. For example, '|left', '|centre|' and 'right|' is readable as plain-text, and certainly no more obtuse than the syntax used for formatting tables and/or images and links... But hey, it's not like I'm going to make a formal suggestion. – DryLabRebel Mar 28 '22 at 03:17
6

For me it worked with the following hack: adding the tag div on top without closing the div tag. This makes the entire markdown centralized

<div align="center">
Fernando_Akistapace
  • 136
  • 1
  • 1
4

When using any element such as a title, you can use an equivalent html tag, for instance

# Title
## title 2

is equivalent to

<h1> Title </h1>
<h2> Title 2 </h2>

With title, for instance, you can align the text using the following attribute:

<!-- title only -->
<h1 align="center"> Title </h1>

<!-- title with div -->
<div align="center"> <h1 align="center"> Title inside div! </h1> </div>

But sometimes you don't want to use HTML, because it butches the capability of using markdown inside it, in these cases, you can use span, which allows you to render markdown inside HTML tags:

<!-- title with span (you can render emojis or markdown inside it) -->
<span align="center"> <h1> :star: My Career: </h1> </span>

Please note that this attribute is deprecated, while it's deprecated, it is also the only one that works with some flavors of markdown, such as Github's markdown

Overclocked Skid
  • 465
  • 5
  • 12