Add syntax highlighting

BTW, my editor also normalized all line endings and removed trailing whitespace in the stylesheet.
ferrante · Sep 17, 2012 · 539e0c9 · 539e0c9
1 parent a7c8bd2
commit 539e0c9
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 21 deletions.
diff --git a/css/main.css b/css/main.css
@@ -52,15 +52,15 @@ body {
     background: #f5f5f5;
     color: #333;
     font-family:"Proxima Nova Regular", 'Helvetica Neue', Arial, Helvetica, sans-serif;
-    font-size-adjust: 0.488; 
-    font-weight: normal; 
+    font-size-adjust: 0.488;
+    font-weight: normal;
     font-style: normal;
 }
 
 h1, h2, h3, h4, h5, h6, .tip-counter {
-    font-family: "Museo 900", Verdana, serif; 
-    font-size-adjust: 0.52; 
-    font-weight: 900; 
+    font-family: "Museo 900", Verdana, serif;
+    font-size-adjust: 0.52;
+    font-weight: 900;
     font-style: normal;
 }
 
@@ -95,15 +95,18 @@ article pre {
     overflow: auto;
 }
 
-article pre code {
-    display: inline-block;
-    width: 100%;
+article code {
     font-family: "Monaco", Courier new, Arial, Helvetica, sans-serif;
     color: #1f1f1f;
     font-size: 13px;
     font-weight: normal;
 }
 
+article pre code {
+    display: inline-block;
+    width: 100%;
+}
+
 article {
     width: 580px;
     border: 1px solid #fff;
@@ -131,7 +134,7 @@ article p {
 }
 
 article h1 {
-    font-size: 24px; 
+    font-size: 24px;
     line-height: 22px;
     margin-bottom: 30px;
     color: #262625;
@@ -159,7 +162,7 @@ article header .author a {
     margin-bottom: 60px;
     margin-top: 45px;
     margin-left: 30px;
-    
+
 }
 
 .page-header h2 {
@@ -255,28 +258,28 @@ ul.twitter-recommendations li {
         width: 480px;
         overflow: hidden;
     }
-    
+
     #container, #content, .articles, .page-header {
         width: 470px;
     }
-    
+
     article {
         width: 410px;
     }
-    
+
     .sidebar {
         float: none;
         clear: none;
         width: 410px;
         padding-left: 30px;
     }
-    
+
     .sidebar ul li {
         display: inline-block;
         padding-bottom: 10px;
         margin-right: 10px;
     }
-    
+
     .tip-counter {
         display: none;
     }
@@ -287,29 +290,93 @@ ul.twitter-recommendations li {
         width: 320px;
         overflow: hidden;
     }
-    
+
     #container, #content, .articles, .page-header {
         width: 310px;
     }
-    
+
     article {
         width: 250px;
     }
-    
+
     .sidebar {
         float: none;
         clear: none;
         width: 250px;
         padding-left: 30px;
     }
-    
+
     .sidebar ul li {
         display: inline-block;
         padding-bottom: 10px;
         margin-right: 10px;
     }
-    
+
     .tip-counter {
         display: none;
     }
+}
+
+
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  	color: slategray;
+}
+
+.token.punctuation {
+  	color: #999;
+}
+
+.namespace {
+  	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number {
+  	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string {
+  	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  	color: #a67f59;
+  	background: hsla(0,0%,100%,.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  	color: #07a;
+}
+
+
+.token.regex,
+.token.important {
+  	color: #e90;
+}
+
+.token.important {
+  	font-weight: bold;
+}
+
+.token.entity {
+  	cursor: help;
 }
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
         <link href="css/main.css" type="text/css" rel="stylesheet">
         <title>JavaScript.pl - naucz się JavaScriptu!</title>
     </head>
-    <body>
+    <body class="language-javascript">
         <div id="wrapper">
             <div id="container">
                 <div id="content">
@@ -151,6 +151,7 @@ <h1>Tworzenie tablic i obiektów</h1>
                 </div>
             </div>
         </div>
+        <script src="js/prism.js"></script>
         <script type="text/javascript">
 
           var _gaq = _gaq || [];

diff --git a/js/prism.js b/js/prism.js