Content widget
Code Highlight
Code in a tidy block with a file name, line numbers, highlighted lines and a copy button.
Build it with your AI
“Add this JSON example with the file name element.json and line 3 highlighted.”
Live demo
See it working
{
"type": "button",
"settings": { "text": "Download free", "link": { "url": "/download/" } }
}Settings
30 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
12 settings
Code
Code
Language
File name / title
Show language label
Line numbers
First line number
Highlight lines
Wrap long lines
Copy button
Copy label
Copied label
Theme
Design
18 settings
Box
Font size
Code typography
Max height
Tab size
Background
Text color
Code padding
Border radius
Border
Shadow
Header
Background
Text color
Typography
Lines
Line number color
Highlighted line background
Highlighted line marker
Copy button
Text color
Background
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Code Highlight settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add this JSON example with the file name element.json and line 3 highlighted.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{
"type": "code-highlight",
"settings": {
"language": "json",
"title": "element.json",
"highlight_lines": "3",
"code": "{\n \"type\": \"button\",\n \"settings\": { \"text\": \"Download free\", \"link\": { \"url\": \"/download/\" } }\n}"
}
}More content widgets
Works well with
Breadcrumbs
Shows visitors where they are — Home › Blog › Post — and tells Google too, with structured data.
Loop Carousel
Your posts, products or any content, in a carousel of cards you design yourself.
Loop Grid
Your posts, products or any content in a grid of cards you design yourself, with pagination or load more.
Posts
A ready-made grid or list of posts with images, dates and excerpts.
Steps
A “How it works” row of numbered steps joined by a line.
Table
Data and comparison tables with striped rows, a sticky header and a caption.