Improve Markdown Experience

[MarcSkovMadsen]

The Markdown experience of Panel could be improved. It would improve a lot of users and use cases.

• I see people starting out adding Markdown. It looks cool and is a big win for them.
• I see people making report, article and blog post like data apps that look and feel great due to Markdown being rendered nicely.

Markdown is very important for the first experience of a data app framework.

As you can see below Markdown does not work well in Panel. And beginners and users looking for writing reports in Panel will currently have a hard time.

Example: Comparison to Streamlit

Bigger Headers

Streamlits headers are bigger and thicker which makes them more readable. Data Apps are often also used a bit like a power point where there are some key messages (headers) that should clearly stand out.

Anchor links

You can link directly to sections of bigger Streamlit apps

.

This makes sharing information with colleagues so much easier.

Code sections

Streamlits code sections stands out more clearly

Tables

Panels tables are not formatted

Fenced Code Blocks

Streamlits fenced code blocks look much better. And the built in copy functionality is so powerful

Footnotes

Here Panel is better

Strikethrough

Not supported by Panel

Task List

Streamlits looks so much better

Emoji

Not supported by Panel

Bokeh Layout Issues

Very often the Bokeh layout engine cannot figure out how heigh the markdown section should be

Code

Streamlit provides a dedicated st.code functionality. That is pretty useful. The code section stands out and uses friendlier colors.

Panel Code

import panel as pn
import requests

pn.extension(sizing_mode="stretch_width", template="fast")

@pn.cache()
def get_text():
    url = "https://www.markdownguide.org/assets/markdown-cheat-sheet.md"
    return requests.get(url).text
text = get_text()

pn.pane.Markdown(text).servable()

pn.pane.Markdown("""
``python
import panel as pn
import requests

pn.extension(sizing_mode="stretch_width", template="fast")

@pn.cache()
def get_text():
    url = "https://www.markdownguide.org/assets/markdown-cheat-sheet.md"
    return requests.get(url).text
text = get_text()

pn.pane.Markdown(text).servable()
``
""").servable()

Streamlit Code

import streamlit as st
import requests

@st.cache()
def get_text():
    url = "https://www.markdownguide.org/assets/markdown-cheat-sheet.md"
    return requests.get(url).text
text = get_text()

st.write(text)

st.code("""
import streamlit as st
import requests

@st.cache()
def get_text():
    url = "https://www.markdownguide.org/assets/markdown-cheat-sheet.md"
    return requests.get(url).text
text = get_text()

st.write(text)
""")

[MarcSkovMadsen]

Panel does not have coloring. Streamlit will soon have

[philippjfr]

Highly appreciate this excellent writeup @MarcSkovMadsen!

[philippjfr]

Most items here have now been addressed, I'll bump to next to address any remaining missing features and perhaps switch to markdown-it client-side.

[MarcSkovMadsen]

If tried inserting the content of https://www.markdownguide.org/assets/markdown-cheat-sheet.md in the Markdown pane reference notebook. The things still not supported with the default plugins are below.

Besides that, I would say better table styling (in notebook) would be awesome.

[philippjfr]

Hmm, definition lists should be supported, and I'm really surprised I haven't been able to find sub and superscript extensions for the markdown-it-py. Also wish the emoji extension was on conda defaults so I could require it.

[MarcSkovMadsen]

Hm. Maybe the definition lists are not very clearly styled? It gets correctly indented.