Syntax Highlighting

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

<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

<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

<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

<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:

// 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:

// 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:

<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

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

UI Design System - Overall design patterns

On this page