Working with Code Blocks and Syntax Highlighting

---

title: 'Working with Code Blocks and Syntax Highlighting' description: 'A demonstration of code block styling and syntax highlighting for technical documentation and developer content.' date: '2026-01-25' slug: code-blocks-demo author: alex thumbnail: /content/assets/blog/code-thumb.svg thumbnailAlt: Code block demonstration thumbnail heroImage: /content/assets/blog/code-hero.svg heroImageAlt: Code editor style hero image tags:

• product
• development draft: false

---

For technical content and developer documentation, well-formatted code blocks are essential. Here's how code rendering works in our content system.

Basic Code Blocks

You can include code blocks using standard Markdown fenced code blocks. Here's a JavaScript example:

// Creating a menu configuration
const menuConfig = {
  name: 'Daily Specials',
  pages: [
    { type: 'collection', collectionId: 'staff-picks', duration: 15 },
    { type: 'media', mediaId: 'promo-video', duration: 30 },
    { type: 'collection', collectionId: 'new-arrivals', duration: 15 },
  ],
  settings: {
    transitionStyle: 'fade',
    showClock: true,
  },
};

Multiple Languages

Our syntax highlighting supports many languages:

TypeScript

interface Product {
  id: string;
  name: string;
  strain?: {
    name: string;
    type: 'indica' | 'sativa' | 'hybrid';
    thcPercent?: number;
    cbdPercent?: number;
  };
  prices: {
    size: string;
    price: number;
  }[];
}

function formatPrice(price: number): string {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(price);
}

JSON

{
  "menu": {
    "id": "menu_01",
    "name": "Main Floor Display",
    "pages": [
      {
        "id": "page_01",
        "type": "collection",
        "duration": 20
      }
    ]
  }
}

Bash/Shell

# Install the Trikome CLI (hypothetical example)
npm install -g @trikome/cli

# Initialize a new project
trikome init my-menu

# Deploy to your devices
trikome deploy --store my-store

Inline Code

You can also use inline code for short references like variable names, file paths (/content/blog/post.mdx), or commands (npm install).

Best Practices

When including code in your content:

1. Always specify the language — this enables proper syntax highlighting
2. Keep examples focused — show only what's relevant to your point
3. Add comments — help readers understand what the code does
4. Test your examples — make sure they actually work!

Wrapping Up

Good code formatting makes technical content much more readable and professional. Use code blocks liberally when documenting APIs, configurations, or development workflows.