Code Theme

We use CodeMirror for rendering and formatting our code blocks, and CodeMirror provides heaps of themes for you to choose from. The list of themes is available here.

How to Change the Code Theme

To change the code theme, we need to import the theme stylesheet as well as to provide a setting to indicate which theme to use.

• First, find a CDN providing the stylesheet of the theme for maximum performance. cdnjs is an example.
• Import the theme stylesheet by add such a style tag using Custom HEAD Tags:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.60.0/theme/ambiance.min.css">

• Apply the theme settings also by adding a script to your HEAD tags:

<script>

    window.settings.apply({

      code: {

        theme: 'ambiance'

      }

    });  

</script>

You might want to change the styling of the code block tabs and copy button to match the theme you have chosen.