Python：使用 Stackoverflow 中的代码块将 Markdown 转换为 html

Question

几天来我一直在尝试使用 Python 将 Markdown 文件转换为 HTML 代码 - 但没有成功。 Markdown 文件包含内联代码和代码块。但是，我找不到像 StackOverflow 或 GitHub 那样以 HTML 形式显示代码块的解决方案。换句话说，一个包含代码的矩形。

Markdown 文件如下所示：

### Output of `df`
'''Bash
Filesystem                1K-blocks       Used  Available Use% Mounted on
tmpfs                        809224       1552     807672   1% /run
/dev/sda3                  61091660   37443692   20512276  65% /
tmpfs                       4046120      54604    3991516   2% /dev/shm
'''

我的HTML版本的相应部分如下所示：

<h3>Output of <code>df</code></h3>

<div class="codehilite">
    <pre><span></span><code>
        Filesystem<span class="w">                </span>1K-blocks<span class="w">       </span>Used<span class="w">  </span>Available<span class="w"> </span>Use%<span class="w"> </span>Mounted<span class="w"> </span>on
        tmpfs<span class="w">                        </span><span class="m">809224</span><span class="w">       </span><span class="m">1552</span><span class="w">     </span><span class="m">807672</span><span class="w">   </span><span class="m">1</span>%<span class="w"> </span>/run
        /dev/sda3<span class="w">                  </span><span class="m">61091660</span><span class="w">   </span><span class="m">37443692</span><span class="w">   </span><span class="m">20512276</span><span class="w">  </span><span class="m">65</span>%<span class="w"> </span>/
        tmpfs<span class="w">                       </span><span class="m">4046120</span><span class="w">      </span><span class="m">54604</span><span class="w">    </span><span class="m">3991516</span><span class="w">   </span><span class="m">2</span>%<span class="w"> </span>/dev/shm
</code></pre>
</div>

我使用以下代码进行转换：

converted = markdown2.markdown(lfmd, extras=['fenced-code-blocks'])

如果我现在在浏览器中打开 HTML 版本，我会看到不同字体的代码，但仅此而已。但我需要这些漂亮的代码块。

另一个问题是该 HTML 代码随后会作为 HTML 电子邮件发送。这就是为什么使用 Javascript 等不起作用。

我尝试用CSS更改文本背景。这对于内联代码非常有效。然而，代码块看起来很糟糕，因为它们在左侧对齐，然后在右侧磨损。

我蹩脚的 CSS 是什么样子的：

这是我的 HTML/CSS 代码，因为我无法控制 HTML 正文：

<head>
    <style>
        body {font-family: TeleNeo Office, sans-serif; color: #000000;}
        body {background-color: #ffffff;}
        code {
            font-family: Source Sans Pro, monospace;
            font-weight: normal;
            font-size: small;
            color: black;
            background-color: #E3E6E8;
            border-radius: 5px;
            height: fit-content;
            width: auto;
            padding: 3px 10px 3px 10px;
        }
        
    </style>
</head>

任何人都可以给我一些关于如何实现这个的提示吗？

Answer 1

background-color

和相关样式需要在

pre

标签（或其父

div

）上定义，实际上，如果您希望将相同的样式应用于代码块和代码跨度，那么您需要定义两者的样式。由于背景颜色相同，因此无需撤消

code

块内的

pre

元素的样式。所以只需定义两者即可：

pre, code {
    font-family: Source Sans Pro, monospace;
    font-weight: normal;
    font-size: small;
    color: black;
    background-color: #E3E6E8;
    border-radius: 5px;
    height: fit-content;
    width: auto;
    padding: 3px 10px 3px 10px;
}

Python：使用 Stackoverflow 中的代码块将 Markdown 转换为 html

问题描述投票：0回答：1

1个回答

最新问题

Python：使用 Stackoverflow 中的代码块将 Markdown 转换为 html

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1