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 {
/* */
}
