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

              
                <h2>JS</h2>
<pre class="syntax">function myFunction()
{
  var num = 12;
  var rx = /[a-z]/;
  alert("Hello World!");
}</pre>
<h2>JS</h2>
<pre class="syntax">var jq = document.createElement('script');
var protocol = location.protocol+"//";
jq.src = protocol+"ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
setTimeout(function(){
    jQuery.noConflict()
	$(".delete").click();
	clickOk = function(){$(".ui_button.btn_1.chrome.blue.default-pulse").click();}
	setInterval(clickOk,500);	
}, 3000)</pre>
<h2>JSON</h2>
<pre class="syntax">{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}</pre>


<div id="template">
<div class="keywords"> 
function
break
case
catch
continue
debugger
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
case
catch
const
debugger
default
do
enum
export
extends
finally
import
super
switch
throw
try
abstract
boolean
byte
case
catch
char
class
const
debugger
default
do
double
enum
export
extends
final
finally
float
goto
implements
import
instanceof
int
interface
long
native
package
private
protected
public
short
static
super
switch
synchronized
throw
throws
transient
try
volatile
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
class
enum
export
extends
import
super
implements
interface
let
package
private
protected
public
static
yield
</div>
<div class="colortheme">
#936565
#C48686
#8E574D
#BA7D67
#AD713E
#C69060
#99701F
#B59140
#9B954B
#BCB23B 
#808E42
#9EB25F 
#539B53
#75BC75
#42845D
#5EAA7D
#0F8776 
#00A99D
#138591
#4FA4B2
#0071BC
#4DA0CE
#3062AA
#6291BF
#5462B5
#7696DD
#5E57B5
#7D7DD8
#7A5E99
#9787AD
#955AA3
#AC85B5
#A05A89
#B780A8
</div>
</div>
              
            
!

CSS

              
                .syntax{
  background: #222;
  color:#eee;
  margin: 10px;
  border:solid thin #333;
}
.syntax span{
  counter-increment: linecounter;
}
.syntax span:before{
  content: counter(linecounter);
  width: 1.2em;
  text-align:center;
  display: inline-block;
  border-right: 1px solid #444;
  margin-right: 10px;
  font-style:normal !important;
  color:#444 !important;
}
#template {
  display: none; }

.num {
  font-weight: 600;
  color: #d0782a; }

[class*=var] {
  font-weight: 600; }

.clr {
  border-radius: 1px;
  color: white;
  font-weight: 400; }

.str, .str i {
  color: #ddca7e !important;
  font-weight: 400 !important; }

.reg, .reg i {
  color: #ddca7e !important;
  font-weight: 500; !important}

.cmnt, .cmnt i {
  color: #555 !important;
  font-weight: 400 !important; }

@media (max-width: 400px) {
  .syntax {
    font-size: 12px; } 
}
              
            
!

JS

              
                $().ready(init);

var $syntax
  , tokens = []
  , token_colors = {}
  , refresh_timer
    // Characters that separate tokens
  , rx_splitters = /[\s\+\-=\*\(\)\{\}\[\]\.;\|,\!]/g
  , rx_splitters_string = "([\\s\\+\\-=\\*\\(\\)\\{\\}\\[\\]\\.;\\|,\\!])"
    // Match comments
  , rx_comments = /(\/\/(.*))\r?\n|\r/g
    // Match "strings", 'strings', and /regexes/
  , rx_strings = /("(.*?)")|('(.*?)')|(\/([^\s]+?)[^\\]\/[a-z]*)/g
    // Match #hex colors
  , rx_colors = /(#[0-9a-fA-F]{6})/g
    // Match numbers
  , rx_numbers = /([\s\+\-=\*\(\)\{\}\[\]\.;\|,\!])([0-9]+)([\s\+\-=\*\(\)\{\}\[\]\.;\|,\!])/g
    // Match valid characters: letters, numbers, _underscore, $
    // but don't let first character be a number
  , rx_allowed =  /(^[a-zA-Z_\$][a-zA-Z0-9_\$]*)/
  ;

function init() {
  // Get selectors
  $syntax = $(".syntax");
  //
  init_theme();
  init_keywords();
  //
  update();
}

function update() {
  $syntax.each(function () {
    // Insert cursor placeholder
    //insertTextAtCursor("@" + "@");
    //
    var text = $(this).text();
    // Process text
    text = process(text);
    $(this).html(text);
  });
}

function process(string) {
  var html = string;

  assign_colors(string);

  var rx_tokens = make_regex(tokens, "g");


  html = htmlify(html);

  html = html
          .replace(rx_strings, replace_rx_strings)
          .replace(rx_tokens, replace_tokens)
          .replace(rx_comments, replace_rx_comments)
          .replace(rx_numbers, replace_rx_numbers)
          .replace(rx_colors, replace_rx_colors)
          ;
  html = applyLineNumbers(html);
  return html;
}

// ==============================
function applyLineNumbers(string){
  string = string.split(/\n/);
  string = string.join('</span>\n<span>');
  string = '<span>'+string+'</span>';
  return string;
}

function assign_colors(string) {

  var split = string.split(rx_splitters);

  var old_colors = token_colors;
  token_colors = get_uniques(split);
  tokens = Object.keys(token_colors).sort();

  var len = tokens.length;

  for (var i = 0; i < len; i++) {

    var percent = i / len;
    var index = parseInt( (percent * 132) + (Math.random() * 0) );

    if (index < 0) index = 0;
    else if (index > 99) index = index - 99;
    else if (index > 66) index = index - 66;
    else if (index > 33) index = index - 33;

    var color = "var" + index;
    token_colors[tokens[i]] = color;
  }
}


// ==============================

function get_uniques(arr) {
  var uniques = {};
  for (var i = arr.length - 1; i >= 0; i--) {
    if ( arr[i].length > 0
          && rx_allowed.test(arr[i])
          && !keywords.test((" " + arr[i] + " "))
    ) {
      uniques[ arr[i] ] = true;
    }
  };
  return uniques;
}

// ==============================

// Make a regex that finds any word in the array between splitter characters

function make_regex(arr, flags) {
  var str = "(" + arr.join("|").replace(/\$/g,"\\$") + ")";
  str = rx_splitters_string + str + "(?=" + rx_splitters_string + ")";
  var regex = new RegExp(str, flags);
  return regex;
}


// ==============================


function replace_rx_comments(match, p1, p2, p3, offset, string) {
  return "<i class='cmnt'>" + match + "</i>";
}

function replace_rx_strings(match, p1, p2, p3, offset, string) {
  var cls;
  if (match.charAt(0) == "/") cls = "reg";
  else cls = "str";

  return "<i class='" + cls + "'>" + match + "</i>";
}

function replace_rx_colors(match, p1, p2, p3, offset, string) {
  var clr =  "<i class='clr' style='background: ";
      clr += match + "; box-shadow: 0 0 0 2px " + match + "; ' >";
      clr += match + "</i>";
  return clr;
}

function replace_rx_regexes(match, p1, p2, p3, offset, string) {
  return "<i class='reg'>" + match + "</i>";
}

function replace_rx_numbers(match, p1, p2, p3, offset, string) {
  return p1 + "<i class='num'>" + p2 + "</i>" + p3;
}

function replace_tokens(match, p1, p2, p3, offset, string) {
  var colorclass = token_colors[p2];
  return p1 + "<i class='" + colorclass + "'>" + p2 + "</i>";
}

// ==============================

function init_theme() {
  var node = document.querySelector(".colortheme");
  var colors = node.innerHTML.trim().split("\n");
  
  var css = "";
  for (var i = 0; i < colors.length; i++) {
    css += ".var" + i + "{color:" + colors[i] + ";} ";
  }
  add_style_sheet(css);
}

// ==============================

function init_keywords() {
  var node = document.querySelector(".keywords");
  var kw_list = node.innerHTML.trim().split("\n");
  keywords = make_regex(kw_list,"");
}

function add_style_sheet (css) {
  var head, styleElement;
  head = document.getElementsByTagName('head')[0];
  styleElement = document.createElement('style');
  styleElement.setAttribute('type', 'text/css');
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = css;
  } else {
    styleElement.appendChild(document.createTextNode(css));
  }
  head.appendChild(styleElement);
  return styleElement;
}

function contains(str, substr) {
  return str.indexOf(substr) !== -1;
}

function htmlify(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

function unquote(str) {
  return String(str).replace(/"/g, '&quot;');
}
              
            
!
999px

Console