diff --git a/modules/highlight/highlight.go b/modules/highlight/highlight.go
index 62cb0d6aa3..cf3bc41a5f 100644
--- a/modules/highlight/highlight.go
+++ b/modules/highlight/highlight.go
@@ -50,10 +50,13 @@ func globalVars() *globalVarsType {
 			"DLE", "DC1", "DC2", "DC3", "DC4", "NAK", "SYN", "ETB",
 			"CAN", "EM", "SUB", "ESC", "FS", "GS", "RS", "US",
 		}
+		// uncomment this line if you'd like to debug the layout without really creating a file, then space will also be escaped
+		// don't worry, even if you forget to comment it out and push it to git repo, the CI tests will catch it and fail
+		// controlCharNames = append(controlCharNames, "SP")
 		for i, s := range controlCharNames {
-			globalVarsPtr.escapeControlChars[i] = template.HTML(`<span class="broken-code-point">` + s + `</span>`)
+			globalVarsPtr.escapeControlChars[i] = template.HTML(`<span class="broken-code-point" data-escaped="` + s + `"><span class="char">` + string(byte(i)) + `</span></span>`)
 		}
-		globalVarsPtr.escapeControlChars[0x7f] = `<span class="broken-code-point">DEL</span>`
+		globalVarsPtr.escapeControlChars[0x7f] = template.HTML(`<span class="broken-code-point" data-escaped="DEL"><span class="char">` + string(byte(0x7f)) + `</span></span>`)
 		globalVarsPtr.escapeControlChars['\t'] = ""
 		globalVarsPtr.escapeControlChars['\n'] = ""
 		globalVarsPtr.escapeControlChars['\r'] = ""
diff --git a/modules/highlight/highlight_test.go b/modules/highlight/highlight_test.go
index a626660903..cad22ba9bb 100644
--- a/modules/highlight/highlight_test.go
+++ b/modules/highlight/highlight_test.go
@@ -206,12 +206,12 @@ func TestUnsafeSplitHighlightedLines(t *testing.T) {
 }
 
 func TestEscape(t *testing.T) {
-	assert.Equal(t, template.HTML("\t\r\n<span class=\"broken-code-point\">NUL</span><span class=\"broken-code-point\">US</span>&'\"<>"), escapeControlChars([]byte("\t\r\n\x00\x1f&'\"<>")))
-	assert.Equal(t, template.HTML("<span class=\"broken-code-point\">NUL</span><span class=\"broken-code-point\">US</span>&amp;&#39;&#34;&lt;&gt;\t\r\n"), escapeFullString("\x00\x1f&'\"<>\t\r\n"))
+	assert.Equal(t, template.HTML("\t\r\n<span class=\"broken-code-point\" data-escaped=\"NUL\"><span class=\"char\">\x00</span></span><span class=\"broken-code-point\" data-escaped=\"US\"><span class=\"char\">\x1f</span></span>&'\"<>"), escapeControlChars([]byte("\t\r\n\x00\x1f&'\"<>")))
+	assert.Equal(t, template.HTML("<span class=\"broken-code-point\" data-escaped=\"NUL\"><span class=\"char\">\x00</span></span><span class=\"broken-code-point\" data-escaped=\"US\"><span class=\"char\">\x1f</span></span>&amp;&#39;&#34;&lt;&gt;\t\r\n"), escapeFullString("\x00\x1f&'\"<>\t\r\n"))
 
 	out, _ := RenderFullFile("a.py", "", []byte("# \x7f<>"))
-	assert.Equal(t, template.HTML(`<span class="c1"># <span class="broken-code-point">DEL</span>&lt;&gt;</span>`), out[0])
+	assert.Equal(t, template.HTML(`<span class="c1"># <span class="broken-code-point" data-escaped="DEL"><span class="char">`+string(byte(0x7f))+`</span></span>&lt;&gt;</span>`), out[0])
 
 	out = renderPlainText([]byte("# \x7f<>"))
-	assert.Equal(t, template.HTML(`# <span class="broken-code-point">DEL</span>&lt;&gt;`), out[0])
+	assert.Equal(t, template.HTML(`# <span class="broken-code-point" data-escaped="DEL"><span class="char">`+string(byte(0x7f))+`</span></span>&lt;&gt;`), out[0])
 }
diff --git a/web_src/css/modules/charescape.css b/web_src/css/modules/charescape.css
index 6d6662f33c..eac6d86a81 100644
--- a/web_src/css/modules/charescape.css
+++ b/web_src/css/modules/charescape.css
@@ -1,10 +1,36 @@
-.broken-code-point {
+/*
+Show the escaped and hide the real char:
+  <span class="broken-code-point" data-escaped="DEL"><span class="char">{real-char}</span></span>
+Only show the real-char:
+  <span class="broken-code-point">{real-char}</span>
+*/
+.broken-code-point:not([data-escaped]),
+.broken-code-point[data-escaped]::before {
   border-radius: 4px;
   padding: 0 2px;
   color: var(--color-body);
   background: var(--color-text-light-1);
 }
 
+.broken-code-point[data-escaped]::before {
+  visibility: visible;
+  content: attr(data-escaped);
+}
+.broken-code-point[data-escaped] .char {
+  display: inline-block;
+  width: 0; /* make it copyable by selecting the text */
+}
+
+/*
+Show the escaped and hide the real-char:
+  <span class="unicode-escaped">
+    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
+  </span>
+Hide the escaped and show the real-char:
+  <span>
+    <span class="escaped-code-point" data-escaped="U+1F600"><span class="char">{real-char}</span></span>
+  </span>
+*/
 .unicode-escaped .escaped-code-point[data-escaped]::before {
   visibility: visible;
   content: attr(data-escaped);