pyPandoc md to html conversion lose code-block style

Question

I'm trying to convert a string with markdown formatting into an html

text = """
# To be approved

This is a markdown editor, Type here your article body and use the tools or markdown code to style it.
If you need help or you want to know more about markdown, click on the **light bulb** icon in the bottom left of this form.
You can preview your `article ` by clicking on the icons in the bottom right of this form.

**Click here to begin writing**


\```js
var UID = loadUID();
if (UID != false){
  var create_article_btn = window.parent.document.getElementById('create_article_btn');
  create_article_btn.style.display = 'block';
}
\```
"""

text = pypandoc.convert_text(text,'html',format='md')
text = text.replace('"',"'")
text = text.replace('\n','')

It all works fine except for code blocks and inline codes which are displayed oddly:

the htmlgenerated by pypandoc is:

<h1 id="to-be-approved">
 To be approved
</h1>
<p>
 <strong>
  Please
 </strong>
 , begin
 <em>
  your
 </em>
 article with a title like this:
</p>
<p>
 This is a markdown editor, Type here your article body and use the tools or markdown code to style it. If you need help or you want to know more about markdown, click on the
 <strong>
  light bulb
 </strong>
 icon in the bottom left of this form. You can preview your
 <code>
  article
 </code>
 by clicking on the icons in the bottom right of this form.
</p>
<p>
 <strong>
  Click here to begin writing
 </strong>
</p>
<div class="sourceCode" id="cb1">
 <pre class="sourceCode js"><code class="sourceCode javascript"><span id="cb1-1">
 <a href="#cb1-1"></a><span class="kw">var</span> UID <span class="op">=</span> loadUID()
 <span class="op">;</span></span><span id="cb1-2"><a href="#cb1-2"></a><span 
class="cf">if</span> (UID <span class="op">!=</span> <span class="kw">false</span>)
{</span><span id="cb1-3"><a href="#cb1-3"></a>  <span class="kw">var</span> create_article_btn 
<span class="op">=</span> <span class="bu">window</span><span class="op">.
</span><span class="at">parent</span><span class="op">.</span><span class="at">document</span>
<span class="op">.</span><span class="fu">getElementById</span>(<span 
class="st">'create_article_btn'</span>)<span class="op">;</span></span>
<span id="cb1-4"><a href="#cb1-4"></a>  create_article_btn<span class="op">.
</span><span class="at">style</span><span class="op">.</span><span class="at">display
</span> <span class="op">=</span> <span class="st">'block'</span><span class="op">;
</span></span><span id="cb1-5"><a href="#cb1-5"></a>}</span></code></pre>
</div>

Is there something I'm missing in the pypandoc conversion? How do I stylise the code block with syntax highlight and proper indentation?

Judging by the presence of classes such as source code etc. it seems that there should be a style associated to that.

Answer 1

I got this sorted in a very simple way: I downloaded a css file specific for Pandoc from GitHub: https://gist.github.com/forivall/7d5a304a8c3c809f0ba96884a7cf9d7e

and then since I'm using the srcdoc property of an iframe to populate the html, I'm adding the style link in the srcdoc before the parsed html:

var article_frame = document.getElementById('article_frame');
// add all the styles here (also pandoc.css)
var temp_frame = '<link rel="stylesheet" type="text/css" href="../static/styles/main.css"><link rel="stylesheet" type="text/css" href="../static/styles/read_article.css"><link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i&display=swap" rel="stylesheet"><link rel="stylesheet" type="text/css" href="../static/styles/pandoc.css">';
temp_frame += //article parsed with pyPandoc...
article_frame.srcdoc = temp_frame;

Also notice that in the css that I linked, the code highlight wasn't working. I figure that removing the >in the lines: 709-737 it works:

code > span.kw { color: #a71d5d; font-weight: normal; } /* Keyword */
code > span.dt { color: inherit; } /* DataType */
code > span.dv { color: #0086b3; } /* DecVal */

...

code span.kw { color: #a71d5d; font-weight: normal; } /* Keyword */
code span.dt { color: inherit; } /* DataType */
code span.dv { color: #0086b3; } /* DecVal */

...