embeddable-monaco
v1.0.4
Published
Embeddable online playground using Monaco editor. Works great with Vue and Slidev!
Downloads
18
Maintainers
Readme
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
andcode
. This will overridelanguage
andcode
props. - Go to
https://embeddable.vercel.app/?lang=<YOUR_LANGUAGE>
and type in the code, then presscmd/ctrl + S
. The address bar will give you thissourceURL
. - 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"
- string:
- scrollbar
- string:
"auto"
|"visible"
|"hidden"
"auto"
shows the scrollbar when mouse hover;"visible"
makes the scrollbar always visible;"hidden"
always hides it.- default:
"auto"
- string:
License
MIT, see the LICENSE file for more details.