1.5 KiB
Read-Only
import LiveCodes from '../../src/components/LiveCodes.tsx';
In case you need to embed a playground in your web page to show case some code and want users to read through the code and not allow edits, you may use the readonly setting.
Code editing, formatting, and console input are not available. However, any language supported by LiveCodes can be used, with syntax highlighting. Code can be prefilled, and is compiled and shown in the result page as usual.
By default, a light-weight, minimal code editor#code-editor) is used. This can be changed by explicitly setting the configuration object property editor#editor) (e.g. to show hover intellisense).
Demo:
<LiveCodes template="javascript" config={{ readonly: true }}>
Using SDK
set the configuration object property readonly#readonly) to true.
import { createPlayground } from 'livecodes';
createPlayground('#container', { template: 'javascript', config: { readonly: true } });
Using query params
add the query parameter readonly (no need to set a value).
https://livecodes.io?template=javascript&readonly