Repository: holoviz/panel

Issue:
Development version renders markdown differently that previous panel version
The development version 0.5.0a3 changed something in markdown. trying  to generate the same code that generated [this poster](https://jacob-barhak.github.io/InteractivePoster_MSM_IMAG_2019.html) , displays different behavior. 

First there are some slight differences in panel sizes - which is expected since some changes were made. However, the Markdown behavior is different.

 When using enumeration or bullets,  all bullets are now indented to the very left of the panel and nested bullets do no work - attached is an image. To the left you see the development panel version 0.5.0a3  and on the right you can see the stable panel 0.4.0. The code to generate this is slightly different, yet the markdown issue is clearly visible. I am using Windows 10 and the image was generated using edge and chrome. 

You can clearly see the bullet and nested bullet issues. And note that bullets are almost invisible since they are pushed so much to the left that its hard to even see its a bullet - the bullet text also is not indented and can be mistaken for continuation of the text - so something seems wrong there. I was handling it so far by using text that look like:
```
&nbsp;&nbsp;&nbsp;- bullet text
```

Yet this is not a good solution for the long run.

![PanelMarkdownDevelopmentVersionIssue](https://user-images.githubusercontent.com/1986155/54792823-c252c180-4c0d-11e9-8f87-6c8e55096e34.png)

Hopefully its sufficient information to locate the cause and fix it.


Discussion:
The code that generated the poster can be found [here](https://github.com/Jacob-Barhak/Presentations/tree/master/PosterIMAG2019)

This should help reproduction.
Thanks @Jacob-Barhak that will be helpful in tracking down what changed.
Okay, I've tracked down the issue to a change in the bokeh CSS which is central to the layout refactor it seems we should raise this upstream but in the meantime we could simply override the ``ul`` tag CSS.
Thanks Philipp,

You may want to also check if this CSS affects markdown table appearance.
The development panel version I used also generates tables that have no
borders.

Not sure what the default behavior should be, yet any type of difference
between cells in markdown tables would be better than the current version
that does not look nice by default as text seems to merge sometimes at cell
boundaries. If the CSS control that look, any type of divider will be
recommended.

So far, I was adding spaces to separate text.

Hopefully this can be fixed at the same time.

Jacob


On Sat, Mar 23, 2019, 20:12 Philipp Rudiger <notifications@github.com>
wrote:

> Okay, I've tracked down the issue to a change in the bokeh CSS which is
> central to the layout refactor it seems we should raise this upstream but
> in the meantime we could simply override the ul tag CSS.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/pyviz/panel/issues/323#issuecomment-475918810>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/AB5Oa8V6hTxNczwZ4TBDzEK7aXMPa9Kzks5vZtEBgaJpZM4cCncK>
> .
>


Resolving patch:
diff --git a/panel/pane/markup.py b/panel/pane/markup.py
--- a/panel/pane/markup.py
+++ b/panel/pane/markup.py
@@ -119,6 +119,29 @@ class Markdown(DivPaneBase):
     # Priority depends on the data type
     priority = None
 
+    _css_style = {
+        'ul': 'padding-left: 1.5em',
+        'table': 'border-collapse: collapse;',
+        'thead': 'border-bottom: 1px black solid;',
+        'tbody': 'display: table-row-group;',
+        'td': 'padding: 4px;',
+        'h1': 'margin-block-start: 0.66em; margin-block-end: 0.66em;',
+        'h2': 'margin-block-start: 0.83em; margin-block-end: 0.83em;',
+        'h3': 'margin-block-start: 1em; margin-block-end: 1em;',
+        'h4': 'margin-block-start: 1.33em; margin-block-end: 1.33em;',
+        'h5': 'margin-block-start: 1.66em; margin-block-end: 1.66em;',
+        'h6': 'margin-block-start: 2.33em; margin-block-end: 2.33em;',
+    }
+
+    _css = """
+    tbody tr:nth-child(odd) {
+      background: #f5f5f5;
+    }
+    tr:hover {
+      background: #e0e0e0;
+    }
+    """
+
     @classmethod
     def applies(cls, obj):
         if hasattr(obj, '_repr_markdown_'):
@@ -139,4 +162,10 @@ def _get_properties(self):
         properties['style'] = properties.get('style', {})
         extensions = ['markdown.extensions.extra', 'markdown.extensions.smarty']
         html = markdown.markdown(data, extensions=extensions, output_format='html5')
-        return dict(properties, text=html)
+        for tag in self._css_style:
+            html = html.replace('<%s>' % tag, '<%s class="panel-md">' % tag)
+        css = self._css
+        for tag, tag_css in self._css_style.items():
+            css += '%s.panel-md { %s }' % (tag, tag_css)
+        css = "<style>%s</style>\n" % css
+        return dict(properties, text=css+html)
diff --git a/panel/viewable.py b/panel/viewable.py
--- a/panel/viewable.py
+++ b/panel/viewable.py
@@ -66,7 +66,7 @@ class Layoutable(param.Parameterized):
     max_height = param.Integer(default=None, bounds=(0, None), doc="""
         Minimal height of the component (in pixels) if height is adjustable.""")
 
-    margin = param.Parameter(default=None, doc="""
+    margin = param.Parameter(default=5, doc="""
         Allows to create additional space around the component. May
         be specified as a two-tuple of the form (vertical, horizontal)
         or a four-tuple (top, right, bottom, left).""")


Test patch:
diff --git a/panel/pane/tests/test_markup.py b/panel/pane/tests/test_markup.py
--- a/panel/pane/tests/test_markup.py
+++ b/panel/pane/tests/test_markup.py
@@ -13,12 +13,12 @@ def test_markdown_pane(document, comm):
     # Create pane
     model = pane._get_root(document, comm=comm)
     assert pane._models[model.ref['id']][0] is model
-    assert model.text == "<p><strong>Markdown</strong></p>"
+    assert model.text.endswith("<p><strong>Markdown</strong></p>")
 
     # Replace Pane.object
     pane.object = "*Markdown*"
     assert pane._models[model.ref['id']][0] is model
-    assert model.text == "<p><em>Markdown</em></p>"
+    assert model.text.endswith("<p><em>Markdown</em></p>")
 
     # Cleanup
     pane._cleanup(model)
diff --git a/panel/tests/test_interact.py b/panel/tests/test_interact.py
--- a/panel/tests/test_interact.py
+++ b/panel/tests/test_interact.py
@@ -191,7 +191,7 @@ def test(a):
     assert new_pane is not pane
     new_div = column.children[1].children[0]
     assert isinstance(new_div, BkDiv)
-    assert new_div.text == '<p>ABC</p>'
+    assert new_div.text.endswith('<p>ABC</p>')
     assert new_pane._models[column.ref['id']][0] is new_div
 
     interact_pane._cleanup(column)