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
console.log() function, italics on string values, and bold on the
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.