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

const greeting = 'Hello, maz-ui!'

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.

npm install maz-ui

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

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

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

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.

console.log('dracula 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.

const noCopyButton = true

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.

$ pnpm add maz-ui

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

// squared corners

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:

const hello = 'world'

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	Possible values
code	Source code to highlight	string	No	-	-
language	Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash')	string	No	"text"	-
theme	Override the shiki theme name. Defaults to github-light/github-dark based on current color mode	string	No	-	-
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	-	-
translations	Custom translations for the component. Override either key independently.	{ copyToClipboard?: string | undefined; copiedToClipboard?: string | undefined; }	No	-	-