depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/css/markdown.css
View file

@ -32,7 +32,7 @@
user-select: none; user-select: none;
} }
.markdown-body pre code .gutter .linenumber { .markdown-body pre code .gutter.linenumber {
text-align: right; text-align: right;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -46,6 +46,10 @@
border-right: 3px solid #6ce26c !important; border-right: 3px solid #6ce26c !important;
} }
.markdown-body pre code .gutter.linenumber > span:before {
content: attr(data-linenumber);
}
.markdown-body pre code .code { .markdown-body pre code .code {
float: left; float: left;
margin: 0 0 0 16px; margin: 0 0 0 16px;

4
public/js/extra.js
View file

@ -413,9 +413,9 @@ function highlightRender(code, lang) {
var lines = result.value.split('\n'); var lines = result.value.split('\n');
var linenumbers = []; var linenumbers = [];
for (var i = 0; i < lines.length - 1; i++) { 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>"; result.value = "<div class='wrapper'>" + linegutter + "<div class='code'>" + result.value + "</div></div>";
} }
return result.value; return result.value;