Add option to render Markdown inside <div> blocks

[asadovsky]

Hi,

First: thanks for writing this fantastic library!

My issue: I'm using Markdown in documentation for a project, and would like to use <div> tags inside of the Markdown to specify that certain sections should be hidden (or otherwise stylized).

For example:

# Title

This is some text.

<div class="toggle-hide">
## Hidden section

A hidden paragraph.
</div>

This text is visible.

Unfortunately, the Markdown content inside the <div> does not get rendered -- it's copied verbatim into the output.

Is there any way to configure marked.js to render Markdown inside of <div> tags? If not: can you point me in the right direction for how to add such an option? Or: can you recommend some alternate strategy for hiding (or toggling visibility of) sections of content?

Thanks!

[octalmage]

Weird you're right! I guess marked skips certain elements.

You could loop through the elements that have your class, grab the markdown, process the markdown, then replace the contents! Wouldn't be that difficult with jQuery and you wouldn't need to modify marked.

[asadovsky]

I'm using a static site generator and don't want to run JS on the client side at render time.
I could run marked in 2 passes as part of site generation (similar to what you suggest), but that's still somewhat of a hassle, especially since it'd require modifying the site generator tool, which I didn't write.

[jeffwilcox]

FYI, Markdown specifically skips processing Markdown within block-level HTML; please refer to http://daringfireball.net/projects/markdown/syntax#html

[derberg]

but some times you want to have a nice styled panel and use in it some markdown like below

<div class="panel warning">
some random text

``` json
{
"att1": "val1",
"att2": "val2"
}
```
</div>

and it is not entirely true that markdown doesn't work in html block as the markdown emphasis work normally. Looking on above sample, if I would but "test" in between of asterisk "test" that would be rendered to bold. Also the code block above is rendered like it would be a one line code. So something works there. And that would be super cool to have it fully working.
There is a sanitize option to ignore HTML, there could be an option to have markdown in html blocks working :)

[SimonCropp]

anyone know the line to hack in the js to make this work?

[ivan-kleshnin]

Reliable Markdown parsing inside HTML is a must. But this will require to remove "indented block = code block" rule entirely, as nested HTML tags are always indented... As GFM style is so much better I think that removal will only improve everything. It was always a fail in original Markdown design to treat indented text as code.

[derberg]

I love Markdown, but if things like support for markdown in between divs will not be available, markdown will start loosing his position in favour of https://github.com/asciidoctor/asciidoctor.js

[tombola]

I know this is a bit of a specific case, but I have been trying to get round this for my (jekyll) github pages.

My requirement was to wrap a markdown-ed paragraph in a div so I could style it as a panel. In the end I just created an empty, classed div in front of the paragraph and used a sibling selector .myclass + p to reference (and style) the following paragraph.

I realise this is an unholy and specific workaround, but I thought I would share.

[sh1989]

This feels like quite a common use case - it would be nice if there was some built in liquid template that could do this for you, although we'll need to ensure that markdown is subsequently parsed and outputted correctly within that liquid block.

[franzheidl]

Some markdown parsers/implementations allow this:

<div markdown="1">
    #Heading 1
</div>

This would be rendered as

<div>
    <h1>Heading 1</h1>
</div>

It would be great if marked would support this, too.

[schlichtanders]

just stumbled upon this div case

Interestingly, it seems as the following indeed do render correctly:

• bold and italics using **bold** and *italics
• url syntax [link text](https://url.com)
• maybe more

However others don't do so in my case:

• headings #, ###
• lists

  - ul1
  - ul2
  
  1. ol1
  1. ol2
  

• probably more

[maxrahder]

+1
Apparently, within a <div> or other block-level element, inline elements are still processed, but block-level md is ignored. (Here's a fiddle some nice person wrote, to let you experiment: http://www.javascriptoo.com/marked)

Basically, there's a crazy regex in block.html that simply skips over block elements entirely, where a "block element" is anything, like <foo>, that isn't an inline element.

I have this requirement too. I have some <div>s that I process in a special way -- mostly to add css dynamically. But I'd like the content to be processed like any other md. Proving some kind of flag on the div would work, or I don't mind writing something to help out the lexer if I knew what hooks are in the library.