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

Add client-side rendering option for Markdown pane based on MyST #7149

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

philippjfr
Copy link
Member

@philippjfr philippjfr commented Aug 15, 2024

This PR adds a new client-side rendering option to the Markdown pane. Specifically you can now set renderer='mystjs' and the Markdown will be transformed into HTML clientside, which has number of benefits:

  • The Markdown value can be jslinked with e.g. an editor, without requiring a roundtrip to Python
  • Markdown generally is less verbose than HTML so it should be more efficient
  • Together with the recent support for streaming it should now be even more efficient

@philippjfr
Copy link
Member Author

Okay, I only just realized mystjs uses an ancient version of myst 😢

Copy link

codecov bot commented Aug 15, 2024

Codecov Report

Attention: Patch coverage is 28.57143% with 20 lines in your changes missing coverage. Please review.

Project coverage is 82.17%. Comparing base (d1754ae) to head (3ac9842).
Report is 1 commits behind head on main.

Files Patch % Lines
panel/models/myst.py 0.00% 18 Missing ⚠️
panel/pane/markup.py 80.00% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7149      +/-   ##
==========================================
- Coverage   82.21%   82.17%   -0.04%     
==========================================
  Files         327      328       +1     
  Lines       48974    49001      +27     
==========================================
+ Hits        40264    40269       +5     
- Misses       8710     8732      +22     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@MarcSkovMadsen
Copy link
Collaborator

MarcSkovMadsen commented Aug 15, 2024

Its a great beginning. A lot of Markdown is probably pretty simple and supported by the ancient version.

We can add a comment or request for an update at the mystjs github.

@MarcSkovMadsen
Copy link
Collaborator

Also remember to think about if plugins are a thing for mystjs and whether we support it.

@philippjfr
Copy link
Member Author

Okay, figured it out, this now uses latest myst-parser and myst-to-html + highlight.js for syntax highlighting. Works great, still some alignment on code styling needed but overall I'm quite happy.

panel/config.py Outdated Show resolved Hide resolved
@philippjfr philippjfr changed the title Add a MyST pane Add client-side rendering option for Markdown pane based on MyST Aug 15, 2024
@philippjfr
Copy link
Member Author

Tested with the streaming support and as expected it does zero backtracking now, i.e. it only ever sends the newly added snippets rather than having to go back and modify the previous text.

@philippjfr
Copy link
Member Author

Also remember to think about if plugins are a thing for mystjs and whether we support it.

Yes, but not really. It's a pretty opinionated Markdown implementation with lots of features supported out-of-the-box.

@MarcSkovMadsen
Copy link
Collaborator

Have you tested in different templates whether it looks ok?

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

Successfully merging this pull request may close these issues.

2 participants