How To Format Code In Your Medium Article

The GUI won’t help you, but backticks will.

Image for post

I was guilty of not knowing these formatting rules when I was new to Medium’s story editor. It isn’t readily apparent how you’re supposed to create blocks of code or inline code formatting.

Here’s how you do it.

What Is A Code Block?

Oh, c’mon now! You know what a code block is.

console.log("This is a code block!");
console.log("It's used to display more than one line of code in a monospace font with a slightly different background color than the main body's text.");

When you’re in the Medium story editor, type three backticks (`) at the start of a new section to create a code block section. You’ll get exactly what you expect — a monospace font designed for reading code easily.

The use of backticks is slightly intuitive here. Usually, backticks are reserved for some type of string operations or formatting when in an IDE. So, it makes sense that in a Medium story, backticks are used for string operations related to code!

What Is Inline Code?

Inline code is when you want to include a single snippet of code in a larger body of text.

If you were discussing the downfalls and benefits of using the !important rule in CSS, for instance, you might want to format it in a way that shows you are clearly talking about code. As you can see, it stands out from the usual text’s flow and style, greatly improving your readers’ ability to parse your code explanations.

Just use a single backtick, start writing your code snippet, and then close the inline code with another backtick. That’s it.

You Can Still Add More Style To Code

In the above examples, you’ll note that I’ve also used other styling options within the code text itself. This helps you add flair and functionality as needed — you’ll notice that I’ve included links to MDN’s documentation on the JavaScript console.log() function, italics on string values, and bold on the important rule.

Backticks To The Rescue

As you’ve seen, adding code to your articles is incredibly easy while still preserving your ability to add additional style for readability. Now go ahead and write that article and fill it with all sorts of code snippets and blocks! Your readers will appreciate your attention to properly styling your code.

Written by

Web developer and hobbyist game dev. Tech. Economics. Leadership. Visit https://www.danbrioli.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store