https://github.com/alexzhang1030/vue-shiki-input

A Shiki input component for Vue.
https://github.com/alexzhang1030/vue-shiki-input

shiki syntax-highlighting vue

Last synced: about 2 months ago
JSON representation

A Shiki input component for Vue.

• Host: GitHub
• URL: https://github.com/alexzhang1030/vue-shiki-input
• Owner: alexzhang1030
• License: mit
• Created: 2024-04-12T09:32:28.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-11-04T04:24:58.000Z (about 2 months ago)
• Last Synced: 2024-11-08T01:44:35.122Z (about 2 months ago)
• Topics: shiki, syntax-highlighting, vue
• Language: TypeScript
• Homepage: https://vue-shiki-input.vercel.app
• Size: 355 KB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-shiki-input







A Shiki input component for Vue.

Inspired by the awesome🤩 shiki playground from [shiki-docs home](https://shiki.style/).

Check out the [docs](https://vue-shiki-input.vercel.app/)!

> 🔨 Working on docs...

## Installation

```bash

pnpm i vue-shiki-input

```

## Usage

```vue

import { ref } from 'vue'

import { VueShikiInput } from 'vue-shiki-input'

import 'vue-shiki-input/style.css'

const text = ref('const a = 1;')

  

```

### Props

```ts

export interface VueShikiInputProps {

  /**

   * The code to be edited

   */

  modelValue: string

  /**

   * Disabled editor, will only render code

   */

  disabled?: boolean

  /**

   * Loading state, you should use v-model:loading to bind this prop

   */

  loading?: boolean

  /**

   * Automatically set background color based on the theme

   * @default false

   */

  autoBackground?: boolean

  /**

   * Preload languages, you can ignore this if you don't need to preload languages

   */

  langs?: (LanguageInput | string)[]

  /**

   * Preload themes, you can ignore this if you don't need to preload languages

   */

  themes?: (ThemeInput | string)[]

  /**

   * Same as codeToHTML props in shiki

   */

  codeToHtmlOptions?: CodeToHastOptions

  /**

   * Show line numbers

   */

  lineNumbers?: boolean

  /**

   * Line numbers color

   */

  lineNumbersColor?: string

  /**

   * Custom styles

   */

  styles?: {

    textareaClass?: string

    codeClass?: string

  }

  /**

   * Skip loading built-in themes and languages

   * This will be useful when you sure you don't need built-in themes and languages

   */

  skipLoadShikiBundled?: boolean

  /**

   * Editor offset

   * - x -> padding left+right

   * - y -> padding top+bottom

   */

  offset?: {

    x: number

    y: number

  }

  /**

   * Required when use customTheme, and cannot detect dark theme automatically (by type in theme)

   */

  darkTheme?: boolean

}

```

## License

MIT