syntax-highlighting

<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>Demos for Prism</title> <link rel="stylesheet" href="assets/css/demo.css"> <link rel="stylesheet" href="assets/css/prism-cb.css" id="styleLink"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="index, follow"> <meta name="description" content="Demos for Prism highlighting themes"/> <link rel="author" href="https://plus.google.com/+BramdeHaan/posts"> <script>if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) { document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js '; }</script> </head> <body> <header> <div class="masthead col pad-h"> <h1>Prism</h1>  <p>themes</p> </div>                                          <div class="col pad-h"> <label for="styleSwitcher">Choose a theme: </label> <div class="button styleswitcher"> <select id="styleSwitcher"> <option value="prism-cb">CB</option> <option value="prism-ghcolors">GHColors</option> <option value="prism-pojoaque">Pojoaque</option> <option value="prism-xonokai">Xonokai</option> <option value="prism-base16-ashes.dark">Ashes-dark</option>                     <option value="prism-atelier-cave-dark">Ateliercave-dark</option> <option value="prism-atelier-cave-light">Ateliercave-light</option> <option value="prism-atelier-dune-dark">Atelierdune-dark</option> <option value="prism-atelier-dune-light">Atelierdune-light</option> <option value="prism-atelier-estuary-dark">Atelierestuary-dark</option> <option value="prism-atelier-estuary-light">Atelierestuary-light</option> <option value="prism-atelier-forest-dark">Atelierforest-dark</option> <option value="prism-atelier-forest-light">Atelierforest-light</option> <option value="prism-atelier-heath-dark">Atelierheath-dark</option> <option value="prism-atelier-heath-light">Atelierheath-light</option> <option value="prism-atelier-plateau-dark">Atelierplateau-dark</option> <option value="prism-atelier-plateau-light">Atelierplateau-light</option> <option value="prism-atelier-savanna-dark">Ateliersavanna-dark</option> <option value="prism-atelier-savanna-light">Ateliersavanna-light</option> <option value="prism-atelier-lakeside-dark">Atelierlakeside-dark</option> <option value="prism-atelier-lakeside-light">Atelierlakeside-light</option> <option value="prism-atelier-seaside-dark">Atelierseaside-dark</option> <option value="prism-atelier-seaside-light">Atelierseaside-light</option> <option value="prism-atelier-sulphurpool-dark">Ateliersulphurpool-dark</option> <option value="prism-atelier-sulphurpool-light">Ateliersulphurpool-light</option> <option value="prism-base16-brewer.dark">Brewer-dark</option> <option value="prism-base16-brewer.light">Brewer-light</option> <option value="prism-base16-bright.dark">Bright-dark</option> <option value="prism-base16-chalk.dark">Chalk-dark</option> <option value="base16-duotone-dark.dark">Duotone-dark</option> <option value="base16-duotone-darksea.dark">Duotone-darkSea-dark</option> <option value="base16-duotone-darkspace.dark">Duotone-darkSpace-dark</option> <option value="base16-duotone-darkearth.dark">Duotone-darkEarth-dark</option> <option value="base16-duotone-darkforest.dark">Duotone-darkForest-dark</option> <option value="base16-duotone-darkpool.dark">Duotone-darkPool-dark</option> <option value="prism-base16-google.light">Google-light</option> <option value="prism-base16-grayscale.dark">Grayscale-dark</option> <option value="prism-base16-grayscale.light">Grayscale-light</option> <option value="prism-base16-greenscreen.dark">Greenscreen-dark</option> <option value="prism-base16-harmonic16.dark">Harmonic16-dark</option> <option value="prism-base16-hopscotch.dark">Hopscotch-dark</option> <option value="prism-base16-isotope.dark">Isotope-dark</option> <option value="prism-base16-marrakesh.dark">Marrakesh-dark</option> <option value="prism-base16-marrakesh.light">Marrakesh-light</option> <option value="prism-base16-mocha.dark">Mocha-dark</option> <option value="prism-base16-monokai.dark">Monokai-dark</option> <option value="prism-base16-ocean.dark">Ocean-dark</option> <option value="prism-base16-paraiso.dark">Paraiso-dark</option> <option value="prism-base16-paraiso.light">Paraiso-light</option> <option value="prism-base16-railscasts.dark">Railscasts-dark</option> <option value="prism-base16-solarized.dark">Solarized-dark</option> <option value="prism-base16-solarized.light">Solarized-light</option> <option value="prism-base16-summerfruit.dark">Summerfruit-dark</option> <option value="prism-base16-summerfruit.light">Summerfruit-light</option> <option value="prism-base16-tomorrow.dark">Base16 Tomorrow-dark</option> <option value="prism-base16-twilight.dark">Twilight-dark</option> <option value="prism-atom-dark">Atom dark</option> <option value="prism-cb">CB</option> <option value="prism-ghcolors">GH colors</option> <option value="prism-hopscotch">Hopscotch</option> <option value="prism-pojoaque">Pojoaque</option> <option value="prism-vs">VS</option> <option value="prism-xonokai">Xonokai</option> </select> </div> </div> </header> <main> <div class="col"> <h2>HTML</h2> <pre data-line="5" class="language-markup line-numbers"><code><!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Demo</title> <meta name="description" content="Demo"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png">  <link rel="stylesheet" href="/normalize.css"> <link rel="stylesheet" href="/main.css"></code></pre> </div> <div class="col"> <h2>CSS</h2> <pre data-line="5" data-line="5" class="language-css line-numbers"><code>h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80% !important; }</code></pre> </div> <div class="col"> <h2>Sass <small>scss</small></h2> <pre data-line="5" class="language-scss line-numbers"><code>.visuallyhidden { // Hide only visually, but have it available for screen readers: // http://snook.ca/archives/html_and_css/hiding-content-for-accessibility border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .inner-wrap { max-width: 50em; margin: 0 auto; padding-left: emCalc(24); padding-right: emCalc(24); } @media only screen and (min-width: 550px) { article { ul { list-style: circle; } ol { list-style: decimal; } } .inner-wrap { padding-left: emCalc(48); padding-right: emCalc(48); } }</code></pre> </div> <div class="col"> <h2>Javascript</h2> <pre data-line="5" class="language-javascript line-numbers"><code>/*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */ (function( w ){ var loadJS = function( src, cb ){ "use strict"; var ref = w.document.getElementsByTagName( "script" )[ 0 ]; var script = w.document.createElement( "script" ); script.src = src; script.async = true; ref.parentNode.insertBefore( script, ref ); if (cb && typeof(cb) === "function") { script.onload = cb; } return script; }; // commonjs if( typeof module !== "undefined" ){ module.exports = loadJS; } else { w.loadJS = loadJS; } }( typeof global !== "undefined" ? global : this )); }</code></pre></div> <div class="col"> <h2> </h2> <pre data-line="5" class="language-javascript screenshot line-numbers"> <code> function foo(bar) { var a = 42, b = 'Prism'; return a + bar(b); }</code></pre></div> <div class="col"> <h2>PHP</h2> <pre data-line="5" class="language-php line-numbers"> <code><?php namespace App\Services; use App\User; use Validator; use Illuminate\Contracts\Auth\Registrar as RegistrarContract; class Registrar implements RegistrarContract { /** * Get a validator for an incoming registration request. * * @param array $data * @return \Illuminate\Contracts\Validation\Validator */ public function validator(array $data)</code></pre></div> <div class="col"> <h2>Ruby</h2> <pre data-line="5" class="language-ruby line-numbers"> <code>## # Array ISO Test assert('Array', '15.2.12') do assert_equal(Class, Array.class) end assert('Array inclueded modules', '15.2.12.3') do assert_true(Array.include?(Enumerable)) end assert('Array.[]', '15.2.12.4.1') do assert_equal([1, 2, 3], Array.[](1,2,3)) end</code></pre></div> <div class="col"> <h2>Python</h2> <pre data-line="5" class="language-python line-numbers"> <code>class _BaseHTMLProcessor(sgmllib.SGMLParser): elements_no_end_tag = ['area', 'base', 'basefont', 'br', 'col', 'frame', 'hr', 'img', 'input', 'isindex', 'link', 'meta', 'param'] _r_barebang = re.compile(r'<!((?!DOCTYPE|--|\[))', re.IGNORECASE) _r_bareamp = re.compile("&(?!#\d ;|#x[0-9a-fA-F] ;|\w ;)") _r_shorttag = re.compile(r'<([^<\s] ?)\s*/>') def __init__(self, encoding): self.encoding = encoding if _debug: sys.stderr.write('entering BaseHTMLProcessor, encoding=%s\n' % self.encoding) sgmllib.SGMLParser.__init__(self)</code></pre></div> </main> <footer> <small><a href="http://github.com/prismjs/prism-themes">Repo on Github</a></small> </footer>  <script src="assets/js/prism.js"></script> <script src="assets/js/styleswitcher.js"></script>  <script src="assets/js/svg-test.js"></script> </body> </html>