Syntax Highlighting

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

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

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

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

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

// In CodeHighlight.vue
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-css'

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

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