Improve highlighting of code samples

Add highlighting for the prompt marker in the code samples. Refactor the html formatting so that the html tags are automatically generated and don't have to be written manually in the code samples sources.
python · Sep 12, 2024 · c9c98c6 · c9c98c6
1 parent e89f46d
commit c9c98c6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 38 deletions.
diff --git 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,20 +125,16 @@ 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:
             >>>         print(a, end=' ')
             >>>         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
@@ -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; }