Embeds
Build the embed
An embed is not a fixed widget. You build it in a drag-and-drop editor: the blocks you want, in the order you want, each set up on its own.
That is how the same feature suits a one-line example and a full exercise.
How the builder works
Your page is shown in the middle. The blocks you can add are down the left.
- Drag a block from the left onto the page.
- Select it to see its toolbar.
- Set it up from its settings.
Each block on the page has a small toolbar with four controls:
- Move up. Select the block that contains this one, which is how you reach a row or section you cannot click directly.
- Drag. Move the block somewhere else on the page.
- Delete. Remove it.
- Settings. Open the block's own options.
The blocks you can add
- Code Editor. Where the code is. Leave it out and readers get a runnable example they cannot change.
- Execute Button. The control your reader presses to run it.
- Output. Where results appear.
- Language List. Lets a reader switch language.
- Version List. Lets a reader switch version.
- STDIN Input. A box for the text the program reads.
- Input Arguments. A box for command-line arguments.
- Interactive Toggle. Lets a reader answer the program while it runs.
- External Library. Lets a reader add libraries.
- Input Files. Lets a reader upload files for the program to read.
- Output Files. Lets a reader download files the program wrote.
- Execution Matrices. Shows what the run used, such as time and memory.
- Editor Font Size. A font size control for the reader.
- Post to JDoodle. Sends the code to JDoodle to continue there.
For layout there are Header, Section, Row, Col and Tabs, so you can arrange the blocks rather than take them in a fixed order.
Setting up a block
Open a block's settings and you get options that belong to that block. The code editor is the fullest example:
| Setting | What it does |
|---|---|
| Starting code and theme | The code the editor opens with, and its colours |
| Editor font size | Size of the code |
| Read-only | Whether a reader can change the code |
| Line number | Show or hide line numbers |
| Auto completion | Suggestions as they type |
| Auto grow | Whether the editor grows with the code |
| Width and height | Its size on your page, in pixels or automatic |
Other blocks have their own. Standard input has what it starts with, input arguments has default arguments, and the interactive toggle decides whether a reader is asked for input while the program runs.
Deciding how much freedom to give
Run only
Set the editor to read-only, or leave it out. Readers press play and nothing they do changes what the next reader sees.
Good for documentation, where the example should be exactly what you wrote.
A scratchpad
Leave the editor editable. Readers rewrite whatever they like and run it.
Good for teaching and exercises, where trying it is the point.
Nothing a reader does is saved. An embed is not an account, so somebody who breaks the code fixes it by reloading the page.
What next
Your page can also talk to the embed: set the code, run it, and read the result back.