https://github.com/surister/magic-code-editor

Vue3 simple code blocks and code editor.
https://github.com/surister/magic-code-editor

code code-blocks code-editor code-highlight code-highlighting-and-blocks codeblocks component editor vue vue3 vuejs

Last synced: 4 months ago
JSON representation

Vue3 simple code blocks and code editor.

• Host: GitHub
• URL: https://github.com/surister/magic-code-editor
• Owner: surister
• License: mit
• Created: 2024-03-30T00:04:59.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T12:08:25.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T23:59:37.204Z (almost 2 years ago)
• Topics: code, code-blocks, code-editor, code-highlight, code-highlighting-and-blocks, codeblocks, component, editor, vue, vue3, vuejs
• Language: Vue
• Homepage:
• Size: 259 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# magic-code-editor

![npm bundle size](https://img.shields.io/bundlephobia/min/magic-code-editor)

![NPM License](https://img.shields.io/npm/l/magic-code-editor)

![NPM Version](https://img.shields.io/npm/v/magic-code-editor)

![NPM Type Definitions](https://img.shields.io/npm/types/magic-code-editor)

![NPM dev or peer Dependency Version](https://img.shields.io/npm/dependency-version/magic-code-editor/peer/vue)

Simple, beautiful and highly customizable code blocks for Vue 3.

![img.png](images/img.png)

Github: https://github.com/surister/magic-code-editor

Npm: https://www.npmjs.com/package/magic-code-editor

Preview: https://mce.surister.dev

Docs: https://mce.surister.dev/docs

Props: https://mce.surister.dev/props

### Features

- Lightweight: ~ 8.11 kB │ gzip: 2.67 kB

- No dependencies

- Written in Modern Vue 3

- Highly customizable

- Built-in editor

- Syntax highlighting

- Line numbering

- Line highlighting

- Typescript support

- Open source

### More examples:

![img.png](images/img_3.png)

![img_1.png](images/img_1.png)

![img_2.png](images/img_2.png)

### Get started:

`npm install magic-code-editor`