diff --git a/codesamples/factories.py b/codesamples/factories.py
index 5a52b9738..ed3e2b3a5 100644
--- a/codesamples/factories.py
+++ b/codesamples/factories.py
@@ -1,3 +1,4 @@
+import re
 import textwrap
 
 import factory
@@ -23,20 +24,31 @@ class Meta:
 
 
 def initial_data():
+    def format_html(code):
+        """Add HTML tags for highlighting of the given code snippet."""
+        code = code.strip()
+        for pattern, repl in [
+            (r'^([^\s\.>#].*)$', r'<span class="output">\1</span>'),
+            (r'^(>>>)', r'<span class="code-prompt">\1</span>'),
+            (r'^(\.\.\.)', r'<span class="code-prompt">\1</span>'),
+            (r'(#.*)$', r'<span class="comment">\1</span>'),
+        ]:
+            code = re.sub(pattern, repl, code, flags=re.MULTILINE)
+        return f'<pre><code>{code}</code></pre>'
+
     code_samples = [
         (
-            """\
-            <pre><code><span class=\"comment\"># Simple output (with Unicode)</span>
+            r"""
+            # Simple output (with Unicode)
             >>> print("Hello, I'm Python!")
-            <span class=\"output\">Hello, I'm Python!</span>
+            Hello, I'm Python!
 
-            <span class=\"comment\"># Input, assignment</span>
+            # Input, assignment
             >>> name = input('What is your name?\n')
-            <span class=\"output\">What is your name?
-            Python</span>
-            >>> print(f'Hi, {name}.')
-            <span class=\"output\">Hi, Python.</span></code>
-            </pre>
+            >>> print('Hi, %s.' % name)
+            What is your name?
+            Python
+            Hi, Python.
             """,
             """\
             <h1>Quick &amp; Easy to Learn</h1>
@@ -48,16 +60,16 @@ def initial_data():
             """
         ),
         (
-            """\
-            <pre><code><span class=\"comment\"># Simple arithmetic</span>
+            """
+            # Simple arithmetic
             >>> 1 / 2
-            <span class=\"output\">0.5</span>
+            0.5
             >>> 2 ** 3
-            <span class=\"output\">8</span>
-            >>> 17 / 3  <span class=\"comment\"># true division returns a float</span>
-            <span class=\"output\">5.666666666666667</span>
-            >>> 17 // 3  <span class=\"comment\"># floor division</span>
-            <span class=\"output\">5</span></code></pre>
+            8
+            >>> 17 / 3  # true division returns a float
+            5.666666666666667
+            >>> 17 // 3  # floor division
+            5
             """,
             """\
             <h1>Intuitive Interpretation</h1>
@@ -71,16 +83,16 @@ def initial_data():
             """
         ),
         (
-            """\
-            <pre><code><span class=\"comment\"># List comprehensions</span>
+            """
+            # List comprehensions
             >>> fruits = ['Banana', 'Apple', 'Lime']
             >>> loud_fruits = [fruit.upper() for fruit in fruits]
             >>> print(loud_fruits)
-            <span class=\"output\">['BANANA', 'APPLE', 'LIME']</span>
+            ['BANANA', 'APPLE', 'LIME']
 
-            <span class=\"comment\"># List and the enumerate function</span>
+            # List and the enumerate function
             >>> list(enumerate(fruits))
-            <span class=\"output\">[(0, 'Banana'), (1, 'Apple'), (2, 'Lime')]</span></code></pre>
+            [(0, 'Banana'), (1, 'Apple'), (2, 'Lime')]
             """,
             """\
             <h1>Compound Data Types</h1>
@@ -92,19 +104,15 @@ def initial_data():
             """
         ),
         (
-            """\
-            <pre>
-            <code>
-            <span class=\"comment\"># For loop on a list</span>
+            """
+            # For loop on a list
             >>> numbers = [2, 4, 6, 8]
             >>> product = 1
             >>> for number in numbers:
             ...     product = product * number
             ...
             >>> print('The product is:', product)
-            <span class=\"output\">The product is: 384</span>
-            </code>
-            </pre>
+            The product is: 384
             """,
             """\
             <h1>All the Flow You&rsquo;d Expect</h1>
@@ -117,10 +125,8 @@ def initial_data():
             """
         ),
         (
-            """\
-            <pre>
-            <code>
-            <span class=\"comment\"># Write Fibonacci series up to n</span>
+            """
+            # Write Fibonacci series up to n
             >>> def fib(n):
             >>>     a, b = 0, 1
             >>>     while a &lt; n:
@@ -128,9 +134,7 @@ def initial_data():
             >>>         a, b = b, a+b
             >>>     print()
             >>> fib(1000)
-            <span class=\"output\">0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610</span>
-            </code>
-            </pre>
+            0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610
             """,
             """\
             <h1>Functions Defined</h1>
@@ -145,7 +149,8 @@ def initial_data():
     return {
         'boxes': [
             CodeSampleFactory(
-                code=textwrap.dedent(code), copy=textwrap.dedent(copy),
+                code=format_html(textwrap.dedent(code)),
+                copy=textwrap.dedent(copy),
             ) for code, copy in code_samples
         ],
     }
diff --git a/static/sass/style.css b/static/sass/style.css
index a58863817..27de8afbe 100644
--- a/static/sass/style.css
+++ b/static/sass/style.css
@@ -405,7 +405,7 @@ form, .header-banner, .success-stories-widget .quote-from {
 .slides,
 .flex-control-nav,
 .flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
-/* FlexSlider Necessary Styles 
+/* FlexSlider Necessary Styles
 .flexslider {margin: 0; padding: 0;}
 .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping 
 .flexslider .slides img {width: 100%; display: block;}
@@ -1640,6 +1640,8 @@ input#s,
       color: #666; }
     .slide-code code .output {
       color: #ddd; }
+    .slide-code code .code-prompt {
+      color: #c65d09; }
 
 .js .launch-shell, .no-js .launch-shell {
   display: none; }