Blog

No need for a fancy explanation. That's what you get with a free CodePen account: a blog. You write stuff, you publish it, people read it. It's absolutely that simple. But the tools are there to go nuts with it if you want to.

There is no setup at all. You just select New Post, give it a title, type some words, and publish.

See an Example Post →

Write in Markdown

If you already like writing in Markdown, wonderful. If you haven't tried it yet, give it a shot, we bet you'll like it.

It's like this: writing for the web means your words and paragraphs end up as HTML. Writing directly in HTML would be <em>annoying</em> (see?!), but WYSIWYG editors are even worse, especially for those of us who like simple and direct control over how those words turn out.

Markdown solves that. No tedious HTML: italic is just *like this*, lists are just multiple lines that start with dashes, headers start with # hashes). But if you want to use HTML, you totally can (even mixed together). Here's some linkage:

• We use the Red Carpet variant of the original Markdown
• Reference Guide

Syntax Highlighting

As a coder, it's almost a guarantee that the code you look at every day is syntax highlighted. It's a fundamental feature of a code editor. So when you see code that isn't highlighted, it looks weird and broken. Never fear, you don't have to think about it here on CodePen. Just mark the language and we'll do our best to highlight it.

Oh, and another thing. Since you write in Markdown you don't have to worry about escaping code. Those <div>'s will be just fine as they are.

Embedding Pens

Showing off live code demos in blog posts is simple: just make a Pen and embed it right in the Post. There is something so satisfying about blog posts with real live working code you can see, isn't there?

The work of embedding the Pen is trivially easy. Just find the Pen in the area right next to the editor and drag and drop it into the editor.

Custom CSS Everywhere

Applying custom CSS to an individual blog post is easy. We put a CSS editor right below the post editor! You can use it to control the look of a blog post however you would like. Perhaps some minor tweaks to the style, perhaps a fully "art directed" post, perhaps you use it to demonstrate an idea you're talking about in the post itself.

If you're a CodePen PRO member, you can also apply custom CSS to your blog homepage as well as to every single individual blog post, so you have full control to customize the look and feel of your blog.

Comments

Yet another thing you don't have to worry about setting up! All blog posts have a comment thread where people can discuss what you've written. You can choose to get email notifications when people comment (likewise when you comment on other people's posts).

Don't like 'em? Turn them off anytime.

RSS

Every blog has an RSS feed. That means your loyal readers can keep up with your writing in their feed reader of choice.

It's also kinda like a basic API to your content, if you want to think of it that way. Perhaps you want to showcase your most recent post on another site or the like.

Community

Not to get all sappy on you, but blogging on CodePen makes you part of a community. Your posts might be found by fellow developers who just stumble across you because they are also CodePen users. We do our best to make that cross-pollination happen by promoting great blog posts, showing off popular and related posts, and making your posts findable in search.

♥ ❤ ♥ ❤ ♥