You can easily add extra styling code elements to your content by selecting the right element from the Formats menu of the WYSIWYG editor toolbar.


Wrap inline snippets of code with <code>.

<code> Your code here... </code>


Use <pre> and <code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Your code here...

User input

Use the <kbd> to indicate input that is typically entered via keyboard.
These are the examples of using <kbd>: switch directories by typing  cd or press ctrl + ,

<kbd>ctrl + ,</kbd>

Syntax Highlighter

To highlight your code syntax use <pre> and <code>, then select it (it's enough to click in the code area; no need to highlight it completely) and select the language classes you want to highlight from the Formats menu e.g. Code-php, Code-Javascript etc...

To have your code lines numbered, choose the Line numbers <pre> option from the Formats menu. Remember that the Line numbers option must be enabled in your theme for this to work (this option may be found in the theme settings). This will restyle your code block to look like:

 .navbar__submenu {
        background: #ffffff;
        box-shadow: 0 0 6px rgba(52, 58, 65, 0.15);
        left: auto;
        margin: 10px 0 0;
        opacity: 0;
        position: absolute;
        top: 100%;

For a tutorial on how to modify or add more languages, check out the "Highlight your code syntax with Prism.js" article.


Get the latest news, updates and more delivered directly to your email inbox

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at By clicking below, you agree that we may process your information in accordance with our Privacy Policy.