sagemathinc / cocalc

CoCalc: Collaborative Calculation in the Cloud
https://CoCalc.com
Other
1.14k stars 207 forks source link

Implement more robust <div> tag html parsing in markdown (custom styling) #7560

Open Splines opened 2 months ago

Splines commented 2 months ago

Description

Given the following markdown cell with HTML content:

<div style="background-color: red">

<b>Custom CSS styling</b>

This notebook uses custom CSS styling. If you don't see this text on a colored background, make sure to not view it on GitHub, but instead in VSCode (or another editor that can render Jupyter notebooks with custom CSS).
<br><br>

</div>

On CoCalc, this does not render the background in a red color. It does so, if you remove the empty line after the opening div tag, but then only for the "Custom CSS styling" part. It seems that newlines are not respected here.

However, newlines are respected in markdown-it, see this example in their online demo. Therefore, I'm wondering why this is not working in CoCalc, which is leveraging markdown-it for markdown cells.

haraldschilly commented 2 months ago

The background of that must be that Slate, which is used to process the document for the view, treats consecutive newlines as new blocks. e.g. just

<div style="background-color: red">foo

in a separate block on a single line renders a red div with "foo" in it.

Workaround: no double newlines to avoid breaking this into blocks

Splines commented 1 month ago

The problem with this workaround is that without a double newline after the opening div, the "code" that follows won't be treated as Markdown anymore, e.g. links won't be rendered as Markdown links and instead as plain [...](...).