Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- text from Wikipedia article on JavaScript -->
<div class="wrap">
  <h1>Beginnings at Netscape</h1>
  <p>In 1993, the National Center for Supercomputing Applications (NCSA), a unit of the University of Illinois at Urbana-Champaign, released NCSA Mosaic, the first popular graphical Web browser, which played an important part in expanding the growth of the nascent World Wide Web.</p>
  
  <h1>Server-side JavaScript</h1>
  <p>Netscape introduced an implementation of the language for server-side scripting with Netscape Enterprise Server in December 1995, soon after releasing JavaScript for browsers.</p>
  
  <h1>Adoption by Microsoft
</h1>
  <p>Microsoft script technologies including VBScript and JScript were released in 1996. JScript, a reverse-engineered implementation of Netscape's JavaScript, was part of Internet Explorer 3.</p>
  <h2>Standardization</h2>
  <p>In November 1996, Netscape submitted JavaScript to Ecma International to carve out a standard specification, which other browser vendors could then implement based on the work done at Netscape. This led to the official release of the language specification ECMAScript published in the first edition of the ECMA-262 standard in June 1997</p>
  <h2>Later developments</h2>
  <p>JavaScript has become one of the most popular programming languages on the Web. Initially, however, many professional programmers denigrated the language because, among other reasons, its target audience consisted of Web authors and other such "amateurs".</h2>
  
  <!-- add more heading to automatically add indexes
</div>
              
            
!

CSS

              
                body {
  counter-reset: heading; // init the counter for headings
              // note you can give any other name
}
h1 {
  counter-increment: heading; // increments the counter on every H1 tag
  counter-reset: subheading;  // here we init or reset the subheading
                // so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3
}
h1:before {
  content: counter(heading) " - "; // using :before selector and counter() function we can add the index to the heading
}
h2 {
  counter-increment: subheading; // increment the subheading counter on every H2 tag
}
h2:before {
  content: counter(heading) "." counter(subheading) " - ";
}

.wrap {
  padding: 0px 24px 12px 24px;
}
              
            
!

JS

              
                
              
            
!
999px

Console