Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
New thing! Blogging!
All users, free and PRO alike, now have a blog as part of your CodePen account. You're free to use it (or not use it) as you please. No setup. Nothing complicated. Just writing.
Writing a New Post
You'll find the link for writing a new Post right in the user dropdown:
There is a submenu there too, for jumping right to your blog homepage or the area for managing your posts.
New Post will take you write to the Post Editor. Here's an overview of that:
Writing 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:
One Click Preview
See what your post will look like with one click without leaving the post editor.
Custom CSS is Easy
There is a custom CSS editor right under the post editor! Just code up some CSS in that editor and it will apply that to the post. Here's a little video that shows that off:
My favorite part is that the CSS editor stays where it is whether you are writing or previewing. That way you get the cross-referencing thing going on when are looking at the content but also get the live-updating thing going on for when you want to work visually.
It's as easy as drag and drop.
Notice the syntax:
[[[pen slug-hash='BvdgL' height='800' default-tab='result' data-theme='1']]]
You can do anything you could do with normal embedded Pens. Meaning, all the attributes. Only the attributes are not prefixed with
Your blog posts have comment threads just like your Pens do.
Heart them to give them a little love or delete them if you need to.
Like any good blog, your blog has an RSS feed. It's always at the URL like:
Control your URLs
You control the slug for your blog, like:
/chriscoyier/posts-for-nerds/ /chriscoyier/blog-of-ultimate-destiny/ /chriscoyier/couch-couch-couch/
You control that from your settings, but /blog/ will always work too.
You also control the slug for each post.
Of course the code within Embedded Pens is highlighted like they always have been, but blocks of code in posts can also be highlighted. Mark the language and we'll do our best to highlight it.
It's like this:
We're not even a week into having blogging released and there is already some great stuff!
- Return false, preventDefault, and stopPropagation for Web Designers by Aaron Kahlhamer
- I Like to Fancy Myself a Clever Man by Blake Tarter
- .htaccess examples by Brian Rinaldi
- On Handlebars and template tags by Trezy
And some meta stuff about CodePen itself! ❤
- 4 Things That Makes CodePen Awesome by Michael Lee
- How to Embed a Pen as a Widget in iBooks by Josh Rutherford
Let us know if you find any bugs or have any other thoughts!