Permalink
Browse files

modified index, README, and night themes

  • Loading branch information...
1 parent fa2fdfe commit 60899bff42dea6a78849ba8030111efdf7dd9ac2 @mnewt committed Aug 9, 2012
Showing with 31 additions and 67 deletions.
  1. +21 −8 README.md
  2. +0 −50 demo.html
  3. +6 −6 index.html
  4. +2 −1 themes/tomorrow-night-eighties-mnewt.css
  5. +2 −2 themes/tomorrow-night-mnewt.css
View
29 README.md
@@ -1,40 +1,53 @@
google-code-prettify wrapper
=======================
-This repository serves up google prettify. It allows you to add code highlighting to any page without hosting any files. It has no external dependencies--just pure javascript.
+This repository provides a quick and clean way to add code syntax highlighting to any web page. You do not need to host any files to do so. It has no external dependencies and is written in pure javascript. It should work on any blog platform, such as WordPress, Tumblr, or Blogger.
+# Problem
+
+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.
+
+# 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.
# Directions
-**ONE**: copy the code in `reference.html` into your web page, at the end of the file right before `</body>`
+###ONE:
+Copy the code in below into your web page, at the end of the file right before `</body>`.
The end of your html template should look like this:
```html
<!-- ======================= Begin Prettify ============================-->
<link rel="stylesheet" type="text/css" rel="stylesheet"
- href="http://mnewt.github.com/prettify-wrapper/themes/prettify.css">
+ href="http://github.mnewton.com/prettify-wrapper/themes/prettify.css">
<script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/google-code-prettify/src/prettify.js">
+ src="http://github.mnewton.com/prettify-wrapper/google-code-prettify/src/prettify.js">
</script>
<script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/styleCode.js"></script>
+ src="http://github.mnewton.com/prettify-wrapper/styleCode.js"></script>
<!-- ======================== End Prettify =============================-->
</body>
</html>
```
-**TWO**: (optional): customize the theme by pointing the first line to a different CSS file, such as this one:
+
+###TWO (optional:)
+Customize the theme by pointing the first line to a different CSS file, such as this one:
https://raw.github.com/mnewt/prettify-wrapper/master/tomorrow-night-mnewt.css
# Themes
-There are a few themes included in the package itself:
+There are a few themes included in the google-code-prettify package itself:
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, here are some themes hosted here. They are slightly modified versions of the ones found above.
+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
View
50 demo.html
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-<body>
-
-<h1>There is some code below for demonstration purposes:</h1>
-
-<pre>
-<code>
-function hasClass(el, name) {
- return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
-}
-
-function addClass(el, name)
-{
- if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
-}
-
-function styleCode()
-{
- if (typeof disableStyleCode != "undefined")
- {
- return;
- }
- var a = false;
- var matches = document.body.getElementsByTagName("pre");
- for (var i = 0; i < matches.length; ++i)
- {
- addClass(matches[i], "prettyprint");
- a = true;
- }
- if (a) { prettyPrint() }
-}
-
-
-window.onload = function() { styleCode(); };
-</code>
-</pre>
-
-<!-- ======================= Begin Prettify ============================-->
- <link rel="stylesheet" type="text/css" rel="stylesheet"
- href="http://mnewt.github.com/prettify-wrapper/themes/prettify.css">
- <script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/google-code-prettify/src/prettify.js">
- </script>
- <script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/styleCode.js"></script>
-<!-- ======================== End Prettify =============================-->
-
-</body>
-</html>
View
12 index.html
@@ -38,12 +38,12 @@ <h2 id="project_tagline">Wraps Google Prettify into a nice little bow for easy i
<pre><code>&lt;!-- ======================= Begin Prettify ============================--&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;
- href=&quot;http://mnewt.github.com/prettify-wrapper/themes/prettify.css&quot;&gt;
+ href=&quot;http://github.mnewton.com/prettify-wrapper/themes/prettify.css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;
- src=&quot;http://mnewt.github.com/prettify-wrapper/google-code-prettify/src/prettify.js&quot;&gt;
+ src=&quot;http://github.mnewton.com/prettify-wrapper/google-code-prettify/src/prettify.js&quot;&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
- src=&quot;http://mnewt.github.com/prettify-wrapper/styleCode.js&quot;&gt;&lt;/script&gt;
+ src=&quot;http://github.mnewton.com/prettify-wrapper/styleCode.js&quot;&gt;&lt;/script&gt;
&lt;!-- ======================== End Prettify =============================--&gt;
</code></pre>
@@ -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://mnewt.github.com/prettify-wrapper/themes/prettify.css">
+ href="http://github.mnewton.com/prettify-wrapper/themes/tomorrow-mnewt.css">
<script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/google-code-prettify/src/prettify.js">
+ src="http://github.mnewton.com/prettify-wrapper/google-code-prettify/src/prettify.js">
</script>
<script type="text/javascript"
- src="http://mnewt.github.com/prettify-wrapper/styleCode.js"></script>
+ src="http://github.mnewton.com/prettify-wrapper/styleCode.js"></script>
<!-- ======================== End Prettify =============================-->
</body>
View
3 themes/tomorrow-night-eighties-mnewt.css
@@ -99,7 +99,8 @@ pre.prettyprint {
background: #2d2d2d;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
- border: 0px solid #ccc;
+ border: 1px solid #ccc;
+ text-shadow: 0px;
line-height: 1.5;
padding: 10px; }
View
4 themes/tomorrow-night-mnewt.css
@@ -102,8 +102,8 @@ pre.prettyprint {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 1.5;
- /* border: 1px solid #ccc; */
- border: 0px solid #ccc;
+ border: 1px solid #ccc;
+ text-shadow: 0px;
padding: 10px; }
/* Specify class=linenums on a pre to get line numbering */

0 comments on commit 60899bf

Please sign in to comment.