https://github.com/discretetom/vue-codejar

CodeJar for Vue.
https://github.com/discretetom/vue-codejar

Last synced: about 2 months ago
JSON representation

CodeJar for Vue.

• Host: GitHub
• URL: https://github.com/discretetom/vue-codejar
• Owner: DiscreteTom
• License: mit
• Created: 2022-01-08T11:27:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-10T10:27:43.000Z (over 3 years ago)
• Last Synced: 2025-02-05T06:38:57.808Z (4 months ago)
• Language: Vue
• Homepage:
• Size: 8.79 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-codejar🍯

[![npm](https://img.shields.io/npm/v/vue-codejar?color=brightgreen)](https://www.npmjs.com/package/vue-codejar)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/vue-codejar?label=size)](https://bundlephobia.com/result?p=vue-codejar)

[CodeJar🍯](https://github.com/antonmedv/codejar) for Vue.

## Installation

```bash

npm install vue-codejar

```

## Usage

```vue

  

import CodeJar from "vue-codejar";

export default {

  components: { CodeJar },

  data() {

    return {

      code: "",

    };

  },

  methods: {

    onInput(code) {

      console.log(code);

    },

  },

};

```

## Props & Events

- Props

  - `value`: the code content.

  - `readonly`

  - `code-style`

  - `lang`: will add a class `language-${lang}` to the code editor, which is useful when you need to highlight your code.

  - `highlighter`: CodeJar highlighter function, see https://github.com/antonmedv/codejar .

  - `line-numbers`: show line number.

- Events

  - `input`: emit the code content.

> `v-model` is supported, but is not recommended since it will resulting in poor performance.

## [CHANGELOG](https://github.com/DiscreteTom/vue-codejar/blob/main/CHANGELOG.md)

## License

[MIT](https://github.com/DiscreteTom/vue-codejar/blob/main/LICENSE)