From c9c98c6d9b50c6e2d2a2b7d96d66b2a1ee840dd9 Mon Sep 17 00:00:00 2001
From: Tim Hoffmann <2836374+timhoffm@users.noreply.github.com>
Date: Sun, 20 Oct 2019 16:06:24 +0200
Subject: [PATCH] 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.
---
codesamples/factories.py | 79 +++++++++++++++++++++-------------------
static/sass/style.css | 4 +-
2 files changed, 45 insertions(+), 38 deletions(-)
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'\1'),
+ (r'^(>>>)', r'\1'),
+ (r'^(\.\.\.)', r'\1'),
+ (r'(#.*)$', r''),
+ ]:
+ code = re.sub(pattern, repl, code, flags=re.MULTILINE)
+ return f'{code}
'
+
code_samples = [
(
- """\
-
+ r"""
+ # Simple output (with Unicode)
>>> print("Hello, I'm Python!")
- Hello, I'm Python!
+ Hello, I'm Python!
-
+ # Input, assignment
>>> name = input('What is your name?\n')
- What is your name?
- Python
- >>> print(f'Hi, {name}.')
- Hi, Python.
-
+ >>> print('Hi, %s.' % name)
+ What is your name?
+ Python
+ Hi, Python.
""",
"""\
Quick & Easy to Learn
@@ -48,16 +60,16 @@ def initial_data():
"""
),
(
- """\
-
+ """
+ # Simple arithmetic
>>> 1 / 2
- 0.5
+ 0.5
>>> 2 ** 3
- 8
- >>> 17 / 3
- 5.666666666666667
- >>> 17 // 3
- 5
+ 8
+ >>> 17 / 3 # true division returns a float
+ 5.666666666666667
+ >>> 17 // 3 # floor division
+ 5
""",
"""\
Intuitive Interpretation
@@ -71,16 +83,16 @@ def initial_data():
"""
),
(
- """\
-
+ """
+ # List comprehensions
>>> fruits = ['Banana', 'Apple', 'Lime']
>>> loud_fruits = [fruit.upper() for fruit in fruits]
>>> print(loud_fruits)
- ['BANANA', 'APPLE', 'LIME']
+ ['BANANA', 'APPLE', 'LIME']
-
+ # List and the enumerate function
>>> list(enumerate(fruits))
- [(0, 'Banana'), (1, 'Apple'), (2, 'Lime')]
+ [(0, 'Banana'), (1, 'Apple'), (2, 'Lime')]
""",
"""\
Compound Data Types
@@ -92,19 +104,15 @@ def initial_data():
"""
),
(
- """\
-
-
-
+ """
+ # For loop on a list
>>> numbers = [2, 4, 6, 8]
>>> product = 1
>>> for number in numbers:
... product = product * number
...
>>> print('The product is:', product)
- The product is: 384
-
-
+ The product is: 384
""",
"""\
All the Flow You’d Expect
@@ -117,10 +125,8 @@ def initial_data():
"""
),
(
- """\
-
-
-
+ """
+ # Write Fibonacci series up to n
>>> def fib(n):
>>> a, b = 0, 1
>>> while a < n:
@@ -128,9 +134,7 @@ def initial_data():
>>> a, b = b, a+b
>>> print()
>>> fib(1000)
- 0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610
-
-
+ 0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610
""",
"""\
Functions Defined
@@ -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; }