---
metaTitle: Code Snippet component | AwesCode UI
meta:
  - name: description
    content: The <AwCodeSnippet /> component is used to render Code Snippet - UI Vue component for AwesCode UI.
title: Code Snippet
---

# AwCodeSnippet

**Category:** Organism | **Import:** Dynamic

The `AwCodeSnippet` component displays syntax-highlighted code with a copy-to-clipboard button. It uses Prism.js for syntax highlighting and supports multiple programming languages.

## Overview

`AwCodeSnippet` provides a code display solution with:
- Syntax highlighting via Prism.js
- Copy-to-clipboard functionality
- Multiple language support
- Scrollable code blocks
- Functional component for optimal performance

## Usage

### Basic Example

```markup
<AwCodeSnippet code="const x = 1;" language="javascript" />
```

### Vue Template

```markup
<AwCodeSnippet 
    :code="vueCode"
    language="markup"
/>
```

### JavaScript

```markup
<AwCodeSnippet 
    code="function hello() { console.log('Hello'); }"
    language="javascript"
/>
```

### CSS

```markup
<AwCodeSnippet 
    code=".class { color: red; }"
    language="css"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| code | Code content to display | `String` | `false` | `''` |
| language | Programming language for syntax highlighting | `String` | `false` | `'markup'` |

**Supported Languages:**
All Prism.js supported languages (markup, css, javascript, json, python, php, etc.)

### Slots

This component does not have slots (functional component).

### Events

This component does not emit events (functional component).

## Related Components

- `AwCode` - Code input component (different use case)
- `AwButton` - Button component used for copy button

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Component is functional (stateless) for optimal performance
- Uses Prism.js for syntax highlighting
- Copy button uses `clipboard-copy` library
- Code is wrapped in `<pre><code>` elements
- Language class is applied to code element (`language-{language}`)
- Copy button is positioned absolutely in top-right corner
- Component handles Prism.js errors gracefully
- Code block is scrollable when content overflows