Code Syntax Highlighter for Elementor

Code that sits in plain text is hard to read. Readers lose their place, miss the structure and struggle to tell one part of a snippet from another. This plugin colors and formats code so each line is easier to follow. It supports programming, scripting and mathematical markup languages, and it is built on the prism.js library.

You work with it inside Elementor through a dedicated widget, so adding a code block follows the same drag-and-drop steps as any other element. You can pick from many visual themes, show line numbers, and point out specific lines. It also pulls code from BitBucket and GitHub by URL, which suits tutorials, documentation and technical blogs.

Features

• Over 200 languages: Format code in more than 200 programming and markup languages, so one plugin covers a wide range of development and scripting topics on the same site.
• 30+ style themes: Choose from more than 30 visual themes to match the look of your code blocks to the rest of your website design.
• BitBucket and GitHub embeds: Add code from external repositories by entering a URL, which lets a code block display content kept in BitBucket or GitHub.
• Line numbers and highlighting: Show line numbers and emphasize chosen lines, so readers can follow along with an explanation and find the exact part being discussed.
• Elementor widget: Add and customize code blocks directly in Elementor's drag-and-drop editor, without writing any code to set up the block itself.
• Retina ready and responsive: Code blocks are made to display clearly on different devices and screen sizes, including high-density retina screens.
• Built on prism.js: The plugin relies on the lightweight prism.js library to handle syntax highlighting for the code you publish.
• Cross-browser display: Code blocks are meant to look consistent across modern browsers, so visitors see the same formatting whichever one they use.

Best for

• Tech bloggers publishing code tutorials with Elementor
• Documentation pages that include many code examples
• Agencies building developer-focused client sites in Elementor