code-links.md

Code links

Many platforms like Dev.to, Medium or Substack do not support embedding JavaScript widgets. The same goes for newsletters. However, it's possible for a reader to edit and execute code on these platforms — using Codapi code links.

A code link is a regular HTML link that points to a special lightweight Codapi page containing editable and executable code. Here is how to add code links to your articles:

• Adding a code link
• Hiding parts of the code
• Summary

Adding a code link

Suppose you have a static Python code snippet in your article, and you want to make it interactive.

First, add a code snippet as usual:

def greet(name):
    print(f"Hello, {name}!")

greet("World")

Then copy the same code to the Codapi Embed page (choose the appropriate playground first) and click Share. You'll get a shareable link to your specific code snippet.

Finally, paste this link into your article. Name it Run code or something like that:

Run code

And that's it! When the reader follows the link, they'll be able to run and edit the code.

You can add as many code links per article as you like.

Hiding parts of the code

Suppose you are writing an article about ordering syntax in SQL. To keep the code snippets from getting too verbose, you'll probably want to show only the SELECT queries, not the CREATE TABLE and INSERTs that prepare the data.

To accomplish this, you can show display the SELECTs in your article, while executing all the code behind the scenes.

First, add a static code snippet to your article as usual:

select id, name
from employees
order by name desc
limit 5;

Then prepare the full code on the Codapi Embed page (choose Postgres, MySQL or SQLite, depending on the DBMS you are describing):

-- prepare database
create table employees (
    id integer primary key,
    name varchar(50),
    city varchar(50),
    department varchar(50),
    salary integer
);

insert into employees
(id, name, city, department, salary)
values
(11, 'Diane', 'London', 'hr', 70),
(12, 'Bob', 'London', 'hr', 78),
(21, 'Emma', 'London', 'it', 84),
(22, 'Grace', 'Berlin', 'it', 90),
(23, 'Henry', 'London', 'it', 104),
(24, 'Irene', 'Berlin', 'it', 104),
(25, 'Frank', 'Berlin', 'it', 120),
(31, 'Cindy', 'Berlin', 'sales', 96),
(32, 'Dave', 'London', 'sales', 96),
(33, 'Alice', 'Berlin', 'sales', 100);

-- try code snippet
select id, name
from employees
order by name desc
limit 5;

Click Share to get a shareable link.

Finally, paste the link into your article:

Run code

Now the article shows only the SELECT snippet, while the code link leads to the full example.

Summary

Let's review the steps for adding code links to your articles:

1. Add static code snippets as usual.
2. For each code snippet, create an embed and get a code link.
3. Paste the code links below the corresponding code snippets.

And that's it!