Slack Github

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

Before you can highlight your code with our new system, you'll first need to install the Syntax Highlighter plugin available in our Marketplace.

Once the plugin is activated, wrap your code inside <pre> and <code> tags and, if you're using the WYSIWYG editor select the language classes you want to highlight from the Formats menu e.g. Code-php, Code-Javascript etc... 

In the Block Editor, whenever code is inserted into the CODE block, it's automatically formatted and prepped for highlighting. This streamlined process reduces the need for manual tag inputs, ensuring an efficient and error-free experience. So, for users aiming for precision and ease, the Syntax Highlighter plugin combined with the Block Editor in Publii is the ultimate toolkit.

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 detailed instructions on how to use the Syntax Highlighter plugin, please visit the designated guide.

Subscribe

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 contact@tidycustoms.net. By clicking below, you agree that we may process your information in accordance with our Privacy Policy.