Code

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.

Inline

Wrap inline snippets of code with <code>.

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

Block

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

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

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>cd</kbd> 
<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.