eds-code-block

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

In React and Vue

Overview

A component that displays a code block with syntax highlighting.

Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS, Python, Bash/Shell, and YAML.

Properties

Property	Attribute	Description	Type	Default
`code`	`code`	The code content to display.	`string`	`undefined`
`language`	`language`	The language type for syntax highlighting (e.g., ‘javascript’, ‘html’, ‘css’)	`string`	`undefined`

Dependencies

Used by

color-primary-palette
color-secondary-palette
color-support-palette
components-section
gradient-primary-palette
gradient-secondary-palette
gradient-support-palette
token-list
token-radii
token-shadows
token-typography

Depends on

eds-icon-wrapper

Graph

graph TD;
  eds-code-block --> eds-icon-wrapper
  color-primary-palette --> eds-code-block
  color-secondary-palette --> eds-code-block
  color-support-palette --> eds-code-block
  components-section --> eds-code-block
  gradient-primary-palette --> eds-code-block
  gradient-secondary-palette --> eds-code-block
  gradient-support-palette --> eds-code-block
  token-list --> eds-code-block
  token-radii --> eds-code-block
  token-shadows --> eds-code-block
  token-typography --> eds-code-block
  style eds-code-block fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS