Styling Medium Code Blocks

As of this post, there is no way to add custom styles to your code blocks on medium! If you are like me and you want your code to look awesome when blog about it, the best way to do so is with Gist, JSfiddle and Codepen embeds.

Using Gist

Gist is a Git product for hosting one-off files that are not as much part of full projects. Gist is available here: https://gist.github.com. Just create a full gist and paste the link to it into medium to post the raw code. Gist is the most basic of the following solutions, with the external link pointing essentially to a text file. Ex —

Using JSFiddle

JSfiddle is an online environment that allows you to run test code in a virtual environment. The external link points to the JSfiddle with all of the front-end files included. JSFiddle is great for front end snippets of HTML/CSS/JS that you want to be able to be run to demo. Ex —

Using Codepen

Codepen allows you to embed code as well, but it is built more so for front-end developers. It shows you code output as opposed to the raw front-end files. Codepen so it is great for showcasing code with an interface. Ex —