Watching
Indicates that watching is enabled, which watches for playground changes, then updates and saves the corresponding playground configuration file (JSON).
Not watching
Indicates that watching is disabled.
Create note
Create a markdown note using the markdown template configured in the settings.
Save as new playground
The new playground will be opened in a new playground view.
Save as HTML
Save playground results to HTML. A prompt will ask where to save the HTML file on your device.
Copy HTML to clipboard
Copy playground results HTML to the clipboard.
Copy share URL to clipboard
The generated URL encodes the playground configuration in a base-64-encoded compressed query string. This step is generated locally without sending the code to any server. However, depending on the size of the playground, the URL can be very long.
If Short share URL is enabled in settings, a short share URL will be generated.
This requires sending the playground configuration (including source code) to a server that saves the code and provides a short Id which can be used to retrieve the playground.
See Livecodes documentation page on sharing for further up-to-date details.
Create Github gist
Create a gist which optionally consists of a Livecodes.io playground link and 3 files.
- The HTML results (
.html) - The playground configuration file (
.json) - A markdown file (
.md) using the markdown template configured in the settings.
3 URLs are copied to your clipboard and printed to the developer console.
- link to the gist
- link to the Livecodes’ PUBLIC url which can be used to share your playground.
- link to open the playground in Obsidian
Set theme mode
Sets the playground theme to light/dark mode.
External resources
URLs to external CSS stylesheets and JS scripts can be added to the playground. URLs to stylesheets/scripts should be added each in a separate line. Stylesheets and scripts are loaded in the result page before editor codes. Thus, CSS properties defined in external stylesheets can be overriden in the style editor. Global javascript variables defined in external scripts are available to code in the script editor.
Choice of CSS presets, currently Normalize.css and Reset CSS.
Playground settings
- Title: used in result title tag and meta/title tag.
- Description: used in result meta/description tag.
- Tags: used when creating a playground note.
<head>content added to the result<head>element.
Default:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5. htmlAttrs: attributes added to the result pane <html> element. It can be an object or a string.
Example:
{ lang: 'en', class: 'dark' } or lang="en" class="dark"
becomes
<html lang="en" class="dark">
Default: lang="en" class=""
Help
In-app help modal with the same above information.