Markdown not being rendered within HTML block

support
1

Hi,

I’m having trouble understanding the when’s and why’s of markdown being rendered within an HTML block.

Take the flowing for example:

<div class="col-md-offset-1">
	<div class="note note-info">
		<b>
			Hello this is a test *italics* regular text
		</b>
	</div>
</div>
This is back to normal body content.

That will result in the italics being processed within the HTML. Awesome!

However:

<div class="col-md-offset-1">
	<div class="note note-info">
		<b>
			Hello this is a test *italics* regular text
		</b>
	</div>
</div>

This is back to normal body content.

This code does not process the markdown italic command that is within the HTML. The only difference is the extra blank line between the closing </div> and the following content.

Is there any documentation that talks about these rules?

A similar code block, that I can’t seem to get the markdown to process within the HTML block is this:

<div class="col-md-offset-1">
	<div class="row">
	    <img class="media-object" style="float: left;" alt="" src="/img/Logo_full color_227px_web.png" /> 
		Hello world
		
		**Line 2**
		
		Line 3
	</div>
</div>
Hello

This always just spits out the plain text version of Hello world **Line 2** Line 3 on a single line.

Any help would be very much appreciated!

2

You would have to look at https://github.com/russross/blackfriday

But I suspect what you really look for is shortcodes …

3

@Richard_West: I’d bet that md files simply weren’t meant to contain a mix of md and html? But yeah, it’s useful to be able to use both. Whenever md doesn’t parse, you just need to use a shortcode to process markdown inside of html. For simple markdown processing, just create a shortcode with the following code (called md.html in my case) :

{{ .Inner }}

And then, in your content, you just need to wrap your markdown within those:

{{% md %}}
Your content
{{% /md %}}

I noticed that the cases where you feel like you need html, most of the time a shortcode can do the job pretty well. I haven’t made one for bootstrap’s media just yet, but something like {{< media src=“imgSource” align=“left” content="" >}} could work.

Note that creating html block openings with a shortcode doesn’t prevent markdown from being parsed. Also, the indentation of your markdown can prevent it from being parsed. This example won’t work here:

<div>
   <div>
       **markdown**
   </div>
</div>

But this will:

<div>
<div>

some **markdown**

</div>
</div>
3 Likes
4

Thanks @gdquest and @bep!

Shortcodes look like the correct way to handle this.

5

This is actually according to the markdown spec found at Daring Fireball: Markdown Syntax Documentation

The relevant section:

The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.
…
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.

1 Like
6

Sorry to bump this thread out of the ground.

To have markdown rendered within HTML blocks, what is usually done in other Markdown dialects is to add a markdown=1 option in the html outer tag. An other solution retained in Github Flavoured Markdown is to add blank lines this way:

<div>

*Emphasized* text.

</div>

This kind of behaviour is currently what I need to render a gallery. I am doing it this way:

<div class="gallery" markdown=1>
![Image 1](image_link "image caption")
![Image 2](image_link "image caption")
![Image 3](image_link "image caption")
</div>

Then trigger it with CSS.

But note that blackfriday has not implemented it for now.

My 2 cents.

EDIT: Here is a script to render a Markdown draft into HTML with pandoc. It accepts Markdown within a HTML block.

2 Likes