I'm trying to import CSS styles into my HTML file exported by the Markdown library, but for some reason the attributes are basic, or so to speak, to generate a clean layout. Is it possible to add these attributes to the entire layout?
from markdown import markdown
text = '''
#Example
## Emphasis
**This is bold text**
__This is bold text__
...
html = markdown(text,extensions=['fenced_code','codehilite'])
css = '"css/github-markdown.css"'
doc = f'<html><head><link rel="stylesheet" type="text/css" href={css}></head><body>{html}</body></html>'
print(doc)
<html><head><link rel="stylesheet" type="text/css" href="css/github-markdown.css"></head>
<body><h1>Example</h1>
<h2>Emphasis</h2>
<p><strong>This is bold text</strong></p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><em>This is italic text</em></p>
<p>~~Strikethrough~~</p>
<h2>Blockquotes</h2>
<blockquote>
<p>Blockquotes can also be nested...</p>
<blockquote>
<p>...by using additional greater-than signs right next to each other...</p>
<blockquote>
<p>...or with spaces between arrows.</p>
</blockquote>
</blockquote>
</blockquote>
<h2>Lists</h2>
<p>Unordered</p>
<ul>
<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>
<li>Sub-lists are made by indenting 2 spaces:</li>
<li>Marker character change forces new list start:<ul>
<li>Ac tristique libero volutpat at</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</li>
<li>Very easy!</li>
</ul>
<p>Ordered</p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
</ol></body></html>
By default, styles have attributes like .markdown-body
and others.
I expect a result like the one shown below:
<body class="markdown-body"><h1>Example</h1>
Actually I just had to add the header and everything that is needed to make the association of the css style possible as follows: `<body class="markdown-body">`
from markdown import markdown
text = '''
#Example
## Emphasis
**This is bold text**
__This is bold text__
...
html = markdown(text,extensions=['fenced_code','codehilite'])
css = '"css/github-markdown.css"'
doc = f'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href={css}>
<title>Markdown Viewer</title>
</head>
<body class="markdown-body">
{html}
</body>
</html>
'''
print(doc)
When reviewing the content of the CSS, I realized that the markdown-body attribute is found in general form and it was only a matter of adding that to the body tag.
.markdown-body {
--base-size-4: 0.25rem;
--base-size-8: 0.5rem;
--base-size-16: 1rem;
--base-size-24: 1.5rem;
--base-size-40: 2.5rem;
--base-text-weight-normal: 400;
--base-text-weight-medium: 500;
--base-text-weight-semibold: 600;
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--fgColor-accent: Highlight;
}
@media (prefers-color-scheme: dark) {
.markdown-body, [data-theme="dark"] {
...
}