Add syntax highlighting support

Author: karanveerm

README.md

@@ -1,17 +1,17 @@
 # Quizgen: Html Quiz Generator
 
-Description: Dead simple way to create HTML quizzes with LaTeX support. Can be used to generate quizzes like: http://stanford.edu/~kvmohan/quizgen/sample.html. Problems with multiple correct answers are supported and images can also be embedded. Tested with Python 2.6/2.7. Shoot me an email at kvmohan [at] stanford [dot] edu if it doesn't work for newer versions.
+Description: Dead simple way to create HTML quizzes with LaTeX support and code highlighting. Can be used to generate quizzes like: http://stanford.edu/~kvmohan/quizgen/sample.html. Problems with multiple correct answers are supported and images can also be embedded. Tested with Python 2.6/2.7. Shoot me an email at karanveer.1992 [at] gmail [dot] com if it doesn't work for newer versions.
 
 ## Table of Contents
-[Setup](#setup)   
-[Quiz Structure](#structure)   
-[Creating Quizzes](#create)   
-[Samples](#samples)   
-[Getting Started](#start)   
-[Feature Requests / Contributing changes / Issues](#issues)   
-[FAQ](#faq)   
-[Credits](#credits)   
-[MIT License](#license)   
+[Setup](#setup)
+[Quiz Structure](#structure)
+[Creating Quizzes](#create)
+[Samples](#samples)
+[Getting Started](#start)
+[Feature Requests / Contributing changes / Issues](#issues)
+[FAQ](#faq)
+[Credits](#credits)
+[MIT License](#license)
 
 <a name="setup"/>
 ## Project Setup
@@ -20,8 +20,8 @@ How do I start using Quizgen?
 
 1. Copy over the file [quizgen.py](https://raw.githubusercontent.com/karanveerm/quizgen/master/quizgen.py).
 2. Everything you need is in the file!
-3. Run `python quizgen.py` to get help on usage. 
-4. You might want to alias it or `sudo cp quizgen.py /usr/bin/quizgen` so you can simply type in quizgen. 
+3. Run `python quizgen.py` to get help on usage.
+4. You might want to alias it or `sudo cp quizgen.py /usr/bin/quizgen` so you can simply type in quizgen.
 5. Remember to `sudo chmod +x /usr/bin/quizgen` to make the file executable.
 
 <a name="structure"/>
@@ -46,8 +46,14 @@ This is the statement for problem group one.
 You can add a link to websites like this: ||LINK: http://www.google.com||.
 You can add images like this:
 ||IMG:http://upload.wikimedia.org/wikipedia/commons/9/9b/Carl_Friedrich_Gauss.jpg||
-The image source can either be a local path, or some URL. Images can be embedded
+The image source can either be a local path, or some web URL. Images can be embedded
 anywhere: within problem groups, problems or options.
+It also supports syntax highlighting like this:
+||CODE:java:
+int a = 2;
+int b = 3;
+System.out.println(a + b);
+||
 Quizgen supports LaTeX:
 \[
 a = \begin{pmatrix} 1 \\ 3 \\ 2 \end{pmatrix} , \quad
@@ -58,8 +64,8 @@ A blank line marks the end of this problem group introduction text and the
 beginning of the first problem.
 
 This is the first problem in the problem group with some LaTeX: $a_3$.
-* This is an option. :: You can add an explanation for an option after the double
-colon to explain why it is correct/incorrect.
+* This is an option. :: You can add an explanation for an option after the double colon to explain
+why it is correct/incorrect.
 * This is another option. Observe that explanations are optional.
 *= This option is the correct option since it is marked with an equal to sign.
 
@@ -75,10 +81,10 @@ x=Zy + a - c.
 You can also have problems with multiple correct responses.
 Students will be asked to select all that apply, and then submit their
 responses.
-*= Option 1.
+*= Option 1. :: This is an explanation.
 * Option 2.
 * Option 3.
-*= Option 4. :: This is another correct option.
+*= Option 4.
 
 []
 This problem group has no title and has no introduction.
@@ -111,19 +117,19 @@ sample.quiz is a great place to get started. A list of samples can also be found
 
 - Feel free to make a pull request; I'll review the code and merge.
 - Or just file an issue.
-- Alternatively, email kvmohan [at] stanford [dot] edu and I'll try to help you ASAP!
+- Alternatively, email karanveer.1992 [at] gmail [dot] com and I'll try to help you ASAP!
 
 <a name="faq"/>
 ## FAQ
 
 1. Can we keep track of how students perform on the quizzes?
 
    No. Quizgen generates quizzes that are only for self-assessment; it does not support logging of responses.
-   
+
 2. Why did you work on this?
 
    I was hoping to create simple, lightweight method for instructors to generate quizzes that can be easily incorporated into a course website, allowing students to quickly get some feedback on how well they understand the basic material in a class.
-   
+
 <a name="credits"/>
 ## Credits
 Designed and implemented by Karanveer Mohan, with design input from [Stephen Boyd](http://www.stanford.edu/~boyd/) and [Karthik Viswanathan](http://www.karthikv.net/). Partly based on a simple quiz generator developed by Eric Chu, that was used in Stanford’s EE263 and EE364a classes since 2012, but was never made public.

quizgen.py

@@ -417,6 +417,11 @@ def add_dom_to_template(dom, html_file_name, quiz):
   # For the links
   content = re.sub('\|\|LINK:\s?(\S+)\|\|', r'<a href="\1">\1</a>', content)
 
+  # For code blocks
+  content = re.sub('\|\|CODE:(\S+):\s?(.*?)\|\|', r'<pre><code class="\1">\2</pre></code>', content,
+                   flags=re.DOTALL)
+
+
   generated_file.write(content)
   generated_file.close()
 
@@ -553,6 +558,9 @@ def main():
       });
     </script>
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js"></script>
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
 
     <script type="text/javascript">
     $(document).ready(function(){

sample.html

@@ -3,7 +3,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Sample Quiz Title</title>
+    <title>Quiz</title>
     <link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Alike' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="quiz.css" type="text/css" />
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@@ -16,6 +16,9 @@
       });
     </script>
     <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML.js"></script>
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
 
     <script type="text/javascript">
     $(document).ready(function(){
@@ -71,6 +74,11 @@ <h1>Sample Quiz Title</h1>
 <div><img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Carl_Friedrich_Gauss.jpg"></div>
 The image source can either be a local path, or some web URL. Images can be embedded
 anywhere: within problem groups, problems or options.
+It also supports syntax highlighting like this:
+<pre><code class="java">int a = 2;
+int b = 3;
+System.out.println(a + b);
+</pre></code>
 Quizgen supports LaTeX:
 \[
 a = \begin{pmatrix} 1 \\ 3 \\ 2 \end{pmatrix} , \quad
@@ -79,6 +87,7 @@ <h1>Sample Quiz Title</h1>
 \]
 A blank line marks the end of this problem group introduction text and the
 beginning of the first problem.</div>
+		<hr/>
 		<div>
 			<div class="description">
 This is the first problem in the problem group with some LaTeX: $a_3$.</div>
@@ -144,14 +153,14 @@ <h1>Sample Quiz Title</h1>
 					<span class="multiple-selection">Option 1. </span>
 					<span class="correct-checkbox">✓</span>
 					<span class="incorrect-checkbox">✗</span>
-					<div class="response right">This option is correct.  This option is correct.</div>
+					<div class="response right">This option is correct.  This is an explanation.</div>
 				</label>
 				<label>
 					<input type="checkbox"/>
-					<span class="multiple-selection">Option 2. </span>
+					<span class="multiple-selection">Option 2.</span>
 					<span class="correct-checkbox">✓</span>
 					<span class="incorrect-checkbox">✗</span>
-					<div class="response wrong">This option is incorrect.  This option is not correct.</div>
+					<div class="response wrong">This option is incorrect. </div>
 				</label>
 				<label>
 					<input type="checkbox"/>
@@ -162,10 +171,10 @@ <h1>Sample Quiz Title</h1>
 				</label>
 				<label>
 					<input type="checkbox"/>
-					<span class="multiple-selection">Option 4. </span>
+					<span class="multiple-selection">Option 4.</span>
 					<span class="correct-checkbox">✓</span>
 					<span class="incorrect-checkbox">✗</span>
-					<div class="response right">This option is correct.  This is another correct option.</div>
+					<div class="response right">This option is correct. </div>
 				</label>
 				<button>Submit</button>
 			</div>

sample.quiz

@@ -6,6 +6,12 @@ You can add images like this:
 ||IMG:http://upload.wikimedia.org/wikipedia/commons/9/9b/Carl_Friedrich_Gauss.jpg||
 The image source can either be a local path, or some web URL. Images can be embedded
 anywhere: within problem groups, problems or options.
+It also supports syntax highlighting like this:
+||CODE:java:
+int a = 2;
+int b = 3;
+System.out.println(a + b);
+||
 Quizgen supports LaTeX:
 \[
 a = \begin{pmatrix} 1 \\ 3 \\ 2 \end{pmatrix} , \quad
@@ -32,10 +38,10 @@ x=Zy + a - c.
 You can also have problems with multiple correct responses.
 Students will be asked to select all that apply, and then submit their
 responses.
-*= Option 1. :: This option is correct.
-* Option 2. :: This option is not correct.
+*= Option 1. :: This is an explanation.
+* Option 2.
 * Option 3.
-*= Option 4. :: This is another correct option.
+*= Option 4.
 
 []
 This problem group has no title and has no introduction. When the text following the start of a new problem group is immediately followed by the options, it is inferred to be a problem.