Code

Below, you can see how the code elements such as <pre>, <code> for inline code, and <pre> blocks are styled, as well as how we highlight the code syntax. 

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 effectively in Publii CMS, you can use either the WYSIWYG editor or the block editor. Both editors provide user-friendly interfaces to insert and stylize your code, ensuring it is readable and aesthetically pleasing.

To insert code using the WYSIWYG editor, click on the 'Code' button. A popup will appear where you can select your code's language from a dropdown and paste your code into the textarea. The editor will then apply syntax highlighting based on the chosen language.

In the Block Editor, insert code by finding and selecting the 'Code' block. After selecting it, choose the desired code language from the provided list and paste your code into the block.

And now, for syntax highlighting, you must install the free Syntax Highlighter plugin available at Publii Marketplace. This will restyle your code block to look like this:

 .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%;
    }