CSS

CSS selector

# HTML

<div class="container">
  <img src="image1.png" class="theme-image light-mode" alt="Matching Image">
</div>

# Matching CSS selector

.container img.theme-image.light-mode {
    /* Styles specific to images inside .container */
}

Keyframe and icons

Fading text!

Bouncing text!

Text

Bouncing text!

Flipping text!

Shaking text!

Headbeating text!

Attribute list

# attr_list
{: #id1 .class1 id=id2 class="class2 class3" .class4 }
results in
id="id2" class="class2 class3 class4"

More at: https://python-markdown.github.io/extensions/attr_list/

markdown to attr

Subscribe to our newsletter

<p><a class="md-button" href="#">Subscribe to our newsletter</a></p>

Subscribe to our newsletter

<p><a class="md-button md-button--primary" href="#">Subscribe to our newsletter</a></p>

hello

<p><strong class="red">hello</strong></p>

set on td	set on em
a	b

<table>
<thead>
<tr>
<th>set on td</th>
<th>set on em</th>
</tr>
</thead>
<tbody>
<tr>
<td class="foo"><em>a</em></td>
<td><em class="foo">b</em></td>
</tr>
</tbody>
</table>

Failed tentatives

bold ... bold

{:1: .myclass lang=fr}

bonjour

hello { .red }

FOOTER