pyPandoc md到html的转换丢失代码块样式

Question

我正在尝试将markdown格式的字符串转换为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','')

除了显示异常的代码块和内联代码外，所有这些代码都可以正常工作：

pypandoc生成的html是：

<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>

pypandoc转换中有什么我遗漏的吗？如何使用语法高亮显示和适当缩进设置代码块的样式

从source code等类的存在来看，似乎应该有一种与之相关的样式

Answer 1

我以一种非常简单的方式对其进行了排序：我从GitHub下载了一个特定于Pandoc的css文件：https://gist.github.com/forivall/7d5a304a8c3c809f0ba96884a7cf9d7e

然后，由于我正在使用iframe的srcdoc属性来填充html，因此我将在srcdoc中的样式链接添加到解析的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;

还要注意，在我链接的css中，代码高亮显示不起作用。我认为删除第709-737行中的>是可行的：

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 */

...