5 ways to share code on Medium

So, you’re a developer and you’ve decided to write on Medium. Here are the most efficient ways to share code in your stories.

Image by Canva Creative Studio

Inline code

Useful to reference a single line of code, a variable name, or anything short in the middle of a sentence.

Example

On this line, we store the return value of the callme function inside a variable called result: const result = callme();.

Usage

To insert inline code, type a single backtick ` followed by the actual code you want to insert. Eg: to insert var, type `var.

You can also select some text and type a backtick ` to convert it to code. But beware! This doesn’t work with all keyboard layouts.

Code block

Useful to insert a block of code.

Code blocks are accessible by design since they are plain text and they live inside your story (no embeds, no caption required). They also come with syntax highlighting.

Example

function sayHello() {
  console.log('hello world');
}

Usage

On your story, click the ➕ icon, then click the “{ }” button to insert a new code block.

You can also type three backticks ```, then add your code to the block.

There is also a keyboard shortcut available: select a block of text, then press ⌘ + Alt + 6 (or Ctrl + Alt + 6) to convert it to code.

Using the story editor

Editor keyboard shortcuts

GitHub Gist

Useful to insert a code snippet.

Gists come with syntax highlighting, which makes the code easy to read. They also display as text, so readers can copy it to the clipboard.

Example

Usage

To create a gist, open GitHub Gist and click the ‘plus’ (+) button in the top-right corner of the page.

Next, choose a file name for your gist, with an extension that matches the language you’re using (e.g.: ‘.js’ for JavaScript). You can then type (or paste) code in the editor. Unfortunately, syntax is not highlighted as you type.

When you’re ready, click the Create secret gist button (or Create public gist) to save it. It doesn’t matter if it’s secret or public, you’ll be able to embed both on Medium.

With the gist is opened, click the Embed button, then choose the Share option. You can now copy the URL displayed next to the Embed button. It should look something like this: https://gist.github.com/gfox1984/300e5e6387fb6519de86110567549270.

Paste it to Medium then press Enter. The gist will be automatically embedded.

Creating gists - GitHub Docs

Code Sandbox

Useful to insert interactive code (from medium to full-app size).

CodeSandbox allows you to create an actual app and let the user run it and modify it inside the browser. This is great to showcase a piece of code, or to let the user experiment with it. CodeSandbox provides an experience that is close to an IDE.

Example

Usage

To create an app with CodeSandbox, just visit the site and click the Create Sandbox button located in the top-right corner. Although you don’t have to create an account, it is wiser to do so in order to keep track of your sandboxes (you can use a GitHub account).

Then, create a sandbox from an existing template. CodeSandbox has plenty to choose from (React, Vue, Node, etc.).

You can then edit the code, add dependencies and run it within an integrated browser. Your imagination is the limit.

Once you’re happy with the sandbox, click the Embed button on the right-hand side. You can see a preview of what will be embedded and tweak it.

Finally, copy the URL from the Embed url field, then paste it to your Medium article, and press Enter. The sandbox will be automatically embedded.

Embed URLs look like this:

https://codesandbox.io/embed/optimistic-herschel-0d5q56?codemirror=1&expanddevtools=1&fontsize=14&hidenavigation=1&theme=dark

They can be customized by hand by changing the parameters, as explained in the docs below:

Embedding - Sandbox

Alternatives

Codepen.io, JSfiddle, JS Bin are other popular alternatives that you can use to embed sandboxes on Medium.

Ray.so

Useful to create cover images for small blocks of code.

Ray.so knows how to make your code shine! It can turn any dull block of code into a beautiful picture, complete with syntax highlighting and a modern background. This works great as the cover of an article, or for sharing code on social networks, where the amount of text is limited and not really adapted for code.

However, since you’re sharing an image, make sure to include a link to the actual code, or to embed it inside your article using one of the techniques presented earlier. You can also specify an Alt text for the image.

Example

useEvent code — ray.so

Usage

Just open Ray.so, then type or paste code. Also make sure to select the right language for syntax highlighting (in case it didn’t detect it). Then feel free to change the background, padding, title or theme according to your taste.

When you’re ready, hover the Export button, click Copy image, then paste it to Medium. The image will be inserted as a block.

It’s also a good idea to copy the URL of the source on Ray.so (hover Export, then Copy URL) and add it as link to the caption of the image, so that your readers can access the text version. This will also allow you to get back to it later on, shall you need to.

Alternatives

Carbon and Codeimg are two similar alternatives. You can of course also copy / paste a screenshot directly from your favourite IDE.

About me: as much as time allows, I like to take it to Medium to share code, recipes, techniques and news about programming. As I’m learning the tips and tricks to write on Medium, I promise to share the best ones with you! So, follow me for more like these 🙏