Code blocks with syntax highlighting

Add easy-to-read code to your stories

Medium is home to some of the best coding tutorials and resources on the web. Many of us at Medium are developers, so we know how useful these can be when learning new skills or working through a tough engineering problem.

It’s our job to help writers share their expertise in the best way possible. For technical writers, that’s partly about making it easy to embed great-looking code blocks in stories. Medium has supported code blocks for a while, but they’ve been rendered in plain text which isn’t ideal for readability.

Today, we’re introducing an update to the story editor that we know many of you have been asking for: code blocks with syntax highlighting.

Code blocks used to look like this:

// my code feels hard to read
function oldCodeBlock() {
  return "thank u, next";
}

Now, you can now create new code blocks that look like this:

// highlighted code is easier to read
function newCodeBlock() {
  return “jazzy!”;
}

These have better readability, making it easier for your readers to understand and learn from your code.

New code blocks will also adapt to the dark mode setting on your reader’s device, automatically using a light or dark theme, depending on their preference.

How do I create a new code block?

In the web-based story editor, when you click the + button, you will now see an updated toolbar. You can click the “{ }” button to insert a new code block.

Or you can type ``` directly into the editor:

In the Medium iOS and Android apps, you can tap the “{ }” button to insert a new code block.

Once you’ve created the code block, you can type your code directly or paste from elsewhere.

What about older stories with code blocks? How can I update them?

Existing code blocks in stories that have already been published on Medium will not be automatically updated, just in case they’re being used for something other than code.

If you’d like to update an old code block in a published story, you can edit the story, create a new code block, and paste the old block’s contents into it.

Tell us what you think

We’re excited to bring you new writing tools and would love to hear your feedback. How could we continue to improve on code blocks? What other kinds of content blocks or tools would be useful to you? Let us know in the responses.