Skip to main content
Beta Widget - Stability NoticeThis widget is currently in beta. While functional, some aspects may change before the stable release:
  • Hardcoded colors: Uses fixed colors that don’t fully adapt to theme changes
  • Dark theme only: Currently optimized for dark themes only
  • Loading states: Basic loading and error handling that will be enhanced
  • Copy feedback: Copy button works but visual feedback for successful copying is planned for future releases
These limitations will be addressed in upcoming releases as the widget moves toward stable release.

​
Example

Basic code block example

Code block with syntax highlighting and copy functionality displaying JSON data.

NeoCodeBlock(
  language: 'json',
  code: '''
{
  "products": [
    {
      "name": "Coca-Cola",
      "price": 2.99,
      "category": "beverages"
    },
    {
      "name": "Fanta Orange",
      "price": 2.79,
      "category": "beverages"
    },
    {
      "name": "Sprite",
      "price": 2.89,
      "category": "beverages"
    }
  ]
}''',
),

​
Properties

​
Required

​
code
String
required
The code content to display with syntax highlighting.

​
Content

​
language
String
default:"dart"
The programming language for syntax highlighting. Supports common languages like ‘json’, ‘javascript’, ‘typescript’, ‘python’, ‘yaml’, etc.

​
Best Practices

  • Width Constraints: Always provide width constraints to prevent layout issues by wrapping in ConstrainedBox, SizedBox, Expanded, etc.
  • Code Formatting: Use proper indentation and formatting in your code strings for better readability.

​
Integration Notes

  • Copy Functionality: The copy button automatically copies the entire code content to the system clipboard.
  • Text Selection: Users can manually select and copy portions of the code using standard text selection gestures.
  • Loading States: Shows a loading indicator while the syntax highlighter initializes.
⌘I