Markdown: Wrap tables by div

Archive
1

Hi,

My Grav template has special CSS classes to show tables in different styles.

In my page, I have many tables, look like this:

#### Table 1

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample

#### Table 2

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample

#### Table 3

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample
-```
 
In order to show the tables in a specific style, I need to put it inside a <div>, the HTML should look like this:
```

In my page, I can’t add HTML, this is not working:

#### Table 1

<div class="table-style-1">
Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample
</div>

My only solution for now is leaving my page empty. I hard-code the tables’s HTML code in my html.twig file, but this gives end-users no ability to modify the tables’s content because they do this via admin plugin, they only can modify pages, not theme.

Do you have any solution for my issue? Thank you!

2

Enable Parsedown Extra in the page header, and add markdown=“1” to the wrapping div:

markdown:
    extra: true


#### Table 1

<div class="table-style-1" markdown="1">
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
</div>
3

Was in the Learn site, for reference: Wrapping markdown into htm

4

Thank you for your replies! Can’t believe that I forgot to to check the docs this time.

5

I have HTML code in my table to show list of items

| Sample | <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 3</li></ul> |

If I enable Markdown Extra, the list is not displayed and the page is broken. Is there any way to have

    in table? I searched but only found the HTML solution which I currently use.
6

I think its just better to write the entire thing in HTML. HTML outside and inside is kinda making the markdown bits redundant :slight_smile: