Show line numbers

Author: natanfelles

src/pages/_template.php

@@ -99,23 +99,45 @@
 			min-width: 30px;
 			display: inline-block;
 			text-indent: 0;
-
+		}
+		pre, code,
+		.file-code .lines span  {
+			margin: 0;
+			font-family: "Fira Mono", "Source Code Pro", monospace;
+			font-weight: 400;
+			font-size: 1rem;
+			line-height: 1.5rem;
+			-moz-tab-size: 4;
+			-o-tab-size: 4;
+			tab-size: 4;
 		}
 		.file-code {
 			border: 1px gray solid;
-			padding: 1%;
+			padding: 0;
 			background: #fff;
 			overflow-x: auto;
-			width: 98%;
+			width: 100%;
 			margin: 0 auto;
-			white-space: pre;
-			word-wrap: break-word;
-			-moz-tab-size: 4;
-			-o-tab-size: 4;
-			tab-size: 4;
 		}
-		.file-code code {
-			 white-space: normal;
+		.file-code > * {
+			float: left;
+		}
+		.file-code .lines {
+			background: #e6e6e6;
+			border-right: 1px gray solid;
+			padding: 0 5px;
+			min-width: 20px;
+		}
+		.file-code .lines span {
+			display: block;
+			line-height: 1.595rem;
+		}
+		.file-code .code {
+			width: 800px;
+			padding-left: 5px;
+		}
+		.file-code .code span {
+			white-space: pre;
 		}
 		.date {
 			float: right;

src/pages/show-file.php

@@ -1,8 +1,20 @@
 <?php
 $contents = file_get_contents($absolute_path);
-$contents = substr($absolute_path, -3) === 'php'
-	? highlight_string($contents, true)
-	: htmlentities($contents);
+if (substr($absolute_path, -3) === 'php') {
+	$contents = highlight_string($contents, true);
+	$contents = strtr($contents, [PHP_EOL => '', '&nbsp;' => ' ']);
+	$contents = str_replace(['<br>', '<br />'],"\n",$contents);
+} else {
+	$contents =  '<pre>' . htmlentities($contents) . '</pre>';
+}
+
 $function_parent_dir($relative_path);
 ?>
-<div class="file-code"><?= $contents ?></div>
+<div class="file-code">
+	<div class="lines"><?php
+		foreach (explode("\n", $contents) as $line => $c) {
+			echo '<span>' . ($line + 1) . '</span>';
+		}
+	?></div>
+	<div class="code"><?= $contents ?></div>
+</div>