Usage

SyntaxTheme is the provider for code colors. It sets --astryx-code-syntax-* and --astryx-code-block-background for every CodeBlock inside it. useSyntaxTheme() reads the nearest syntax theme, including one set with defineTheme({ syntax }).

A single block can take the syntaxTheme prop instead of a wrapper. Use the wrapper when a region of code should share one preset.

Presets are exported from @astryx-vue/core/Code: oneDarkPro, dracula, monokai, nord, tokyoNight, catppuccinMocha, githubDark, githubLight, solarizedLight, oneLight, catppuccinLatte, and tokyoNightLight. defineSyntaxTheme() builds another one. All 14 color tokens are required. Five diff slots are optional and use the same --astryx-code-syntax-* names: added, removed, diff-header, added-marker, and removed-marker. Leave them out and the markers follow the punctuation color, with no extra header paint. A [light, dark] tuple is stored as light-dark().

<script setup lang="ts">
import { CodeBlock, dracula, SyntaxTheme } from '@astryx-vue/core/Code'

const code = `const status = response.ok ? 'success' : 'error'`
</script>

<template>
  <SyntaxTheme :theme="dracula">
    <CodeBlock :code="code" language="ts" />
  </SyntaxTheme>
</template>

Best practices

Guidance	Practices
Do	Set syntax on defineTheme() when the whole app should share one code palette.
Do	Use SyntaxTheme when one section needs a different preset.
Do	Pass syntaxTheme on a single CodeBlock instead of wrapping that one block.
Don't	Recolor a code block with one-off CSS. A preset keeps the token colors and the background together.

Examples

SyntaxTheme — Dark Preset

    

      
      

        
          Dracula preset — tsx
        
      
      
    
    
function greet(name: string) {
  return `Hello, ${name}!`;
}

    
  

Wrap a code block in SyntaxTheme to apply a dark syntax preset such as Dracula.

SyntaxTheme — Light Preset

    

      
      

        
          GitHub Light preset — tsx
        
      
      
    
    
const status = response.ok ? 'success' : 'error';
console.log({status});

    
  

Use a light syntax preset for code examples that need to sit on light documentation surfaces.