MazCodeHighlight

MazCodeHighlight displays source code with syntax highlighting powered by shiki. It auto-detects dark/light mode, ships with a copy-to-clipboard button, a language badge, and supports lazy loading.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Installation requirement

Install shiki in your project to enable highlighting:

pnpm

pnpm add shiki

npm

npm install shiki

yarn

yarn add shiki

If shiki is not installed, the component falls back to a plain <pre><code> block.

Basic usage

ts

<template>
  <MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
</template>

<script lang="ts" setup>
  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
</script>

With slot

The default slot text is used as source code when the code prop is not provided. This is useful for plain text blocks.

bash

<template>
  <MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
</template>

<script lang="ts" setup>
  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
</script>

Languages

Pass any valid shiki language identifier to the language prop. The chosen language is also displayed as a small badge in the top-right corner (the badge fades out on hover when the copy button appears).

vue

<template>
  <MazCodeHighlight language="vue" :code="vueExample" />
</template>

<script lang="ts" setup>
  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'

  const vueExample = `<script lang="ts" setup>
  import { ref } from 'vue'
  const count = ref(0)
<\/script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>`
</script>

Custom theme

Override the auto-detected theme with any shiki built-in theme.

js

<template>
  <MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
</template>

<script lang="ts" setup>
  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
</script>

Copy to clipboard

A copy button is displayed in the top-right corner on hover (or when focused via keyboard). Clicking it writes the resolved code to the clipboard and shows a check icon for ~1.5s.

Disable the copy button

Set :copyable="false" to hide the button entirely.

ts

<template>
  <MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
</template>

Copy a different value than the displayed code

Use copyValue when the displayed source differs from what should be copied — for example to strip a leading $ prompt when rendering a shell command. This is the mechanism MazWindowMockup uses internally to keep the terminal prompt out of the clipboard.

bash

<template>
  <MazCodeHighlight
    code="$ pnpm add maz-ui"
    copy-value="pnpm add maz-ui"
    language="bash"
  />
</template>

Disable rounded corners

Set :rounded="false" to render the highlighted block with squared corners — useful when embedding inside another container that already has its own border-radius (e.g. inside MazWindowMockup).

ts

<template>
  <MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
</template>

Custom translations

The copy button's aria-label and tooltip come from the @maz-ui/translations package (codeHighlight.copyToClipboard / codeHighlight.copiedToClipboard). You can override either key per-instance with the translations prop without touching the global locale:

ts

<template>
  <MazCodeHighlight
    code="const hello = 'world'"
    language="ts"
    :translations="{
      copyToClipboard: 'Copier le code',
      copiedToClipboard: 'Copié !',
    }"
  />
</template>

For app-wide translations, set up the maz-ui translations plugin and the component will pick up your locale automatically.

Props

Name	Description	Type	Required	Default
code	Source code to highlight	string	No	undefined
language	Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash')	string	No	undefined
theme	Override the shiki theme name. Defaults to github-light/github-dark based on current color mode	string	No	undefined
rounded	Apply rounded corners on the highlighted code block.	boolean	No	true
copyable	Show the copy-to-clipboard button on hover.	boolean	No	true
copy-value	Value copied to the clipboard. Falls back to the resolved code when omitted. Useful when the displayed code differs from what should be copied (e.g. terminal prompt prefix).	string	No	undefined
translations	Custom translations for the component. Override either key independently.	Partial<MazUiTranslationsNestedSchema['codeHighlight']>	No	undefined