Syntax Highlighter Element
The Syntax Highlighter Element shows a piece of code with colored syntax, optional line numbers and a copy button. The code is displayed read-only with the code editor that ships with WordPress, so visitors see it exactly as you entered it.
Use it for tutorials, documentation and support pages: CSS snippets, HTML examples, configuration files, command lines or JSON. Languages from CSS, HTML and JavaScript to PHP, SQL, YAML and bash are available, and four color themes cover light and dark page designs.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Syntax Highlighter Element
Add the Syntax Highlighter Element to a column and paste your code into Code to Highlight. Then pick the Code Language, for example css, html, php or bash, so the colors match the language.
Choose a Highlighter Theme (two light and two dark ones), decide whether to show Line Numbers and set Line Wrapping: Break wraps long lines, Scroll keeps them on one line with a horizontal scrollbar. On the Design tab you set the font size, border, background and the colors of the line number column.
Turn on Copy to Clipboard to add a button above the code that copies it with one click; Copy to Clipboard Text sets its label. Every option set to Default follows the Syntax Highlighter section of Global Options, so you can change the look of all code blocks on the site in one place.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Syntax Highlighter. Change them there to style every Syntax Highlighter at once.
General
| Heading | Description |
|---|---|
| Code to Highlight | Enter some code to be displayed with highlighted syntax. |
| Highlighter Theme | Select which theme you want to use for code highlighting. |
| Code Language | Select the language the code is in. |
| Line Numbers | Choose if you want to display or hide line numbers. |
| Line Wrapping | Controls whether the long line should break or add horizontal scroll. |
| Copy to Clipboard | Choose if you want to allow your visitors to easily copy your code with a click of the button. |
| Copy to Clipboard Text | Enter text to be displayed for user to click to copy. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Font Size | Controls the font size of the syntax highlight code. In pixels. |
| Border Size | Controls the border size of the syntax highlighter. In pixels. |
| Border Color | Controls the border color. |
| Border Style | Controls the border style. |
| Background Color | Controls the background color for code highlight area. |
| Line Number Background Color | Controls the line number background color for code highlight area. |
| Line Number Text Color | Controls the line number text color for code highlight area. |
| Margin | Control spacing around the syntax highlighter. In px, em or %, e.g. 10px. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Always set the Code Language. Without it the code is shown in one color.
- Pick a dark theme only together with a dark Background Color, or the text becomes hard to read.
- Use Scroll for code where line breaks matter, such as command lines or configuration files, so visitors do not copy a wrapped line by mistake.
- Keep each snippet short and focused. Long files are hard to read on a phone; link to a download instead.
- For code that should actually run on the page, use the Code Block Element instead.