Permalink
Browse files

heavily modified themes, added new ones

  • Loading branch information...
1 parent 60899bf commit d698362c4edec39ddb1a0885e8a8198d653bbfe9 @mnewt committed Aug 10, 2012
View
@@ -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
View
@@ -91,12 +91,12 @@ <h2 id="project_tagline">Wraps Google Prettify into a nice little bow for easy i
<!-- ======================= 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>
View
@@ -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");
@@ -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,
View
@@ -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;}
View
@@ -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 }
+}
View
@@ -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 }
@@ -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 {
@@ -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;
File renamed without changes.

0 comments on commit d698362

Please sign in to comment.