Syntax Highlighter

Documentation

Advanced Setup

Syntax Highlighter

Code Syntax Highlighting

Edger supports code highlighting via the Prism plugin. You can check the plugin documentation here.

In Gutenberg, add a Code Block and enter the correct language in the “Additional CSS Class” box. Example:

Use Codeblock in Gutenberg editor

To highlight your code, always use the following tag structure:

 <pre class="language-X">
 	<code></code>
 </pre>

Where X can be: html, css, js, php, etc.

Example for HTML:

Full HTML example

The line numbers class is optional. If you don’t want numbered lines, just use: <pre class="language-html"></pre>

💡

Important: You must always wrap your code with <pre><code>your code</code></pre>.