Demo of the Prism Monokai theme. You can download the theme CSS file here.
An example of .prsim { width: 2em; } inline code.
<!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>/**
* 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); /**
* 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;
}