Code

Lightweight, extensible syntax highlighter

HTML

<pre><code class="language-html">
&lt;section&gt;
  &lt;div&gt;
    &lt;h1&gt;This is the Main Heading&lt;/h1&gt;
    &lt;p&gt;This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.&lt;/p&gt;
    &lt;h2&gt;This is a Sub-Heading&lt;/h2&gt;
    &lt;p&gt;Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).&lt;/p&gt;
    &lt;h2&gt;Another Sub-Heading&lt;/h2&gt;
    &lt;p&gt;Here you can see another sub-heading.&lt;/p&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>


<section>
  <div>
    <h1>This is the Main Heading</h1>
    <p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.</p>
    <h2>This is a Sub-Heading</h2>
    <p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p>
    <h2>Another Sub-Heading</h2>
    <p>Here you can see another sub-heading.</p>
  </div>
</section>

CSS

<pre><code class="language-css">
@font-face {
  font-family: Kate; src: url('Kate.woff2');
}

body, .usertext {
  color: #FF4136; background: #444;
  font-family: Kate, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}
</code></pre>


@font-face {
  font-family: Kate; src: url('Kate.woff2');
}

body, .usertext {
  color: #FF4136; background: #444;
  font-family: Kate, sans;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

JS

<pre><code class="language-js">
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i &lt; classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}
</code></pre>


function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
             ' class=""';
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

Inline

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

For example, <section> should be wrapped as inline.

User input

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Output

<samp>This text is meant to be treated as sample output from a computer program.</samp>

This text is meant to be treated as sample output from a computer program.

⌃