diff --git a/src/Renderers/CodeNodeRenderer.php b/src/Renderers/CodeNodeRenderer.php
index 26f16ff..37d6649 100644
--- a/src/Renderers/CodeNodeRenderer.php
+++ b/src/Renderers/CodeNodeRenderer.php
@@ -78,6 +78,17 @@ public function render(): string
             $highlightedCode = preg_replace('/^C:\\\&gt; /m', '<span class="hljs-prompt">C:\&gt; </span>', $highlightedCode);
         }
 
+        if ('diff' === $language) {
+            // remove the '+' and '-' signs so they can be added with css
+            $highlightedCode = str_replace([
+                '<span class="hljs-deletion">-',
+                '<span class="hljs-addition">+',
+            ], [
+                '<span class="hljs-deletion"> ',
+                '<span class="hljs-addition"> ',
+            ], $highlightedCode);
+        }
+
         $numOfLines = \count(preg_split('/\r\n|\r|\n/', $highlightedCode));
         $lineNumbers = implode("\n", range(1, $numOfLines));
 
diff --git a/src/Templates/rtd/assets/css/highlightjs.css b/src/Templates/rtd/assets/css/highlightjs.css
index c5d07d3..0b73209 100644
--- a/src/Templates/rtd/assets/css/highlightjs.css
+++ b/src/Templates/rtd/assets/css/highlightjs.css
@@ -66,3 +66,16 @@ Visual Studio-like style based on original C# coloring by Jason Diamond <jason@d
 .hljs-strong {
   font-weight: bold;
 }
+
+.hljs-addition::before,
+.hljs-deletion::before {
+  position: absolute;
+}
+
+.hljs-addition::before {
+  content: '+';
+}
+
+.hljs-deletion::before {
+  content: '-';
+}
diff --git a/tests/fixtures/expected/blocks/code-blocks/diff.html b/tests/fixtures/expected/blocks/code-blocks/diff.html
index 0a020cf..c685087 100644
--- a/tests/fixtures/expected/blocks/code-blocks/diff.html
+++ b/tests/fixtures/expected/blocks/code-blocks/diff.html
@@ -7,11 +7,11 @@
 5</pre>
         <pre class="codeblock-code">
             <code>
-                <span class="hljs-addition">+ Added line</span>
-                <span class="hljs-deletion">- Removed line</span>
+                <span class="hljs-addition">  Added line</span>
+                <span class="hljs-deletion">  Removed line</span>
                 Normal line
-<span class="hljs-deletion">- Removed line</span>
-                <span class="hljs-addition">+ Added line</span>
+<span class="hljs-deletion">  Removed line</span>
+                <span class="hljs-addition">  Added line</span>
             </code>
         </pre>
     </div>
@@ -28,11 +28,11 @@
         <pre class="codeblock-code">
             <code>
                 Normal line
-<span class="hljs-addition">+ Added line</span>
-                <span class="hljs-deletion">- Removed line</span>
+<span class="hljs-addition">  Added line</span>
+                <span class="hljs-deletion">  Removed line</span>
                 Normal line
-<span class="hljs-deletion">- Removed line</span>
-                <span class="hljs-addition">+ Added line</span>
+<span class="hljs-deletion">  Removed line</span>
+                <span class="hljs-addition">  Added line</span>
             </code>
         </pre>
     </div>