panel icon indicating copy to clipboard operation
panel copied to clipboard

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

Open philippjfr opened this issue 1 year ago • 8 comments

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 avatar Aug 15 '24 10:08 philippjfr

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

philippjfr avatar Aug 15 '24 11:08 philippjfr

Codecov Report

:x: Patch coverage is 28.57143% with 20 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 82.17%. Comparing base (d1754ae) to head (3ac9842). :warning: Report is 742 commits behind head on main.

Files with missing lines Patch % Lines
panel/models/myst.py 0.00% 18 Missing :warning:
panel/pane/markup.py 80.00% 2 Missing :warning:
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     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:
  • :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

codecov[bot] avatar Aug 15 '24 11:08 codecov[bot]

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 avatar Aug 15 '24 12:08 MarcSkovMadsen

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

MarcSkovMadsen avatar Aug 15 '24 12:08 MarcSkovMadsen

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.

philippjfr avatar Aug 15 '24 13:08 philippjfr

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 avatar Aug 15 '24 13:08 philippjfr

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.

philippjfr avatar Aug 15 '24 14:08 philippjfr

Have you tested in different templates whether it looks ok?

MarcSkovMadsen avatar Aug 15 '24 15:08 MarcSkovMadsen