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

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>: <a href="https://www.plotly.com/python/line-and-scatter/" target="_blank"><code>scatter</code></a>, <a href="https://www.plotly.com/python/line-charts/" target="_blank"><code>line</code></a>, <a href="https://www.plotly.com/python/filled-area-plots/" target="_blank"><code>area</code></a>, <a href="https://www.plotly.com/python/bar-charts/" target="_blank"><code>bar</code></a>, <a href="https://www.plotly.com/python/funnel-charts/" target="_blank"><code>funnel</code></a>, <a href="https://plotly.comhttps://www.plotly.com/python/gantt/" target="_blank"><code>timeline</code></a></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: