Put a runnable program in a page

An embed is a small editor you own, configured once and pasted into whatever you are writing. Making one takes about a minute; the decisions afterwards are what take thought.

Make one

1. Create an embed and give it a name and description. Neither is shown to your readers. They are how you find it again when you have twenty.
2. Pick the project it runs. Every embed is connected to one, so this is the step that gives it its code. You can start one from a project you already have, or make the embed first and link a project to it. See create an embed.
3. Choose the language, and the version it should run.
4. Set what the embed starts with: the code already in the editor when your page loads.
5. Choose Get embedding code, and paste what it gives you where the editor should appear.

That is the whole loop. The embed stays yours, so changing what it starts with later changes it everywhere you have pasted it.

Choose the starting code carefully

An empty editor in the middle of an article does not help anyone. Start it with the code your paragraph is about, so it is already there and already runs.

For a tutorial that builds something up, that usually means a separate embed per step, each starting where the previous one finished, rather than one embed the reader has to keep editing back into shape.

Starting code is part of the page you publish, so treat it as public. An embed in an article is the wrong place for anything you would not print in the article itself.

If you would rather keep your own code block

An embed replaces your code block with a JDoodle editor. If your site styles code the way you want it, you can keep that and add a button that opens the code in JDoodle instead.

That is a plain HTML form rather than an embed, and it needs no scripting. See posting code to JDoodle. The difference is where your reader ends up: an embed keeps them on your page, a post button sends them to us.

What next

What the reader sees and what they are allowed to do with it is a separate set of decisions.

Create an embed and build the embed cover the screens themselves.