Reflow: Code snippet indentation examples

Example 1: Python code snippet

With Python, indentation and new lines have meaning. This example adjusts indentation width at different breakpoints to maintain indentation, while ensuring more, characters can be seen within a 320px wide viewport. Code lines do not wrap, as that could lead some to believe a new line has started, which would be invalid.

def complex_function(x):
	if x > 0:
		for i in range(x):
			if i % 2 == 0:
				print(f"{i} is even")
				for a in range(i):
					if a % 5 == 0:
						print(f"  {a} can be divided by 5")
					else:
						print(f"  {a} cannot be divided by 5")
			else:
				print(f"{i} is odd")
				for a in range(i):
					if a % 2 == 0:
						print(f"  {a} is even")
					else:
						print(f"  {a} is odd")
	else:
		print("x is not a positive number")

Example 3: HTML markup nesting

The following code example demonstrates the use of indentation to convey the nesting of elements in an HTML document. Similar to the previous Python example, the indentation width adjusts at different breakpoints. But unlike Python, HTML doesn't have strict syntax concerning new lines or indentation. So, this example provides a button to allow text to wrap, if the user would prefer that presentation.

<html lang=en>
	<head>...</head>
	<body>
		<div id=app>
			<header>
				<!-- header content here, Such as logo, primary navigation, search field, etc. -->
			</header>
			<main>
				<!-- main content here, Such as headings to introduce the primary content of the page, and related sub-headings and sections. -->
			</main>
			<aside>
				<!-- aside content here. Tangentially related content. Adverts. Links to other related pages. -->
			</aside>
			<footer>
				<!-- footer content here. Copyright info, globally repeating company links and disclaimers. -->
			</footer>
		</div>
	</body>
</html>