CodeBlock

A custom code block component with syntax highlighting and a copy button.

Code Blocks are a great way to display code snippets in your site. Use the standard markdown syntax of three backticks (```) to create a code block, or use the <CodeBlock> component.

Usage

Add the CodeBlock() component to your components list in your main.dart file:

ContentApp(
  components: [
    CodeBlock(),
  ],
)

Then use the code block syntax in your content files to display the code blocks.

\```dart
void main() {
  print('Hello, world!');
}
\```

Properties

The CodeBlock() constructor takes the following properties:

defaultLanguageStringrequired

The default language to use for syntax highlighting. This is used when no language is specified for a code block. Defaults to "dart".

grammarsMap<String, String>

By default, the code block component only supports the dart language for syntax highlighting. You can add support for other languages by adding additional grammars. The key is the language name and the value is a json encoded string of the TextMate grammar rules.

themeHighlighterTheme

A custom theme to use for syntax highlighting. This overrides the default theme if provided.