Access Code Directly

On any Pen, you can access the code that was written inside it, directly in text format, by adding extensions to the Pen's URL. These are handy for things like linking the CSS from one Pen to another Pen. These URLs should not be used in production outside of CodePen.

For instance, here's a Pen URL:
http://codepen.io/chriscoyier/pen/gHnGD

You can access the HTML, CSS, and JavaScript directly at these URLs:
http://codepen.io/chriscoyier/pen/gHnGD.html
http://codepen.io/chriscoyier/pen/gHnGD.css
http://codepen.io/chriscoyier/pen/gHnGD.js

But actually, SCSS was used to create that Pen. The .css URL shows you the processed CSS. To access the SCSS directly, you'd use:
http://codepen.io/chriscoyier/pen/gHnGD.scss

Depending on the Pen preprocessor options, this is what you have access to:

If a Pen is… Raw Code Preprocessed Code
HTML Raw HTML .html N/A
Markdown .markdown .html
Slim .slim .html
HAML .haml .html
CSS Raw CSS .css N/A
Sass .sass .css
SCSS .scss .css
LESS .less .css
JS Raw JS .js N/A
CoffeeScript .coffeescript .js
LiveScript .livescript .js
TypeScript .typescript .js
Babel .babel .js

Images for Each Pen

Large Image Preview
https://codepen.io/USERNAME/pen/SLUG/image/large.png

Small Image Preview
https://codepen.io/USERNAME/pen/SLUG/image/small.png

Editor Layout

These can be combined.

Layout Type
http://codepen.io/USERNAME/pen/SLUG/left/
http://codepen.io/USERNAME/pen/SLUG/right/
http://codepen.io/USERNAME/pen/SLUG/top/

Open/Closed Editors
http://codepen.io/USERNAME/pen/SLUG/?editors=1010

In the four digit number (e.g. 1010), 1 is open, 0 is closed. The first digit is the HTML editor, second is the CSS editor, third is the JavaScript editor, and the fourth is the console.

Details Height

Preview will open at a certain height (example)

http://codepen.io/USERNAME/details/SLUG?preview_height=HEIGHT_IN_PIXELS