# Markdown + automated HTML styling API Reference

See Source

See Output

# Example Markdown

  * With **bold** and _italics_
  * With a link

### And a subheading

> This is a blockquote

This supports inline latex: $e^{\pi i} + 1 = 0$ as well as block latex thanks to Katex.

$$ \frac{1}{2\pi i} \oint_C \frac{f(z)}{z-z_0} dz $$

And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function)

[code]

    def add(a, b):
        return a + b
    
[/code]

[code]

    def ex_markdown():
        md = '''# Example Markdown
    
    + With **bold** and *italics*
    + With a [link](https://github.com)
    
    ### And a subheading
    
    > This is a blockquote
    
    This supports inline latex: $e^{\\pi i} + 1 = 0$ as well as block latex thanks to Katex.
    
    $$
    \\frac{1}{2\\pi i} \\oint_C \\frac{f(z)}{z-z_0} dz
    $$
    
    And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function)
    
    ```python
    def add(a, b):
        return a + b
    ```
    '''
        return render_md(md)
    
[/code]

You can overwrite the default styling for markdown rendering with your own css classes with `class_map

See Source

See Output

With custom **bold** style

> But no extra quote style because class_map overrides all default styled
[code]

    def ex_markdown2():
        md = '''With custom **bold** style\n\n > But no extra quote style because class_map overrides all default styled'''
        return render_md(md, class_map={'b': 'text-red-500'})
    
[/code]

You can modify the default styling for markdown rendering with your own css classes with `class_map_mods

See Source

See Output

With custom **bold** style

> But default quote style because class_map_mods replaces sepecified styles and leaves the rest as default
[code]

    def ex_markdown3():
        md = '''With custom **bold** style\n\n > But default  quote style because class_map_mods replaces sepecified styles and leaves the rest as default'''
        return render_md(md, class_map_mods={'b': 'text-red-500'})
    
[/code]

This uses the `apply_classes` function, which can be used to apply classes to html strings. This is useful for applying styles to any html you get from an external source.

See Source

See Output

<div><h1 class="uk-h1 text-4xl font-bold mt-12 mb-6">Hello, World!</h1><p class="text-lg leading-relaxed mb-6">This is a paragraph</p></div>

[code]

    def ex_applyclasses():
        return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
    
[/code]

One common external source is a markdown renderer. MonsterUI uses tailwind css for styling so you don't get any styling without specifying classes, `apply_classes` can do that for you.

See Source

See Output

# Hi

a link

[code]

    def ex_applyclasses2():
        from mistletoe import markdown, HTMLRenderer
        md = markdown('# Hi\n[a link](www.google.com)', renderer=HTMLRenderer)
        return Safe(apply_classes(md))
    
[/code]

### apply_classes

Source

[code]

    apply_classes(html_str: str, class_map=None, class_map_mods=None) -> str
[/code]

> Apply classes to html string

**Params**

  * `html_str` Html string

  * `class_map` Class map

  * `class_map_mods` Class map that will modify the class map map (for small changes to base map)

**Returns:** Html string with classes applied