Usage

CodeBlock shows a read-only snippet. Import it from @astryx-vue/core/Code, next to inline Code. The code string is what the reader sees and what the copy button writes.

language selects the tokenizer. title adds a filename in the header. hasLineNumbers draws a gutter. highlightLines takes one-indexed line numbers and tints those lines. maxHeight bounds the body before it scrolls. hasCopyButton stays available in the header, or floats at the top end when there is no header.

isDiff paints the snippet as a unified diff. A leading + marks an added line, - a removed line, and @@ a hunk header. A --- line, a +++ line, and an @@ line in that order are a file header. The glyph sits in its own column, and the rest of the line keeps the language syntax colors. The copy button still writes the original string, glyphs included. The header and the viewport name read diff, or typescript diff when a language is set. A highlighted line replaces the diff tint. The colors are --astryx-code-syntax-added, --astryx-code-syntax-removed, --astryx-code-syntax-diff-header, plus the added-marker and removed-marker slots, the same --astryx-code-syntax-* scheme as the other syntax colors.

SyntaxTheme sets the syntax custom properties for the blocks inside it. githubDark is the dark preset shipped with the package. Wrap a bash block in it when the snippet should read as a terminal on a light page. defineSyntaxTheme builds another preset from the same token names.

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

const commands = `$ astryx init --features agents`
</script>

<template>
  <SyntaxTheme :theme="githubDark">
    <CodeBlock :code="commands" language="bash" has-copy-button width="100%" />
  </SyntaxTheme>
</template>

Anatomy

Element	Description
Header Bar	Shows the title, visible language label, and copy button when a header is present. A title or visible language label creates the header; the copy button alone floats at the top-end of a headerless block.
Header Title	Groups the optional title, visible language label, and collapsible chevron inside the header bar.
Line Numbers	Numbered gutter along the left edge. Enable with hasLineNumbers.
Code Body	The syntax-highlighted code content.
Highlighted Lines	Background accent on specific lines to draw attention.
Copy Button	Copies the code string to the clipboard. Shown by default.

Best practices

Guidance	Practices
Do	Set language to the snippet, and add title when the code is a file.
Do	Leave line numbers off for a one-line command, and turn them on when a reader must point at a line.
Do	Use highlightLines for the lines a tutorial just changed. When the text is already a diff, use isDiff instead of painting those lines by hand.
Do	Reach for githubDark through SyntaxTheme when a command should look like a terminal.
Don't	Paint a dark box with one-off CSS. A preset keeps the token colors and the border together.
Don't	Put a paragraph of prose in a code block.

Examples

Code — Snippet

    

      
      

        
          bash
        
      
      
    
    
npm install @astryxdesign/core

    
  

    

      
      

        
          bash
        
      
      
    
    
yarn add @astryxdesign/theme-neutral

    
  

Short terminal commands with a copy button and no line numbers. Use for install instructions or one-liner commands that readers will paste directly.

Code — Highlighted

    

      
      

        
          useUser.ts — typescript
        
      
      
    
    
interface User {
  id: string;
  name: string;
}
​
export function useUser(id: string) {
  const [user, setUser] = useState<User>();
  useEffect(() => {
    fetchUser(id).then(setUser);
  }, [id]);
  return user;
}

    
  

TypeScript code with specific lines highlighted to draw attention to a key section. Use highlightLines to call out new or important code in tutorials and changelogs.

Code — Diff

    

      
      

        
          useUser.ts — tsx diff
        
      
      
    
    
 --- a/useUser.ts
 +++ b/useUser.ts
 @@ -1,6 +1,6 @@
 export function useUser(id: string) {
-  const [user, setUser] = useState<User>()
+  const [user, setUser] = useState<User | null>(null)
   useEffect(() => {
-    fetchUser(id).then(setUser)
+    void fetchUser(id).then(setUser)
   }, [id])
   return user
 }

    
  

The same TypeScript snippet read as a diff. Added and removed rows are tinted, and the code after the glyph stays highlighted as tsx. File headers and @@ lines stay quiet.

Code — Config

    

      
      

        
          package.json — json
        
      
      
    
    
{
  "name": "@astryxdesign/core",
  "version": "0.0.5",
  "dependencies": {
    "@astryxdesign/theme-neutral": "^0.1.0",
    "react": "^19.0.0"
  },
  "scripts": {
    "build": "tsup",
    "test": "vitest"
  }
}

    
  

A JSON configuration file with a title bar and line numbers. The title prop adds a filename label in the header so readers know which file the code belongs to.

Code — Scrollable

    

      
      

        
          many-lines.ts — typescript
        
      
      
    
    
const line1 = 1;
const line2 = 2;
const line3 = 3;
const line4 = 4;
const line5 = 5;
const line6 = 6;
const line7 = 7;
const line8 = 8;
const line9 = 9;
const line10 = 10;
const line11 = 11;
const line12 = 12;
const line13 = 13;
const line14 = 14;
const line15 = 15;
const line16 = 16;
const line17 = 17;
const line18 = 18;
const line19 = 19;
const line20 = 20;
const line21 = 21;
const line22 = 22;
const line23 = 23;
const line24 = 24;
const line25 = 25;
const line26 = 26;
const line27 = 27;
const line28 = 28;
const line29 = 29;
const line30 = 30;
const line31 = 31;
const line32 = 32;
const line33 = 33;
const line34 = 34;
const line35 = 35;
const line36 = 36;
const line37 = 37;
const line38 = 38;
const line39 = 39;
const line40 = 40;
const line41 = 41;
const line42 = 42;
const line43 = 43;
const line44 = 44;
const line45 = 45;
const line46 = 46;
const line47 = 47;
const line48 = 48;
const line49 = 49;
const line50 = 50;

    
  

A long code block with a max height that enables vertical scrolling. Use maxHeight to keep the block from dominating the page when displaying large files.

Code — Terminal

    

      
      

        
          bash
        
      
      
    
    
$ astryx init --features agents
✓ AI agent docs installed → AGENTS.md
$ pnpm astryx component CodeBlock --dense

    
  

A dark terminal-style command block: a bash CodeBlock wrapped in SyntaxTheme with the GitHub Dark preset, copy button on, and no line numbers. Use for shell sessions or CLI output that should read as a terminal even on light pages.