Less provides special styles for showing computer code on websites. While not necessary for all content, they are particularly useful for developers and technical writers who need to share code examples.
In this article, we’ll explore the code content styles available in the Content Styles dropdown and WordPress Editor. Let’s get started.
Inline Code: Enhancing code readability
Inline code typically employs a distinct monospaced font to clearly differentiate code snippets from regular text. It’s particularly useful for referencing variable names, function calls, or short code snippets within your content.
To create an inline code put your code text between <code>
tags.
The <code><h2></code> tag is used for second-level headings in HTML.
Keyboard Input: Enhancing keyboard instructions
Keyboard input is helpful when writing instructions that include keyboard commands. For example, you can use it to show ⌘ + C on Mac or Ctrl + C on Windows.
To create keyboard input put your keyboard instructions between <kbd>
tags.
For example, you can use it to show <kbd>⌘</kbd> + <kbd>C</kbd> on Mac or <kbd>Ctrl</kbd> + <kbd>C</kbd> on Windows.
Preformatted: Precision text layouts
Preformatted text preserves the whitespace of inputted text. It is particularly useful when you need to display code snippets, ASCII art, or any text with a precise layout.
(__) (oo) /-------\/ / | || * ||----|| ^^ ^^ Moo!
To create reformatted text put your text between <pre>
tags.
<pre> code { font-family: 'Fira Code', 'Source Code Pro', monospace; font-size: 0.9em; background-color: #f4f4f4; padding: 0.2em 0.4em; border-radius: 3px; } </pre>