astryx-vue

语法主题

@astryxdesign/core v0.7.1 · SyntaxTheme

One Dark Pro preset 
    

      
      

        
          tsx
        
      

      
    

    
async function save() {
  await api.update(values);
  toast.show('Saved');
}

使用方法 ​

SyntaxTheme 是代码颜色的提供者。它给里面的每个 CodeBlock 写上 --astryx-code-syntax-* 和 --astryx-code-block-background。useSyntaxTheme() 读取最近的语法主题，也包括 defineTheme({ syntax }) 带上的那份。

单个代码块可以直接传 syntaxTheme。一整块区域共用一套预设时，用 SyntaxTheme 包起来。

预设从 @astryx-vue/core/Code 导出：oneDarkPro、dracula、monokai、nord、tokyoNight、catppuccinMocha、githubDark、githubLight、solarizedLight、oneLight、catppuccinLatte、tokyoNightLight。defineSyntaxTheme() 用来做自定义主题。14 个颜色 token 都要给。差异行另外有五个可选槽，名字仍是 --astryx-code-syntax-*：added、removed、diff-header、added-marker、removed-marker。不写时，标记跟着标点色，差异头不另铺底色。[浅色, 深色] 会存成 light-dark()。

vue
<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>

最佳实践 ​

指引实践
推荐整个应用共用一套代码配色时，写在 defineTheme() 的 syntax 上。
推荐只有某一段要换预设时，用 SyntaxTheme。
推荐只有一个 CodeBlock 时，直接传 syntaxTheme，不必再包一层。
避免用一次性 CSS 给代码块上色。预设会把 token 颜色和背景放在一起。

示例 ​

SyntaxTheme — Dark Preset

    

      
      

        
          Dracula preset — tsx
        
      

      
    

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

用 SyntaxTheme 包住代码块，套上 Dracula 这类深色预设。

SyntaxTheme — Light Preset

    

      
      

        
          GitHub Light preset — tsx
        
      

      
    

    
const status = response.ok ? 'success' : 'error';
console.log({status});

浅色文档上的代码示例，用 GitHub Light 这类浅色预设。