0

我正在尝试将带有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','')

除了显示奇怪的代码块和内联代码外,一切正常:

在此处输入图像描述

pypandochtml生成的是:

<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 codeetc 之类的类的存在来看,似乎应该有一种与之相关的风格。

4

1 回答 1

0

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

然后因为我使用srcdocan 的属性iframe来填充 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 */

...
于 2020-04-08T11:15:28.987 回答