Markdown in RawHTML component is not rendered correctly

[jwag59]

I've tried to use the Python Markdown package to convert some markdown text to HTML for display. The conversion looks fine but when displayed in the RawHTML component, not all attributes are getting displayed correctly. In particular the H1 and the list elements are not displayed correctly (No bullet displayed for the list elements) I tried both package markdown and markdown2 but in both cases the HTML looks correct.

My Markdown is:

md_text = '''

# This is an H1

## This is an H2

###### This is an H6

**double asterisks**

*   Red
*   Green
*   Blue

A table of items:

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

'''

and I convert is as follows: html = markdown.markdown(md_text, extensions=['tables'])

I print the converted output which looks like this:

<h1>This is an H1</h1>
<h2>This is an H2</h2>
<h6>This is an H6</h6>
<p><strong>double asterisks</strong></p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<p>A table of items:</p>
<table>
<thead>
<tr>
<th>Tables</th>
<th align="center">Are</th>
<th align="right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody>
</table>

so this all looks good. So any ideas why the H1 and the list do not appear correctly formed? Here is the screenshot from the app with debug window.

[jwag59]

Thanks for fixing the CSS for the markdown. Mostly working well now. Could you please update the CSS to enable Table borders on as the default setting (borderwidth=1 should suffice).

This will help make the table stand out from the other text.

[jwag59]

Could you please modify the '.raw-html' section of the src/global.less file to help render tables in a much nicer way than default HTML. The modified .raw-html CSS is as follows:

.raw-html {
  ul, ol {
    list-style: disc;
  }

  h1 {
    font-size: 2em;
  }
  table, th, td {
    border: 1px solid;
    border-color: #C8C8C8;
    padding: 5px;
  }
  th{
    color: white;
    background: black;
  }
  tr:nth-child(even) {background: #F0F0F0}
  tr:nth-child(odd) {background: #F8F8F8}
}

Using this CSS a table ends up looking like this:

[bigeyex]

Could you please modify the '.raw-html' section of the src/global.less file to help render tables in a much nicer way than default HTML. The modified .raw-html CSS is as follows:

.raw-html {
  ul, ol {
    list-style: disc;
  }

  h1 {
    font-size: 2em;
  }
  table, th, td {
    border: 1px solid;
    border-color: #C8C8C8;
    padding: 5px;
  }
  th{
    color: white;
    background: black;
  }
  tr:nth-child(even) {background: #F0F0F0}
  tr:nth-child(odd) {background: #F8F8F8}
}

Using this CSS a table ends up looking like this:

You can enclose those in a tag in RawHTML. I will add a simple border(And design style) in the library as the basic style, but it should be users' turn to define their own style in RawHTML.