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.

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