Prism Monokai theme demo

Demo of the Prism Monokai theme. You can download the theme CSS file here.

Inline example:

An example of .prsim { width: 2em; } inline code.

HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prism Monokai Theme</title>
  <link rel="stylesheet" href="./monokai.css">
  <script src="/js/prism.js"></script>
  <script>Prism.plugins.autoloader.languages_path = '/js/prism/components/';</script>
</head>
<body>
  <h1>Prism Monokai theme demo</h1>

  <h3>Inline example:</h3>
  <p>An example of <code class="language-css">.prsim { width: 2em; }</code> inline code.</p>

  <h3>HTML example:</h3>
  <pre><code class="language-html"></code></pre>

  <h3>JS example:</h3>
  <pre><code class="language-js"></code></pre>

  <h3>CSS example:</h3>
  <pre><code class="language-css"></code></pre>
</body>
</html>

JS example:

/**
 * Checks if a font is available to be used on a web page.
 *
 * @param {String} fontName The name of the font to check
 * @return {Boolean}
 * @license MIT
 * @copyright Sam Clarke 2013
 * @author Sam Clarke 
 */
(function (document) {
  var width;
  var body = document.body;

  var container = document.createElement('span');
  container.innerHTML = Array(100).join('wi');
  container.style.cssText = [
    'position:absolute',
    'width:auto',
    'font-size:128px',
    'left:-99999px'
  ].join(' !important;');

  var getWidth = function (fontFamily) {
    container.style.fontFamily = fontFamily;

    body.appendChild(container);
    width = container.clientWidth;
    body.removeChild(container);

    return width;
  };

  // Pre compute the widths of monospace, serif & sans-serif
  // to improve performance.
  var monoWidth  = getWidth('monospace');
  var serifWidth = getWidth('serif');
  var sansWidth  = getWidth('sans-serif');

  window.isFontAvailable = function (font) {
    return monoWidth !== getWidth(font + ',monospace') ||
      sansWidth !== getWidth(font + ',sans-serif') ||
      serifWidth !== getWidth(font + ',serif');
  };
})(document);

CSS example:

/**
 * prism.js Monokai theme
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #272822;
}

.token.comment,
.token.blockquote,
.token.shebang.important,
.token.shebang {
  color: #75715e;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.tag,
.token.deleted,
.token.selector,
.token.prolog,
.token.title .token.punctuation {
  color: #f92672;
}

.token.property,
.token.entity,
.token.atrule,
.token.command,
.token.code {
  color: #66d9ef;
}

.token.regex,
.token.atrule .token.property {
  color: #fd971f;
}

.token.pseudo-element,
.token.id,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.function,
.token.namespace,
.token.inserted,
.token.symbol,
.token.url-reference .token.variable,
.token.attr-name {
  color: #a6e22e;
}

.token.string,
.token.url,
.token.list,
.token.cdata,
.token.attr-value,
.token.attr-value a.token.url-link {
  color: #e6db74;
}

.token.constant,
.token.hexcode,
.token.builtin,
.token.number,
.token.boolean {
  color: #ae81ff;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #f8f8f2;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* YAML */
.language-yaml .token.atrule {
  color: #f92672;
}

/* Bash */
.language-bash .token.function {
  color: #f92672;
}