Changed code block line number gutter rendering method for performance and gain better accessibility

This commit is contained in:
Wu Cheng-Han 2015-09-25 19:06:27 +08:00
parent 4e0a102101
commit 60414febee
2 changed files with 7 additions and 3 deletions

View file

@ -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;

View file

@ -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;