<section class="language-markup">

Different markup

code.language-css

p { color: red; }{ .language-css }

pre.language-css > code

pre > code.language-css

<pre><code class="language-css">p { color: red; }</code></pre>

pre.language-css > code.language-*

<pre class="language-css"><code class="language-*">p { color: red; }</code></pre>

code.lang-css

p { color: red; }{ .lang-css }

pre.lang-css > code

pre > code

No language, should inherit .language-markup

code.language-*

No language, should inherit .language-markup

<p>hi!</p>{ .language-* }

code.language-none

Should not be highlighted.

<p>hi!</p>{ .language-none }

</section> <section>

Per language examples

<div id="languages"> {% for id, language in languages -%} <label data-id="{{ id }}"> <input type="checkbox" name="language" value="{{ id }}" {{ "checked" if language.option == "default" }} /> {{ language.title }} </label> {% endfor %} </div> </section> <section id="examples"> {% for id, language in languages -%} <section id="language-{{ id }}" class="language-{{ id }}"></section> {% endfor %} </section>