Display formatted code on the web

Developers share code snippets and write documentation that needs to show formatted code.

There are some tools available to show to do it.

The convention across tools is to wrap code in <pre><code class="language-css"> blocks, which can be picked up and styled by different libraries.

Highlight.js

https://highlightjs.org/

Supports many languages and styles.

Themes: https://highlightjs.org/static/demo/

Usage

1. Load highlight.js script and theme css from a CDN
   

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/googlecode.min.css" />
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

2. Wrap code snippets in <pre><code class="language-*">
   

   <pre><code class="language-css">
   body {
       font-family: sans-serif;
   }
   </code></pre>

3. Call hljs.
   

   <script>hljs.highlightAll();</script>