I've been working on implementing Google Code Prettify and finally got it to work correctly. You can see my test file here to see what it looks like. I worked from a template and tried to improve it.
There is a lot of HTML boilerplate code that apparently is needed (mostly JavaScript links). I tried to remove some of them to reduce clutter but it broke every time, so I left it all in from the template. For reference:
prettify-test.html
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<title>Google Prettify testing</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel="stylesheet" href="color-themes-for-google-code-prettify-gh-pages/css/style.css">
<link rel="stylesheet" href="color-themes-for-google-code-prettify-gh-pages/css/themes/github.css">
<link rel="sitemap" type="application/xml" title="Sitemap" href="color-themes-for-google-code-prettify/sitemap.xml" />
<link rel="canonical" href="color-themes-for-google-code-prettify-gh-pages/github/" />
<script src="color-themes-for-google-code-prettify-gh-pages/js/modernizr-2.5.3.min.js"></script>
</head>
<body style="margin-left: 15px;">
<h2>Google Prettify Testing: Github default</h2>
<h3>Color Reference</h3>
<code class="pln ">Plain text</code><br />
<code class="str">"String content"</code><br />
<code class="kwd">Keyword</code><br />
<code class="com">// Comment</code><br />
<code class="typ">Type name</code><br />
<code class="lit">Literal value 42</code><br />
<code class="pun">Punctuation...</code><br />
<code class="dec">Declaration</code><br />
<code class="var">Variable name</code><br />
<code class="fun">Function name</code><br />
<br />
<code class="opn">Lisp {open bracket</code><br />
<code class="clo">Lisp close} bracket</code><br />
<br />
<code class="tag"><Markup tag name></code><br />
<code class="atn"><Markup attribute-name=""></code><br />
<code class="atv"><Markup attribute="value"></code><br />
<br />
<h3>C#/LINQ</h3>
<pre class="prettyprint linenums lang-csharp lang-linq">
// this is a comment
public static class Evaluate
{
public static string FizzBuzz(int start, int end)
{
return Enumerable.Range(start, (end - start) + 1)
.Select(FizzOrBuzz)
.Aggregate(String.Empty, (y, x) => String.Format("{0} {1}", y, x))
.Trim();
}
public static string FizzOrBuzz(int n)
{
if (n % 15 == 0) return "fizzbuzz";
if (n % 3 == 0) return "fizz";
if (n % 5 == 0) return "buzz";
return n.ToString();
}
}
</pre>
<!-- more code examples removed -->
<footer></footer>
<script src="//platform.twitter.com/widgets.js"></script>
<script src="//assets.pinterest.com/js/pinit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.7.2.min.js"><\/script>')</script>
<script src="color-themes-for-google-code-prettify-gh-pages/js/prettify.js"></script>
<script src="color-themes-for-google-code-prettify-gh-pages/js/lang-css.js"></script>
<script src="color-themes-for-google-code-prettify-gh-pages/js/jquery.smooth-scroll.min.js"></script>
<script src="color-themes-for-google-code-prettify-gh-pages/js/script.min.js"></script>
</body>
</html>
I would like mostly the CSS reviewed, although I am open for suggestions on HTML as well. I tried to make the template in a way that is simple to use. Please do note I have no control at all over the CSS class names (like .str
, .kwd
, etc.) those are what Prettify uses and if you change them it breaks everything, unless you go and change all the JavaScript files that reference those classes.
PS: There appear to be a few merge conflicts in the linked file. Please disregard them. I removed them in the code block below.
Conflicts have been resolved.
color-themes-for-google-code-prettify-gh-pages/css/themes/github.css
/* GitHub Theme */
.prettyprint {
background: white;
font-family: Monaco, Consolas, Courier New, monospace;
font-size: 12px;
line-height: 1.5;
border: 1px solid #ccc;
padding: 10px;
}
code {
font-family: Monaco, Consolas, Courier New, monospace;
font-size:12px;
}
/* Plain text */
.pln {
color: #333333;
}
/* String content */
.str {
color: #dd1144;
}
/* Keyword */
.kwd {
color: #333333;
}
/* Comment */
.com {
color: #999988;
}
/* Type name */
.typ {
color: #445588;
}
/* Literal value */
.lit {
color: #445588;
}
/* Punctuation */
.pun {
color: #333333;
}
/* Lisp open bracket */
.opn {
color: #333333;
}
/* Lisp close bracket */
.clo {
color: #333333;
}
/* Mark-up tag name */
.tag {
color: navy;
}
/* Mark-up attribute name */
.atn {
color: teal;
}
/* Markup attribute value */
.atv {
color: #dd1144;
}
/* Declaration */
.dec {
color: #333333;
}
/* Variable name */
.var {
color: teal;
}
/* Function name */
.fun {
color: #990000;
}
}
@media print, projection {
.str {
color: #006600;
}
.kwd {
color: #006;
font-weight: bold;
}
.com {
color: #600;
font-style: italic;
}
.typ {
color: #404;
font-weight: bold;
}
.lit {
color: #004444;
}
.pun, .opn, .clo {
color: #444400;
}
.tag {
color: #006;
font-weight: bold;
}
.atn {
color: #440044;
}
.atv {
color: #006600;
}
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0;
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
/* */
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
/* */
}