diff --git a/src/git.rs b/src/git.rs
index 65d5fc2..95c6259 100644
--- a/src/git.rs
+++ b/src/git.rs
@@ -4,6 +4,7 @@ use std::{
     path::{Path, PathBuf},
     sync::Arc,
     time::Duration,
+    fmt::Write,
 };
 
 use arc_swap::ArcSwapOption;
@@ -580,7 +581,7 @@ fn format_file(content: &[u8], extension: &str, syntax_set: &SyntaxSet) -> Strin
             .unwrap();
     }
 
-    html_generator.finalize()
+    format!("<code>{}</code>", html_generator.finalize().replace('\n', "</code>\n<code>"))
 }
 
 #[instrument(skip(diff, syntax_set))]
@@ -588,14 +589,14 @@ fn format_diff(diff: &git2::Diff<'_>, syntax_set: &SyntaxSet) -> String {
     let mut diff_output = String::new();
 
     diff.print(DiffFormat::Patch, |delta, _diff_hunk, diff_line| {
-        let (class, prefix, should_highlight_as_source) = match diff_line.origin_value() {
-            DiffLineType::Addition => (Some("add-line"), "+", true),
-            DiffLineType::Deletion => (Some("remove-line"), "-", true),
-            DiffLineType::Context => (None, " ", true),
-            DiffLineType::AddEOFNL => (Some("remove-line"), "", false),
-            DiffLineType::DeleteEOFNL => (Some("add-line"), "", false),
-            DiffLineType::FileHeader => (Some("file-header"), "", false),
-            _ => (None, "", false),
+        let (class, should_highlight_as_source) = match diff_line.origin_value() {
+            DiffLineType::Addition => (Some("add-line"), true),
+            DiffLineType::Deletion => (Some("remove-line"), true),
+            DiffLineType::Context => (Some("context"), true),
+            DiffLineType::AddEOFNL => (Some("remove-line"), false),
+            DiffLineType::DeleteEOFNL => (Some("add-line"), false),
+            DiffLineType::FileHeader => (Some("file-header"), false),
+            _ => (None, false),
         };
 
         let line = std::str::from_utf8(diff_line.content()).unwrap();
@@ -618,9 +619,8 @@ fn format_diff(diff: &git2::Diff<'_>, syntax_set: &SyntaxSet) -> String {
             .parse_html_for_line_which_includes_newline(line)
             .unwrap();
         if let Some(class) = class {
-            diff_output.push_str(&format!("<span class=\"diff-{class}\">"));
+            write!(diff_output, r#"<span class="diff-{class}">"#).unwrap();
         }
-        diff_output.push_str(prefix);
         diff_output.push_str(&html_generator.finalize());
         if class.is_some() {
             diff_output.push_str("</span>");
diff --git a/statics/style.css b/statics/style.css
index 77321c2..5854b40 100644
--- a/statics/style.css
+++ b/statics/style.css
@@ -96,6 +96,27 @@ pre.h2-first-line::first-line {
     font-weight: bold;
 }
 
+pre {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    overflow: auto;
+    counter-reset: line;
+}
+
+code {
+    counter-increment: line;
+}
+
+code::before {
+    content: counter(line);
+    display: inline-block;
+    width: 2em;
+    padding: 0 1em 0.3em 0;
+    margin-right: .5em;
+    color: #888;
+    -webkit-user-select: none;
+}
 
 .diff-file-header {
     font-weight: bold;
@@ -105,16 +126,34 @@ pre.h2-first-line::first-line {
     font-weight: normal;
 }
 
+.diff-add-line::before, .diff-remove-line::before, .diff-context::before {
+    display: inline-block;
+    color: #888;
+    -webkit-user-select: none;
+}
+
 .diff-add-line {
     background: #e6ffec;
     display: block;
 }
 
+.diff-add-line::before {
+    content: '+ ';
+}
+
 .diff-remove-line {
     background: #ffebe9;
     display: block;
 }
 
+.diff-remove-line::before {
+    content: '- ';
+}
+
+.diff-context::before {
+    content: '  ';
+}
+
 .nested-tree {
     color: blue !important;
     font-weight: bold;