heavily modified themes, added new ones

README.md

@@ -10,9 +10,11 @@ What problem are we trying to fix exactly?
 We want to color highlight the syntax of any text in a code block without modifying our html. Google Code Prettify does a great job of highlighting any syntax enclosed in a block with the "prettyprint"
  class (i.e. `<pre class="prettyprint">`). However, we want it to highlight syntax in ANY `<pre>` block. That way you don't have to mess with updating your html every time you make a new code block.
 
+ Furthermore, since this needs to drop into an html document that presumably already has CSS defined for `<pre>` and/or `<code>` elements, we need to take special care to override such code, lest we do all this work for naught or--worse--use some CSS styles from the parent document and some defined here.
+
 # Solution
 
-While we could modify Google Code Prettify, this is not a clean and maintainable solution. So instead, we have a small wrapper javascript that you can include in your html (probably in your blog's template) that automatically adds the "prettyprint" class to all `<pre>` tags.
+While we could modify Google Code Prettify, this is not a clean and maintainable solution. So instead, we have a small wrapper javascript that you can include in your html (probably in your blog's template) that automatically adds the "prettyprint" class to all `<pre>` and `<code>` tags.
 
 # Directions
 
@@ -47,8 +49,5 @@ http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html
 [jmblog](https://github.com/jmblog) maintains some nice themes:
 http://jmblog.github.com/color-themes-for-google-code-prettify/
 
-Lastly, there are some themes hosted here. They are slightly modified versions of the ones found above.
- * http://mnewt.github.com/prettify-wrapper/themes/prettify.css
- * http://mnewt.github.com/prettify-wrapper/themes/tomorrow-mnewt.css
- * http://mnewt.github.com/prettify-wrapper/themes/tomorrow-night-mnewt.css
- * http://mnewt.github.com/prettify-wrapper/themes/tomorrow-night-eighties-mnewt.css
+Lastly, there are some themes hosted here. They are slightly modified versions of the ones found above. Check them out at:
+https://github.com/mnewt/prettify-wrapper/tree/master/themes

index.html

@@ -91,12 +91,12 @@ <h1>Themes</h1>
 
 <!-- ======================= Begin Prettify ============================-->
   <link rel="stylesheet" type="text/css" rel="stylesheet"
-    href="http://github.mnewton.com/prettify-wrapper/themes/tomorrow-mnewt.css">
+    href="themes/desert.css">
   <script type="text/javascript"
-    src="http://github.mnewton.com/prettify-wrapper/google-code-prettify/src/prettify.js">
+    src="google-code-prettify/src/prettify.js">
     </script>
   <script type="text/javascript"
-    src="http://github.mnewton.com/prettify-wrapper/styleCode.js"></script>
+    src="styleCode.js"></script>
 <!-- ======================== End Prettify =============================-->
 
   </body>

styleCode.js

@@ -14,7 +14,8 @@ function styleCode()
     return;
   }
   var a = false;
-  var matches = document.body.getElementsByTagName("pre");
+  //var matches = document.body.getElementsByTagName("pre", "code");
+  var matches = document.querySelectorAll("pre, code");
   for (var i = 0; i < matches.length; ++i)
   {
     addClass(matches[i], "prettyprint");

stylesheets/stylesheet.css

@@ -10,8 +10,8 @@ MeyerWeb Reset
 *******************************************************************************/
 
 html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
+h1, h2, h3, h4, h5, h6, p, blockquote,
+a, abbr, acronym, address, big, cite,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,

themes/coda.css

@@ -0,0 +1,30 @@
+/* Coda scheme ported from TextMate to google prettify */
+/* source: http://onwebdev.blogspot.com/2011/05/coda-theme-for-google-prettify.html */
+/* modified to work with http://github.mnewton.com/prettify-wrapper */
+
+pre.prettyprint {
+    border-left: 5px solid #939393; }
+pre.prettyprint, code.prettyprint { 
+    padding: 5px;
+    border-width: 0 0 0 5px !important; }
+pre .nocode { background-color: none; color: #000 }
+pre .str { color: #731318; } /* string */
+pre .kwd { color: #8C1751;} /* keyword */
+pre .com { color: #256D24; } /* comment */
+pre .typ { color: #000; } /* type */
+pre .lit { color: #000;} /* literal */
+pre .pun { color: #000 }    /* punctuation */
+pre .pln { color: #000 }    /* plaintext */
+pre .tag { color: #861681;} /* html/xml tag */
+pre .atn { color: #C5680C;} /* attribute name */
+pre .atv { color: #221AA6;} /* attribute value */
+pre .dec { color: #1F00FF; } /* decimal */
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0; 
+color: #333; } 
+/* IE indents via margin-left */
+li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
+ list-style-type: none }
+/* Alternate shading for lines */
+li.L1,li.L3,li.L5,li.L7,li.L9 {background: #eee;}

themes/desert.css

@@ -0,0 +1,36 @@
+/* desert scheme ported from vim to google prettify */
+/* modified to work with http://github.mnewton.com/prettify-wrapper */
+
+pre.prettyprint, code.prettyprint { display: block; background-color: #333 }
+pre .nocode { background-color: none; color: #000 }
+pre .str { color: #ffa0a0 } /* string  - pink */
+pre .kwd { color: #f0e68c; font-weight: bold }
+pre .com { color: #87ceeb } /* comment - skyblue */
+pre .typ { color: #98fb98 } /* type    - lightgreen */
+pre .lit { color: #cd5c5c } /* literal - darkred */
+pre .pun { color: #fff }    /* punctuation */
+pre .pln { color: #fff }    /* plaintext */
+pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
+pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
+pre .atv { color: #ffa0a0 } /* attribute value - pink */
+pre .dec { color: #98fb98 } /* decimal         - lightgreen */
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
+li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,li.L3,li.L5,li.L7,li.L9 { }
+
+@media print {
+  pre.prettyprint, code.prettyprint { background-color: none }
+  pre .str, code .str { color: #060 }
+  pre .kwd, code .kwd { color: #006; font-weight: bold }
+  pre .com, code .com { color: #600; font-style: italic }
+  pre .typ, code .typ { color: #404; font-weight: bold }
+  pre .lit, code .lit { color: #044 }
+  pre .pun, code .pun { color: #440 }
+  pre .pln, code .pln { color: #000 }
+  pre .tag, code .tag { color: #006; font-weight: bold }
+  pre .atn, code .atn { color: #404 }
+  pre .atv, code .atv { color: #060 }
+}

themes/prettify.css

@@ -1 +1,53 @@
-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
+/* Pretty printing styles. Used with prettify.js. */
+/* modified to work with http://github.mnewton.com/prettify-wrapper */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 }  /* plain text */
+
+@media screen {
+  .str { color: #080 }  /* string content */
+  .kwd { color: #008 }  /* a keyword */
+  .com { color: #800 }  /* a comment */
+  .typ { color: #606 }  /* a type name */
+  .lit { color: #066 }  /* a literal value */
+  /* punctuation, lisp open bracket, lisp close bracket */
+  .pun, .opn, .clo { color: #660 }
+  .tag { color: #008 }  /* a markup tag name */
+  .atn { color: #606 }  /* a markup attribute name */
+  .atv { color: #080 }  /* a markup attribute value */
+  .dec, .var { color: #606 }  /* a declaration; a variable name */
+  .fun { color: red }  /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str { color: #060 }
+  .kwd { color: #006; font-weight: bold }
+  .com { color: #600; font-style: italic }
+  .typ { color: #404; font-weight: bold }
+  .lit { color: #044 }
+  .pun, .opn, .clo { color: #440 }
+  .tag { color: #006; font-weight: bold }
+  .atn { color: #404 }
+  .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint, code.prettyprint { padding: 2px; border: 1px solid #888 }
+
+/* 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.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }

themes/tomorrow-night-eighties-mnewt.css → themes/tomorrow-night-eighties.css

@@ -2,6 +2,9 @@
 /* Original theme - https://github.com/chriskempson/tomorrow-theme */
 /* Pretty printing styles. Used with prettify.js. */
 /* SPAN elements with the classes below are added by prettyprint. */
+/* source: http://jmblog.github.com/color-themes-for-google-code-prettify */
+/* modified to work with http://github.mnewton.com/prettify-wrapper */
+
 /* plain text */
 .pln {
   color: #cccccc; }
@@ -17,7 +20,8 @@
 
   /* a comment */
   .com {
-    color: #999999; }
+    color: #999999; 
+    font: inherit; }
 
   /* a type name */
   .typ {
@@ -95,14 +99,16 @@
   .atv {
     color: #060; } }
 /* Style */
-pre.prettyprint {
+pre.prettyprint, code.prettyprint {
   background: #2d2d2d;
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 12px;
-  border: 1px solid #ccc; 
-  text-shadow: 0px;
+  font-weight: bold;
+  border: 1px solid #2d2d2d;
+  text-shadow: 1px;
   line-height: 1.5;
-  padding: 10px; }
+  padding: 10px; 
+  }
 
 /* Specify class=linenums on a pre to get line numbering */
 ol.linenums {

themes/tomorrow-night-mnewt.css → themes/tomorrow-night.css

@@ -2,8 +2,10 @@
 /* Original theme - https://github.com/chriskempson/tomorrow-theme */
 /* Pretty printing styles. Used with prettify.js. */
 /* SPAN elements with the classes below are added by prettyprint. */
-/* plain text */
+/* source: http://jmblog.github.com/color-themes-for-google-code-prettify */
+/* modified to work with http://github.mnewton.com/prettify-wrapper */
 
+/* plain text */
 .pln {
   color: #c5c8c6; }
 
@@ -96,11 +98,12 @@
   .atv {
     color: #060; } }
 /* Style */
-pre.prettyprint {
+pre.prettyprint, code.prettyprint {
   background: #1d1f21;
   /* font-family: Menlo, Monaco, Consolas, monospace; */
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 12px;
+  font-weight: bold;
   line-height: 1.5;
   border: 1px solid #ccc;
   text-shadow: 0px;