embeddable-monaco

Embeddable online playground using Monaco editor. Also made to be a Vue component, perfect to be embedded in Slidev slides.

Install

$ npm install --save embeddable-monaco

or

$ yarn install embeddable-monaco

Use in Slidev

Edit file setup/main.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:

<Embeddable
  height="300"
  sourceURL="https://embeddable.vercel.app/?lang=typescript&code=aW50ZXJmYWNlIFVzZXIgewogIGlkOiBudW1iZXI7CiAgbmFtZTogc3RyaW5nOwogIGFnZTogbnVtYmVyOwp9CgpmdW5jdGlvbiBnZXRWYWx1ZShvYmosIGtleSkgewogIHJldHVybiBvYmooa2V5KTsKfQoKbGV0IHVzZXIxOiBVc2VyID0ge2lkOiAxLCBuYW1lOiAnYWRtaW4nLCBhZ2U6IDE4fTsKbGV0IHZhbHVlID0gZ2V0VmFsdWUodXNlcjEsICduYW1lJyk7CmNvbnNvbGUubG9nKHZhbHVlKTsK"
  lineNumbers="off"
/>

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=<YOUR_LANGUAGE> 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 file for more details.