pythonmarkdown

How to add automatic attributes to the Python Markdown library


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>


Solution

  • 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"] {
    ...
    }