https://github.com/dizys/embeddable-monaco

Embeddable online playground using Monaco editor. Works great with Vue and Slidev!
https://github.com/dizys/embeddable-monaco

monaco-editor slides slidev vue

Last synced: about 2 months ago
JSON representation

Embeddable online playground using Monaco editor. Works great with Vue and Slidev!

• Host: GitHub
• URL: https://github.com/dizys/embeddable-monaco
• Owner: dizys
• License: mit
• Created: 2021-05-21T06:08:49.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-31T18:29:49.000Z (over 3 years ago)
• Last Synced: 2024-03-26T09:22:53.576Z (9 months ago)
• Topics: monaco-editor, slides, slidev, vue
• Language: JavaScript
• Homepage: https://embeddable.vercel.app
• Size: 562 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# embeddable-monaco

[![NPM](https://img.shields.io/npm/v/embeddable-monaco)](https://www.npmjs.com/package/embeddable-monaco) [![Workflow](https://img.shields.io/github/workflow/status/dizys/embeddable-monaco/Build)](https://github.com/dizys/embeddable-monaco/actions/workflows/build.yml) [![Vercel](https://therealsujitk-vercel-badge.vercel.app/?app=embeddable)](https://embeddable.vercel.app)

Embeddable online playground using Monaco editor. Also made to be a Vue component, perfect to be embedded in [Slidev](https://github.com/slidevjs/slidev) slides.

![Used in Slidev](./docs/slidev-component.png)

## Install

```bash

$ npm install --save embeddable-monaco

```

or

```bash

$ yarn install embeddable-monaco

```

## Use in Slidev

Edit file `setup/main.ts`:

```ts

import {defineAppSetup} from '@slidev/types';

import {Embeddable} from 'embeddable-monaco';

import 'embeddable-monaco/dist/embeddable.css';

export default defineAppSetup(({app}) => {

  Embeddable.install(app);

});

```

Use component `Embeddable` in your slides:

```md

```

## Component Props

**Embeddable**

- width

  - string

  - default: `"100%"`

- height

  - string

  - default: `"100%"`

- language

  - string

  - Language name that Monaco supports.

  - default: `"typescript"`

- code

  - string

  - Default code to be shown.

  - default: `"// Start here..."`

- sourceURL

  - string

  - Use a source URL instead of `language` and `code`. This will override `language` and `code` props.

  - Go to `https://embeddable.vercel.app/?lang=` and type in the code, then press `cmd/ctrl + S`. The address bar will give you this `sourceURL`.

  - e.g. `https://embeddable.vercel.app/?lang=typescript&code=Ly8gU3RhcnQgaGVyZS4uLgo%3D`

- lineNumbers: `"on"` | `"off"`

  - Whether to show line numbers on the left side.

  - default: `"on"`

- wordWrap

  - string: `"on"` | `"off"`

  - Whether to wrap a line into new lines when it reaches the full width of the editor.

  - default: `"on"`

- scrollbar

  - string: `"auto"` | `"visible"` | `"hidden"`

  - `"auto"` shows the scrollbar when mouse hover; `"visible"` makes the scrollbar always visible; `"hidden"` always hides it.

  - default: `"auto"`

## License

MIT, see the [LICENSE](./LICENSE) file for more details.