Can I get html string from IPython.display.Markdown? - ipython

Question

I want to get html from markdown on Jupyter Notebook.
like this.
from IPython import display
display.Code("import this")._repr_html_()
But I get:
IPython.core.display.Markdown object has no attribute '_repr_html_'.
Any idea?

Answer 1

Here is an example of using the markdown package to convert markdown to HTML and combining it with other HTML
pip install markdown
import ipywidgets as widgets
import markdown
#Convert markdown to html
html = markdown.markdown("""# Pandas and Plotly guide
Here we have [Pandas](https://pandas.pydata.org/) and [Plotly Express library](https://plotly.com/python/plotly-express/) used in combination with:
* Ipyvuetify (ipywidgets Vuetify UI framework)
* Ipymonaco ( a text editor widget)
Available plot types:
""")
# copy some html from the plotly express website
html += """<ul>
<li><strong>Basics</strong>: <code>scatter</code>, <code>line</code>, <code>area</code>, <code>bar</code>, <code>funnel</code>, <code>timeline</code></li>
</ul>"""
help_links = widgets.HTML(value = html)
help_links

Answer 2

I don't think it is (directly) possible; the Markdown -> HTML conversion for, say, mdout = md("## string ..."); display(mdout) seems to happen in JavaScript, in the append_markdown function, defined here:
https://github.com/jupyter/notebook/blob/238828e/notebook/static/notebook/js/outputarea.js#L730
Of course, if someone can come up with a way, to do a JavaScript call from Jupyter Python cell to perform this conversion, and then get the results back in Python before doing the display(...), then it would be possible :)
For more discussion, see:
https://discourse.jupyter.org/t/how-to-obtain-html-string-from-markdown-as-jupyter-does-it/10589
EDIT: However, I just found a method to cheat through this (see also IPython: Adding Javascript scripts to IPython notebook) - you don't get the HTML string directly back in Python, but you can send the markdown string from Python, and control the display() of the converted string; the trick is to write in a separate <div>, and have JavaScript store the result of the conversion there.
So you can put this in a code (Python) cell in Jupyter:
def js_convert_md_html(instring_md):
js_convert = """
<div id="_my_special_div"></div>
<script>
//import * as markdown from "base/js/markdown"; //import declarations may only appear at top level of a module
//define(['base/js/markdown'], function ttttest(markdown) {{ // Mismatched anonymous define() module:
// console.log(markdown);
//}});
//const markdown = require('base/js/markdown'); // redeclaration of const markdown
//console.log(markdown); // is there!
function do_convert_md_html(instr) {{
//return instr.toUpperCase();
markdown.render(instr, {{
with_math: true,
clean_tables: true,
sanitize: true,
}}, function (err, html) {{
//console.log(html); //ok
$("#_my_special_div").html(html);
}});
}}
var myinputstring = '{0}';
do_convert_md_html(myinputstring);
</script>
""".format(instring_md)
return HTML(js_convert)
jsobj = js_convert_md_html("*hello* **world** $$x_2 = e^{x}$$")
display(jsobj)
This results with: