Internationalization & Accessibility

Incremark provides built-in internationalization (i18n) and accessibility (a11y) support, ensuring components work correctly across different languages and are screen reader friendly.

Using ConfigProvider

ConfigProvider is used to provide global i18n configuration:

Vue

<script setup>
import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/vue'
</script>

<template>
  <ConfigProvider :locale="zhCN">
    <IncremarkContent :content="content" />
  </ConfigProvider>
</template>

React

import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/react'

<ConfigProvider locale={zhCN}>
  <IncremarkContent content={content} />
</ConfigProvider>

Svelte

<script lang="ts">
  import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/svelte'
</script>

<ConfigProvider locale={zhCN}>
  <IncremarkContent {content} />
</ConfigProvider>

Solid

import { IncremarkContent, ConfigProvider, zhCN } from '@incremark/solid'

<ConfigProvider locale={zhCN}>
  <IncremarkContent content={content()} />
</ConfigProvider>

Built-in Locales

Incremark includes the following built-in locales:

Locale	Language
en	English (default)
zhCN	Simplified Chinese

import { en, zhCN } from '@incremark/vue'
// or
import { en, zhCN } from '@incremark/react'
// or
import { en, zhCN } from '@incremark/svelte'
// or
import { en, zhCN } from '@incremark/solid'

Custom Locales

You can create custom locales to support other languages:

import type { IncremarkLocale } from '@incremark/vue'

const jaJP: IncremarkLocale = {
  code: {
    copy: 'コードをコピー',
    copied: 'コピーしました'
  },
  mermaid: {
    copy: 'コードをコピー',
    copied: 'コピーしました',
    viewSource: 'ソースコードを表示',
    preview: 'プレビュー'
  }
}

Accessibility Support

Incremark's UI components follow WAI-ARIA standards and provide comprehensive accessibility support:

Code Blocks

• Copy buttons use aria-label for clear action descriptions
• Button state changes (e.g., after copying) update the aria-label
• Language labels are clearly readable

<!-- Before copying -->
<button aria-label="Copy code">...</button>

<!-- After copying -->
<button aria-label="Code copied">...</button>

Mermaid Diagrams

• Toggle buttons (source code/preview) use aria-label
• Chart containers provide appropriate semantic labels

Combined Usage

ConfigProvider can be combined with ThemeProvider:

Vue

<script setup>
import { 
  IncremarkContent, 
  ConfigProvider, 
  ThemeProvider, 
  zhCN 
} from '@incremark/vue'
</script>

<template>
  <ConfigProvider :locale="zhCN">
    <ThemeProvider theme="dark">
      <IncremarkContent :content="content" />
    </ThemeProvider>
  </ConfigProvider>
</template>

React

import { 
  IncremarkContent, 
  ConfigProvider, 
  ThemeProvider, 
  zhCN 
} from '@incremark/react'

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent content={content} />
  </ThemeProvider>
</ConfigProvider>

Svelte

<script lang="ts">
  import {
    IncremarkContent,
    ConfigProvider,
    ThemeProvider,
    zhCN
  } from '@incremark/svelte'
</script>

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent {content} />
  </ThemeProvider>
</ConfigProvider>

Solid

import {
  IncremarkContent,
  ConfigProvider,
  ThemeProvider,
  zhCN
} from '@incremark/solid'

<ConfigProvider locale={zhCN}>
  <ThemeProvider theme="dark">
    <IncremarkContent content={content()} />
  </ThemeProvider>
</ConfigProvider>

Dynamic Locale Switching

Locales can be switched dynamically at runtime:

Vue

<script setup>
import { ref, computed } from 'vue'
import { ConfigProvider, en, zhCN } from '@incremark/vue'

const lang = ref('en')
const locale = computed(() => lang.value === 'zh' ? zhCN : en)

function toggleLocale() {
  lang.value = lang.value === 'en' ? 'zh' : 'en'
}
</script>

<template>
  <button @click="toggleLocale">Toggle Language</button>
  <ConfigProvider :locale="locale">
    <IncremarkContent :content="content" />
  </ConfigProvider>
</template>

React

import { useState, useMemo } from 'react'
import { ConfigProvider, en, zhCN } from '@incremark/react'

function App() {
  const [lang, setLang] = useState('en')
  const locale = useMemo(() => lang === 'zh' ? zhCN : en, [lang])
  
  return (
    <>
      <button onClick={() => setLang(l => l === 'en' ? 'zh' : 'en')}>
        Toggle Language
      </button>
      <ConfigProvider locale={locale}>
        <IncremarkContent content={content} />
      </ConfigProvider>
    </>
  )
}

Svelte

<script lang="ts">
  import { ConfigProvider, en, zhCN } from '@incremark/svelte'

  let lang = $state('en')
  const locale = $derived(lang === 'zh' ? zhCN : en)

  function toggleLocale() {
    lang = lang === 'en' ? 'zh' : 'en'
  }
</script>

<button onclick={toggleLocale}>Toggle Language</button>
<ConfigProvider locale={locale}>
  <IncremarkContent {content} />
</ConfigProvider>

Solid

import { createSignal, Index } from 'solid-js'
import { ConfigProvider, en, zhCN } from '@incremark/solid'

function App() {
  const [lang, setLang] = createSignal('en')
  const locale = () => lang() === 'zh' ? zhCN : en
  const [key, setKey] = createSignal(0)

  function toggleLocale() {
    setLang(l => l === 'en' ? 'zh' : 'en')
    setKey(k => k + 1)
  }

  return (
    <>
      <button onClick={toggleLocale}>Toggle Language</button>
      <Index each={[key()]}>
        {() => (
          <ConfigProvider locale={locale()}>
            <IncremarkContent content={content()} />
          </ConfigProvider>
        )}
      </Index>
    </>
  )
}

Locale Type Definition

interface IncremarkLocale {
  /** Code block translations */
  code: {
    /** Copy code button text */
    copy: string
    /** Text shown after copying */
    copied: string
  }
  /** Mermaid diagram translations */
  mermaid: {
    /** Copy code button text */
    copy: string
    /** Text shown after copying */
    copied: string
    /** View source code button text */
    viewSource: string
    /** Preview diagram button text */
    preview: string
  }
}