Our post editor lets you write your post in Markdown, a plain-text format that converts to HTML. We have some built-in tools to make writing, editing, and styling Markdown easier, even if you've never used it before.
Creating a New Post
To start a new post, select "New Post" from the "Create" menu on the home page.
Writing Your Post
The post title field is at the top of the post editor. As you type in your post title, you'll see the Post URL change to include the title.
You can edit the Post's URL if you want it to be different from the Post title. The save link saves your post and any changes you've made to the post title and URL.
The post body is where you'll do most of your writing. You can use the Markdown shortcuts in the post toolbar to help style your text and insert links and images. Press enter twice to separate paragraphs.
The Markdown shortcuts and tools on the toolbar are:
- Bold text
- Italicized text
- unordered (bulleted) list
- ordered (numbered) list
- insert link
- insert image
- split preview
To style your text with the Markdown shortcuts, highlight the text with your cursor and press the shortcut button.
To insert an image, press the image button. Then, enter the alt text for the image inside the brackets, and the URL for the image inside the parentheses, like this:
![a cool dog](http://www.example.com/dog.png)
Previewing Your Post
You can preview your post as you write by clicking the preview buttons. The preview (eye icon) moves the post editor out of the way and shows your text as it will appear in the published post. The split preview (split rectangle icon) divides your editor in half, with your editable post on the left and your preview on the right.
Full Page Preview
You can see the full page preview of your Post after you've saved it at least once. This lets you see how your post will look once it's published on CodePen. Click the "Preview Full Page" link in the "Publish" menu to see the preview.
The yellow "Draft" bar at the top of the post won't appear on your published post.
Using Spell Check
You can turn on spell check highlighting for your post by sliding the toggle to the left on the "Spell check highlight" switch at the bottom of the post editor.
With spell check turned on, the post editor will underline and highlight potentially misspelled words in red.
Embedding Pens in a Post
If you want to embed a Pen, you can use this format to insert the Pen:
[[[pen slug-hash='pen-slug-here' height='300' theme-id='1' ]]]
Add the Pen's slug as the slug-hash value. You can change the height and theme ID, too.
You can also use Prefill Embeds to keep your code inline with your post.
PRO Feature: Asset Uploading
If you have a CodePen PRO subscription, you can add new assets to your Asset Hosting directly from the Post editor. Drag and drop your image into the dropzone in the Asset Uploader, or choose a file from the filepicker. A link to your asset will appear in the asset uploader once the image is uploaded.
Custom CSS for Posts
You can add custom CSS to your post page in the Custom CSS box at the bottom of your post.
You can even use preprocessors and vendor prefixing for your post. Click the settings gear at the top of the Custom CSS box to open the menu.
You can preview your custom CSS before publishing from the full page preview.
Tagging Your Post
You can add up to five comma-separated tags to your post in the "Tags" field below the post editor.
When you press the Save button on an unpublished post, the post is saved as a draft. You can find all of your drafts in your unpublished Posts list at: http://codepen.io/you/posts/unpublished/
Publishing Your Post
When your draft is ready for publication, press the green "Publish" button.
Updating a Published Post
If you make changes to a published post, you can publish those changes by pressing the green "Update" button.
Unpublishing a Post
You can unpublish your Post by clicking the "Unpublish" link on the Publish menu. The Post will return to draft status.
Deleting a Post
You can permanently delete your Post by clicking the "Delete Post" link on the Publish menu, then confirming the deletion on the "Delete Confirmation" popup. Deleting your post is permanent and can't be undone. We can't restore deleted posts. If you just want to temporarily remove your post but keep it in your drafts, you can unpublish it instead.
Private Posts are a PRO feature. You can make your post private by sliding the privacy toggle under the "Publish" menu at the right of your post editor.
Private Posts are hidden on CodePen, except to you. You can still share them with others by sending them a direct link to your published post, but they aren't shown on your profile and can't be found by browsing or searching on CodePen.