4 Ways to Add Code Snippets to Your Blog

When you write a blog post that features code, you’ll want to show your code. But, you don’t want it to act like code. What are your choices for adding code to a blog post? You can manually show your code, use a plug-in or embed it into your post. Which one do you choose?

4 Ways to Add Code Snippets to Your Blog

1. Code it manually yourself

Write the code to style it yourself without using a plug-in or hosting your code on another website. You can create a code snippet with HTML and CSS. With the HTML tags <pre> and <code> and CSS, you can style your snippet to work with your design.

Code Snippets in HTML and CSS

2. Use a plug-in

If you prefer not to code it yourself, your next option is to use a plug-in. For WordPress, you can use a plug-in called Code Snippets. With Code Snippet, you can manage your snippets easily.

Code Snippets WordPress Plugin

3. gist.github.com

Don’t want to code it yourself or use a plug-in and you have a github account? You can host your code on gist.github.com. They provide you with a way to embed code snippets on your blog.

gist.github.com

4. CodePen

Are you a CodePenner? If you are and have a self-hosted WordPress blog, you can embed your pens or use the CodePen Plugin. CodePen takes care of the code and formatting for you. Refer to CodePen’s documentation on the best method for you.

CodePen Embed & WordPress Documentation

Summary
Whether you create code snippets with code, use a plugin or host on gist.github.com or CodePen, these methods provide 4 different ways to show your code.