Code Highlight

The Code Highlight widget is a powerful feature that allows you to present code examples in a readable and visually consistent format. With this widget, you can add syntax highlighting to snippets of code, making them more accessible and user-friendly. You can choose from over 50 supported coding languages, including Markup, HTML, XML, CSS, JavaScript, and more. Additionally, features like line numbers, copy-to-clipboard functionality, and customizable themes enhance the overall experience for both developers and site visitors.

View Live Demo

Code Highlight
  • Language: Select the programming language of your code snippet. This will affect syntax highlighting.
  • Code: Enter your code into the code block. This is where you will paste the code you wish to display and highlight.
  • Line Numbers: Toggle 'Yes' to display line numbers alongside your code.
  • Copy to Clipboard: Toggle 'On' to enable users to copy the code to their clipboard with one click.
  • Highlight Lines: Specify line numbers to be highlighted for emphasis. You can list single lines or ranges separated by a comma, for example, 1, 3-6 .
  • Word Wrap: Toggle 'Off' to keep all code on a single horizontal line or 'On' to wrap long lines onto the next line.
  • Theme: Choose a color theme for your code block, such as 'Solid', 'Dark', 'Okaidia', 'Solarizedlight', 'Tomorrow', or 'Twilight'. This affects the background and text colors for better readability or to match your site's design.
  • Height: Adjust the height of your code block. This defines how tall the code container will be.
  • Font Size: Set the size of the text within the code block. This will affect how large the code appears on your site.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.