> ## Documentation Index
> Fetch the complete documentation index at: https://docs.deploystack.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Syntax Highlighting

> Guide for using the CodeHighlight component to display syntax-highlighted code blocks.

The `CodeHighlight` component provides syntax highlighting for code blocks using Prism.js. It's a reusable component that handles the highlighting automatically without requiring manual Prism.js imports.

## Component Location

```
services/frontend/src/components/ui/code-highlight/
├── CodeHighlight.vue      # Main component
└── index.ts              # Export file
```

## Features

* **Automatic syntax highlighting** using Prism.js
* **Multiple language support** (JSON, JavaScript, TypeScript, Bash, YAML)
* **Clean default theme** with proper contrast
* **Error handling** for invalid code or unsupported languages
* **Zero setup** - just import and use

## Supported Languages

The component comes pre-configured with these languages:

* `json` - JSON data
* `javascript` - JavaScript code
* `typescript` - TypeScript code
* `bash` - Shell scripts and commands
* `yaml` - YAML configuration files

## Basic Usage

```vue theme={null}
<script setup lang="ts">
import { CodeHighlight } from '@/components/ui/code-highlight'

const jsonData = {
  name: "DeployStack",
  version: "1.0.0",
  features: ["MCP", "Teams", "Analytics"]
}

const formattedJson = JSON.stringify(jsonData, null, 2)
</script>

<template>
  <CodeHighlight :code="formattedJson" language="json" />
</template>
```

## Props

| Prop       | Type     | Default        | Description                      |
| ---------- | -------- | -------------- | -------------------------------- |
| `code`     | `string` | required       | The code to highlight            |
| `language` | `string` | `'javascript'` | Language for syntax highlighting |

## Examples

### JSON Data

```vue theme={null}
<script setup lang="ts">
import { CodeHighlight } from '@/components/ui/code-highlight'

const config = JSON.stringify({ apiUrl: "https://api.example.com" }, null, 2)
</script>

<template>
  <CodeHighlight :code="config" language="json" />
</template>
```

### JavaScript Code

```vue theme={null}
<script setup lang="ts">
import { CodeHighlight } from '@/components/ui/code-highlight'

const jsCode = `function greet(name) {
  return \`Hello, \${name}!\`
}`
</script>

<template>
  <CodeHighlight :code="jsCode" language="javascript" />
</template>
```

### TypeScript Code

```vue theme={null}
<script setup lang="ts">
import { CodeHighlight } from '@/components/ui/code-highlight'

const tsCode = `interface User {
  id: string
  name: string
  email: string
}

function getUser(id: string): User {
  // Implementation
}`
</script>

<template>
  <CodeHighlight :code="tsCode" language="typescript" />
</template>
```

## Adding More Languages

To add support for additional languages, edit the component and import the required Prism.js language component:

```typescript theme={null}
// In CodeHighlight.vue
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-css'
```

## Theme Customization

The component uses the default Prism.js theme (`prism.css`). To use a different theme, change the import in `CodeHighlight.vue`:

```typescript theme={null}
// Available themes:
import 'prismjs/themes/prism.css'          // Default light theme
import 'prismjs/themes/prism-tomorrow.css' // Dark theme
import 'prismjs/themes/prism-okaidia.css'  // Monokai-like dark theme
import 'prismjs/themes/prism-twilight.css' // Purple dark theme
import 'prismjs/themes/prism-dark.css'     // Simple dark theme
```

## Real-World Example

Here's how the component is used in the job details page to display JSON payloads:

```vue theme={null}
<script setup lang="ts">
import { CodeHighlight } from '@/components/ui/code-highlight'
import type { Job } from './types'

const job = ref<Job | null>(null)

const formatPayload = (payload: unknown): string => {
  try {
    if (typeof payload === 'string') {
      const parsed = JSON.parse(payload)
      return JSON.stringify(parsed, null, 2)
    }
    return JSON.stringify(payload, null, 2)
  } catch {
    return String(payload)
  }
}
</script>

<template>
  <div v-if="job">
    <h3 class="text-lg font-semibold mb-4">Payload</h3>
    <CodeHighlight :code="formatPayload(job.payload)" language="json" />
  </div>
</template>
```

## Error Handling

The component handles errors gracefully:

* If the specified language is not available, it displays the code without highlighting
* If the code cannot be highlighted (syntax errors), it displays the raw code
* No errors are thrown to the console

## Best Practices

1. **Format code before passing** - Use `JSON.stringify(data, null, 2)` for JSON
2. **Choose the correct language** - Ensures proper syntax highlighting
3. **Keep code snippets reasonable** - Very large code blocks may impact performance
4. **Use template literals** for multi-line code strings in TypeScript

## Related Documentation

* [UI Design System](/development/frontend/ui/) - Overall design patterns