Code Highlight widget makes it simple to display code examples with syntax highlighting in a format that's easy to read and copy.
Adding Code Highlight widget
Add the Code Highlight widget to the canvas. For details, see Add Elements article.
Content tab
- Language: Choose the programming language for syntax highlighting from over 50 supported options such as Markup, HTML, XML, SVG, Mathml, CSS, JavaScript, ActionScript, PHP, Ruby, etc.
- Code: Enter the code snippet you want to display on the page. This can include Dynamic Tag data from plugins like ACF.
- Line Numbers: Opt to display line numbers next to each line of code.
- Copy to Clipboard: Allow users to copy the code with a single click on the Copy button located in the upper right corner of the code box.
- Highlight Lines: Highlight specific lines of code by entering line numbers or using Dynamic Tags. Separate sets of numbers with commas (e.g., 2-7, 10, 13-15).
- Word Wrap: Toggle to show or hide word wrapping for the code.
- Theme: Choose between the available themes for the code display.
- Height: Specify the height of the code box.
- Font Size: Adjust the font size of the displayed code.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.