Skip to main content

​
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

PropTypeDefaultDescription
codestringrequiredThe code to highlight
languagestring'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

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