Runtime for @runno
npm install @runno/runtimešØāš» Use Runno š Runno.dev
š Documentation š Runno.dev
The @runno/runtime implements all the core features to make code run. It also
exports Web Components that can be used to create runno instances in your code
without using iframes.
Start by adding @runno/runtime to your package:
``sh`
npm install @runno/runtime
Import @runno/runtime in whatever place you'll be using the runno elements.main.ts
The simplest is in your entrypoint file (e.g. or index.ts).
`js`
import "@runno/runtime";
Once you've imported them you can use runno elements on the page.
`html`
For the code to run though, you'll need to set some HTTP headers:
`
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
These create a cross-origin isolated context which allows the use of SharedArrayBuffer used to implement STDIN.
Runno supports a headless API.
`js`
import { headlessRunCode, headlessRunFS } from "@runno/runtime";
You can use this headless API to run code in a particular language without
having to use the DOM. For example:
`js`
const result = await headlessRunCode("python", "print('Hello World!')");
If you want to provide more than a single code snippet, you can use
headlessRunFS to provide each of the files, and the entrypoint file.
The runno-run element can be styled with css
variables to change the height of the individualrunno-editor and runno-terminal elements
inside.
`css
runno-run {
/ Sets a specific height for the editor /
--runno-editor-height: auto;
/ Sets a maximum height for the editor /
--runno-editor-max-height: 60%;
/ Sets a specific height for the terminal /
--runno-terminal-height: auto;
/ Sets a minimum height for the terminal /
--runno-terminal-min-height: 4rem;
}
``
By default the editor will resize to fit the content you put
inside it, and the terminal will be its minimum height. If you set
the element to be a fixed height, they will share the space so
that the editor gets 60% and the controls and terminal get the
rest.