1

I have following MD code for one of my GitHub page.

<p align="justify">
Text Text Text.

</p>

<p align="justify">
**Text** Text Text.


`Text` Text.

</p>

While the first paragraph tag works Okay as there is no Markdown editing done inside it, text inside second paragraph tag is not Formatted as it should be. (No Bold, no quotes)

Why is it so?? And how to use Markdown editing inside paragraph then?

Ajinkya Bapat
  • 619
  • 1
  • 10
  • 26
  • How exactly are you processing the Markdown? Note that an empty line actually creates a new paragraph, and paragraphs inside other paragraphs are invalid. – Sebastian Simon Nov 14 '17 at 05:28
  • Yes, I know about the Empty lines, but I want my text to be justified so I have to use

    tag. I am using a Jekyll template for my github page.

    – Ajinkya Bapat Nov 14 '17 at 05:32
  • Aligning is not possible in native Markdown. [Source](https://stackoverflow.com/questions/35077507/how-to-right-align-and-justify-align-in-markdown) – Kevin Nov 14 '17 at 05:36

1 Answers1

2

The Markdown rules plainly state:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.

That said, GitHub Pages uses Kramdown to parse Markdown, and Krandown has a slightly different behavior which gives you more flexibility. In fact, Kramdown's documentation states:

If an HTML tag has an attribute markdown="1", then the default mechanism for parsing syntax in this tag is used.

In other words, do this:

<p align="justify" markdown="1">
**Text** Text Text.


`Text` Text.
</p>

And you will get the following output:

<p align="justify">
<strong>Text</strong> Text Text.
<code>Text</code> Text.</p>

Kramdown is smart enough to recognize that you are inside a <p> tag, and does not wrap the individual lines in new <p> tags, which would be invalid HTML. If you actually want each line to be a separate paragraph, then you should use a <div> to wrap everything. Like this:

<div align="justify" markdown="1">
**Text** Text Text.


`Text` Text.
</div>

Which results in this output:

<div align="justify">
    <p><strong>Text</strong> Text Text.</p>
    <p><code>Text</code> Text.</p>
</div>

For completeness, it should be noted that GitHub READMEs and Gists do not use the same Markdown parser. Instead they use an extended Commonmark parser, which handles Markdown in raw HTML differently that the two ways described above. In Commonmark, whether the content of a raw HTML block is parsed as Markdown or not depends on whether the content is wrapped by blank lines. In that case, the proper way would be to do this:

<div align="justify">

**Text** Text Text.


`Text` Text.

</div>

However, as GitHub will strip out the align attribute, there isn't any point it doing that on pages hosted on github.com (such as READMEs). There is also the problem that Commonmark is not smart enough to detect that the wrapping raw HTML tag is a <p> tag, and wraps each line in another <p>, resulting in invalid HTML. Therefore, you must use a <div> in that case.

While the use-blank-lines method of telling the parser to parse the contents as Markdown is a more elegant solution that markdown="1", it is only supported by Commonmark parsers, which Kramdown is not. Therefore, as long as GitHub Pages uses Kramdown, you need to follow Kramdown's rules.

Waylan
  • 37,164
  • 12
  • 83
  • 109