Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I wrap my markdown in an HTML div?

I am using MarkEd which implements GitHub flavoured markdown.

I have some working markdown:

## Test heading a paragraph. ## second heading another paragraph 

Which creates:

<h2 id="test-heading">Test heading</h2> <p>a paragraph.</p> <h2 id="second-heading">second heading</h2> <p>another paragraph</p> 

I would like to wrap that markdown section in a div, eg:

<div class="blog-post"> ## Test heading a paragraph. ## second heading another paragraph </div> 

However this returns the following HTML:

<div class="blog-post"> ## Test heading a paragraph. ## second heading another paragraph </div> 

Eg, no markdown, literally '## Test heading' appears in the HTML.

How can I properly wrap my markdown in a div?

I have found the following workaround, however it is ugly and not an actual fix:

<div class="blog-post"> <div></div>  ## Test heading a paragraph. ## second heading another paragraph  </div> 
like image 730
mikemaccana Avatar asked Mar 31 '15 12:03

mikemaccana


People also ask

How do you display Markdown in HTML?

The first step to convert Markdown to HTML is to open your Markdown document in Atom. Then toggle the Markdown preview by pressing the CTRL+SHIFT+M keyboard shortcut. Another way to toggle the Markdown preview is from Packages —> Markdown Preview —> Toggle Preview.

How do I create a div in Markdown?

There is no concept of a <div> in Markdown syntax (or most other structural HTML elements), except that Markdown supports HTML so you can just use a <div> if you want to. But as soon as you do, nothing nested inside of it can be Markdown. Except it can!

Can I use Markdown in an HTML file?

You can use a Markdown document authoring application to create and export Markdown-formatted documents to PDF or HTML file format. The PDF part is key, because once you have a PDF document, you can do anything with it — print it, email it, or upload it to a website.


2 Answers

GitHub Pages supports the markdown="1" attribute to parse markdown inside HTML elements, e.g.

<div class="tip" markdown="1">Have **fun!**</div> 

Note: As of 2019/03, this doesn't work on github.com, only GitHub Pages.

Note: Quotes, as in markdown="1", are not required by HTML5 but if you don't use quotes (markdown=1), GitHub does not recognize it as HTML. Also, support is buggy right now. You will likely get incorrect output if your HTML element is larger than a single paragraph. For example, due to bugs I was unable to embed a Markdown list inside a div.

If you find yourself in an environment in which markdown="1" doesn't work but span does, another option is to use <span style="display:block"> so that block-level classes are compatible with it, e.g.

<span style="display:block" class="note">It **works!**</span> 

Tip: <span class="note"></span> is shorter than <div class="note" markdown="1"></div>, so if you control the CSS you might prefer to use <span> and add display: block; to your CSS.

like image 42
Qwertie Avatar answered Oct 08 '22 08:10

Qwertie


Markdown

For Markdown, This is by design. From the Inline HTML section of the Markdown reference:

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.

But it is explicitly allowed for span-level tags:

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

So, depending on your use-case, you might get away with using a span instead of a div.

CommonMark

If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:

<div>  *Emphasized* text.  </div> 

should work, while the following shouldn't:

<div> *Emphasized* text. </div> 

And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.

Though it doesn't seem to work in StackOverflow yet:

Testing **Markdown** inside a red-background div.
like image 104
LucasB Avatar answered Oct 08 '22 10:10

LucasB