Wrap Markdown text in HTML tags

[kaushalmodi]

Hello,

Is it possible to wrap Markdown text in HTML tags?

It will be cool if this CommonMark-based solution presented in this SO answer is feasible with BlackFriday.

Use case

<div class="my_custom_table">

| a | b |
| c | d |

</div>

Then using CSS table properties, I can customize that .my_custom_table table element to my heart's content.

[kaushalmodi]

Probably related: https://github.com/russross/blackfriday/issues/364

[kaushalmodi]

Related: https://github.com/russross/blackfriday/issues/184

[kaushalmodi]

Another related one: https://github.com/russross/blackfriday/issues/181

[rtfb]

Isn't this the way Blackfriday currently behaves?

[kaushalmodi]

No, tried that exact snippet and it didn't work. I use Blackfriday through Hugo. Is there a way I can test if Blackfriday is doing things correctly?

[kaushalmodi]

@rtfb You can find the Markdown source here, and the Hugo/Blackfriday rendered output here.

[dmitshur]

I'll copy https://github.com/russross/blackfriday/issues/184#issuecomment-121321333 here because it might be relevant:

This is expected behavior according to Markdown spec:

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.

[kaushalmodi]

@shurcooL Yes, I know that. I see that blackfriday incorporates "sensible" or user-friendly features that are not in the original Markdown spec.. take the table column alignment feature for example (using :--, :--: or --:).

So I am not claiming that it is not working as per the original Markdown spec.

I am rather proposing addition of this feature as per the CommanMark spec as per https://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div/29378250#29378250 (as I say in my starting post of this issue).

• CommonMark spec example 108

  it provides a very simple and flexible way of including Markdown content inside HTML tags: simply separate the Markdown from the HTML using blank lines:

• CommonMark spec example 109

[Titan-C]

After some hour of looking for an answer I resigned to get it working on blackfriday. I'm using a workaround in javascript now, just use something like this in your main HTML file or your JS file.

<script type="text/javascript">
  document.getElementsByTagName("table")[0].classList.add("mytablecss");
</script>

This assumes you only have a table but it is no challenge to loop over all table elements and add the class desired for styling the table.

[kaushalmodi]

@Titan-C I believe you are using ox-hugo?

Read further if so :)

If using ox-hugo, I use a hack to wrap the Markdown tables in div's.

Here's a test: Org (search for "table-styling" in that Org file) | Markdown | HTML

---

Actually I have some ox-hugo documentation on Table Styling too!

[Titan-C]

@kaushalmodi I don't know how I missed your documentation. My search engine was not personalized enough I imagine. Thank you for your work

[kaushalmodi]

@Titan-C You are welcome.

Just FYI, I have site searches enabled:

• https://ox-hugo.scripter.co/search/?q=table
• https://ox-hugo.scripter.co/test/search/?q=table