Syntax Highlighter is a WordPress ability from The Plus Addons for Elementor — usable via Easy MCP AI, which connects Claude, ChatGPT, and any AI assistant to your site.
Install Free Plugin →Syntax Highlighter
WriteAdds the The Plus "Syntax Highlighter" widget (tp-syntax-highlighter) to an Elementor container, displaying a code block with language-specific syntax coloring.
Requires the The Plus Addons for Elementor plugin (which registers under the 'tpae' ability category) on WordPress 6.9+, with Elementor active. Every ability requires the current user to have the 'edit_posts' capability (and 'edit_post' for the specific post being modified); abilities that create or edit content also verify Elementor and, where relevant, the target The Plus widget are available. A subset of abilities (theme templates, template conditions, dynamic tags, popups, and some custom-code abilities) only register when Elementor Pro is active, and many widget abilities load only in the free plugin when the Pro add-on is inactive.
What it does
The execute_callback tpae_mcp_add_theplus_syntax_highlighter_ability checks Elementor is active and the tp-syntax-highlighter widget is registered, requires post_id, parent_id, and sourceCode, and confirms the target post exists. It loads the post's Elementor element tree, builds settings from languageType and themeType (sanitize_key), sourceCode (kept raw as string), and lanugaetext/cpybtntext (sanitize_text_field), merges in any raw settings, and constructs a new widget element with widgetType tp-syntax-highlighter. It inserts the widget into the parent container at the given position and saves the Elementor data, returning an error if the parent is not found.
See it in action
You ask your AI assistant
"Add a syntax-highlighted PHP code block with the prism-okaidia theme showing this snippet to my documentation page."
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| post_id | integer | Yes | Elementor page/post ID |
| parent_id | string | Yes | Target Elementor container ID |
| position | integer | No | Insert position. Use -1 to append. |
| languageType | string | No | Programming language for syntax highlighting (markup, css, javascript, php, python, ruby, sql, java, c, cpp, json, git, http, perl) |
| themeType | string | No | Color theme for the code block (prism-default, prism-coy, prism-dark, prism-funky, prism-okaidia, prism-solarizedlight, prism-tomorrownight, prism-twilight) |
| sourceCode | string | Yes | Source code content to display |
| lanugaetext | string | No | Language label shown in header |
| cpybtntext | string | No | Copy button label text |
| settings | object | No | Raw Elementor/The Plus control settings to merge into the widget at creation time. Use control keys from sprout/get-theplus-widget-schema. |
Returns
Returns the new element_id, the widget_type (tp-syntax-highlighter), and the post_id the widget was added to.
Permission
Requires the current user to have the edit_posts capability, and if a post_id is supplied, also requires edit_post capability for that specific post.
More The Plus Addons for Elementor abilities
Accordion
Adds The Plus Addons "Accordion" widget (tp-accordion) to an Elementor container.
Add Code Snippet
Creates a site-wide Custom Code snippet using Elementor Pro, injecting CSS/JS/meta into the head or body on all pages.
Add Container
Adds a new Elementor flex container to a page or nests it inside another existing container.
Add Container
Adds a flex or grid container to a page, optionally nested inside a parent container.
Add Custom CSS
Adds custom CSS to a specific element or to the entire page (requires Elementor Pro).
Add Custom JavaScript
Adds a custom JavaScript snippet to a page by inserting an HTML widget containing a <script> tag; works with free Elementor.