Python: конвертируйте Markdown в html с помощью кодовых блоков, как в stackoverflow
Я пытался преобразовать файл Markdown в HTML-код с помощью Python в течение нескольких дней — безуспешно. Файл уценки содержит встроенный код и блоки кода. Однако я не могу найти решение для отображения блоков кода в HTML, как это делает StackOverflow или GitHub. Другими словами, прямоугольник, содержащий код.
Файл 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>
Может ли кто-нибудь дать мне совет о том, как я мог бы реализовать это вместо этого?
Ответы 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;
}