From 60414febee5fd14743fd80cad9d681c3027272dd Mon Sep 17 00:00:00 2001
From: Wu Cheng-Han <jacky_cute0808@hotmail.com>
Date: Fri, 25 Sep 2015 19:06:27 +0800
Subject: [PATCH] Changed code block line number gutter rendering method for
 performance and gain better accessibility

---
 public/css/markdown.css | 6 +++++-
 public/js/extra.js      | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/css/markdown.css b/public/css/markdown.css
index ffceb05..6a98212 100644
--- a/public/css/markdown.css
+++ b/public/css/markdown.css
@@ -32,7 +32,7 @@
     user-select: none;
 }
 
-.markdown-body pre code .gutter .linenumber {
+.markdown-body pre code .gutter.linenumber {
     text-align: right;
     position: relative;
     display: inline-block;
@@ -46,6 +46,10 @@
     border-right: 3px solid #6ce26c !important;
 }
 
+.markdown-body pre code .gutter.linenumber > span:before {
+    content: attr(data-linenumber);
+}
+
 .markdown-body pre code .code {
     float: left;
     margin: 0 0 0 16px;
diff --git a/public/js/extra.js b/public/js/extra.js
index cb6676b..fd150be 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -413,9 +413,9 @@ function highlightRender(code, lang) {
         var lines = result.value.split('\n');
         var linenumbers = [];
         for (var i = 0; i < lines.length - 1; i++) {
-            linenumbers[i] = "<div class='linenumber'>" + (i + 1) + "</div>";
+            linenumbers[i] = "<span data-linenumber='" + (i + 1) + "'></span>";
         }
-        var linegutter = "<div class='gutter'>" + linenumbers.join('\n') + "</div>";
+        var linegutter = "<div class='gutter linenumber'>" + linenumbers.join('\n') + "</div>";
         result.value = "<div class='wrapper'>" + linegutter + "<div class='code'>" + result.value + "</div></div>";
     }
     return result.value;