Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support wrapping Markdown with div tags #5

Open
kaushalmodi opened this issue Apr 16, 2018 · 10 comments
Open

Support wrapping Markdown with div tags #5

kaushalmodi opened this issue Apr 16, 2018 · 10 comments

Comments

@kaushalmodi
Copy link

kaushalmodi commented Apr 16, 2018

Hello,

By default we can wrap Markdown code with inline tags.. so <span class="foo">_italics_</span> will render the internal Markdown.

But it does not work when wrapped with <div>, and that's a major limitation! That disallows us from setting specific classes for Markdown tables, etc.

The good thing is that div wrapping is allowed in CommonMark spec: russross/blackfriday#404 (comment)

As per http://spec.commonmark.org/0.18/#example-108, this is a valid way of div-wrapping Markdown text that should be rendered:

<div>

*Emphasized text*

</div>

The newlines after <div> and before </div> are needed.

Is this something that could be added?

This sort of works with Blackfriday but because of an undocumented ugly hack.. example.. it would be nice to get rid of those empty divs in the hack.

Many thanks.

@kjk
Copy link
Contributor

kjk commented Apr 16, 2018

Please provide a full example:

  • markdown text
  • what is currently being rendered
  • what do you expect to be rendered

That being said, I looked into CommonMark compatibility and it would be so much work that it falls outside of this project's ambitions.

Making other substantial changes to the parser could also be outside of scope.

@kaushalmodi
Copy link
Author

Markdown text

<div class="bar">

**Hello**

- Should work as per CommonMark

</div>

Current output

<div class="bar">

**Hello**

- Should work as per CommonMark

</div>

Expected output

<div class="bar">
    <strong>Hello</strong>
    <ul>
        <li>Should work as per CommonMark</li>
    </ul>
</div>

That being said, I looked into CommonMark compatibility and it would be so much work that it falls outside of this project's ambitions.

My feature request is for this small part of CommonMark spec and not the full spec compatibility, as this will allow all the Markdown blocks to be wrapped with div classes.

@kaushalmodi
Copy link
Author

OK, my proposal is different from the CommonMark spec in one crucial aspect.. While the CommonMark spec wraps the rendered Markdown HTML in <p> tags, I propose to not do that.. because the Markdown could also be a table.. and I'd like that table to be wrapped only in <div> tags; you cannot wrap tables in <p> tags.

@MichaelMure
Copy link

As another data point, this is a somewhat common pattern to center align things in a readme on github (badges in particular).

An example:

<div align="center">

[![Build Status](https://travis-ci.org/MichaelMure/git-bug.svg?branch=master)](https://travis-ci.org/MichaelMure/git-bug)
[![Backers on Open Collective](https://opencollective.com/git-bug/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/git-bug/sponsors/badge.svg)](#sponsors) [![License: GPL v3](https://img.shields.io/badge/License-GPLv3+-blue.svg)](http://www.gnu.org/licenses/gpl-3.0)
[![GoDoc](https://godoc.org/github.com/MichaelMure/git-bug?status.svg)](https://godoc.org/github.com/MichaelMure/git-bug)
[![Go Report Card](https://goreportcard.com/badge/github.com/MichaelMure/git-bug)](https://goreportcard.com/report/github.com/MichaelMure/git-bug)
[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/the-git-bug/Lobby)

</div>

Roboe added a commit to Roboe/blog that referenced this issue Sep 28, 2019
This uses a BlackFriday hack for rendering Markdown inside HTML:
gomarkdown/markdown#5

This shouldn't happen if BlackFriday respected the CommonMark spec:
https://spec.commonmark.org/0.21/#html-blocks
Roboe added a commit to Roboe/blog that referenced this issue Sep 28, 2019
This uses a BlackFriday hack for rendering Markdown inside HTML:
gomarkdown/markdown#5

<tag>
  <tag></tag>

  **Markdown text**
</tag>

(The line break is important)

BTW, this shouldn't happen if BlackFriday respected the CommonMark spec:
https://spec.commonmark.org/0.21/#html-blocks
@sbeliakou
Copy link

The same here: https://play.golang.org/p/Th2EDlOGmSX

@sbeliakou
Copy link

As a work around: https://play.golang.org/p/caH-GSovGRZ

<div>
![Doesn't work](https://image01_9.png)
</div>

<div>
![Works](https://image01_9.png)
</div><!-- dummy -->

@sbeliakou
Copy link

This ugly stuff works for me: https://play.golang.org/p/JTE8bVfhXXv

@copernico
Copy link

copernico commented Mar 5, 2020

Pandoc allows something like this:

:::{#my_id .someclass .someotherclass}
text
:::

which becomes something like:

<div id="my_id" class="someclass someotherclass">
text
</div>

One can argue if the triple colons (:::) are the most elegant syntax for this, but the solution is very neat and useful anyway, I would love to see it in gomarkdown.

@kjk
Copy link
Contributor

kjk commented Sep 18, 2021

To set the expectations: probably won't happen as it most likely would require a big change to the parser. Currently those 2 <div> are separate HTMLSpan ast nodes, with other ast nodes in between.

We would probably need to add HTMLBlockStart and HTMLBlockEnd nodes, recognize this pattern in the parser, change the renderer.

If anyone wants to give it a go, I'll look at the PR but I'm unlikely to work on such big (?) change.

@copernico
Copy link

Hi @kjk , thanks for taking the time to consider this idea and to assess its feasibility, too bad it's so difficult to implement...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants