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：https://gist.github.com/forivall/7d5a304a8c3c809f0ba96884a7cf9d7e下载了一个特定于Pandoc的css文件。

然后，由于我使用了iframe的srcdoc属性来填充html，所以我在解析后的html之前添加了srcdoc中的样式链接：

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

...