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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <script id="src" type="text/plain">
In this Star Wars Movie, our heroes return to take on the first order and new villain 
Kyle Ren|Malloc|Darth Sebelius|Theranos|Lord Juul
 with help from their new friend 
Kim Spacemeasurer|Teen Yoda|Dab Tweetdeck|Yaz Progestin|Ti-83
.\n\nRey builds a new lightsaber with a 
Beige|Orchre|Mauve|Aquamarine|Taupe
 blade, and they head out to confront the first order's new superweapon, the 
Sun Obliterator|Moonsquisher|World Eater|Planet Zester|Superconducting Supercollider
, a space station capable of 
blowing up a planet with a bunch of beams of energy that combine into one|blowing up a bunch of planets with one beam of energy that splits into many|cutting a planet in half and smashing the halves together like to cymbals|increasing the CO2 levels in a planet's atmosphere, causing rapid heating|triggering the end credits before the movie is done
.\n\nThey unexpectedly join forces with their old enemy 
Boba Fett|Salacious Crumb|The Space Slug|The Bottom Half of Darth Maul|YouTube commenters
 and destroy the superweapon in a battle featuring 
a bow that shoots little lightsaber-headed arrows|x-wings and tie fighters dodging the giant letters of the opening crawl|a sith educational display that uses force lighting to demonstrate the dielectric breakdown of air|Kylo Ren putting on another helmet over his smaller one|a Sith car wash where the bristles on the brushes are little lightsabers
.\n\nP.S. Rey's parents are 
Luke|Lea|Han|Obi-wan|a random junk trader
 and 
Poe|BB-8|Amilyn Holdo|Laura Dern|a random junk trader|that one droid from the jawa sandcrawler that says gonk
.
</script>

<h1>Star Wars Spoiler Generator</h1>
<p>
  <a href="https://xkcd.com/2243/" target="_new">From xkcd 2243</a>
</p>

<p class="result"></p>

<p>
  <a id="new" href="#">Generate new spoiler</a>
  <a id="seed" href="#">(with seed)</a>
</p>
              
            
!

CSS

              
                @font-face {
	font-family: xkcd-script;
	src: url('https://rawcdn.githack.com/ipython/xkcd-font/5632fde618845dba5c22f14adc7b52bf6c52d46d/xkcd-script/font/xkcd-script.woff') format('woff');
}

body {
  font-family: xkcd-script, sans;
  text-align: center;
  margin: 1em auto;
  max-width: 720px;
}

.result {
  font-size: 1.25em;
}
              
            
!

JS

              
                const doc = document
const body = doc.body
const $ = ::body.querySelector
const resultEl = $('.result')
const source = $('#src')
  .textContent
  .split('\n')
  .filter(e => e)
  .map(e => e.split('|'))

function generate (seed) {
  if (!seed) {
    seed = Math.random().toString(36).substring(2)
  }
  const random = new alea(seed)

  const result = source.map(e => {
    const index = Math.floor(random() * e.length)
    return e[index]
  }).join('').replace(/\\n/g, '<br>')
  resultEl.innerHTML = result

  location.hash = '#' + seed
}

generate(location.hash.substring(1))

$('#new').addEventListener('click', e => {
  e.preventDefault()
  generate()
})
$('#seed').addEventListener('click', e => {
  e.preventDefault()
  generate(window.prompt('Enter seed:'))
})

              
            
!
999px

Console