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, install the free Syntax Highlighter plugin, which is available in the official Publii Marketplace.

After installing the plugin, use the dedicated buttons in the Publii editors to add code highlighting. In the opened popup, enter your code and select the programming language from the dropdown list.

 .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 more details on how to use the syntax highlighting plugin, visit this guide page