diff options
-rw-r--r-- | .editorconfig | 6 | ||||
-rw-r--r-- | webapp/sass/layout/_markdown.scss | 17 | ||||
-rw-r--r-- | webapp/utils/syntax_hightlighting.jsx | 67 |
3 files changed, 52 insertions, 38 deletions
diff --git a/.editorconfig b/.editorconfig index 5325248da..b8bc90393 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,7 +7,7 @@ end_of_line = lf insert_final_newline = false charset = utf-8 -[*.{go,scss}] +[*.go] indent_style = tab [*.{js,jsx,json,html}] @@ -25,3 +25,7 @@ indent_size = 2 [Makefile] indent_style = tab + +[*.scss] +indent_style = space +indent_size = 4
\ No newline at end of file diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index b9acd8b5b..cd5831653 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/webapp/sass/layout/_markdown.scss @@ -21,7 +21,7 @@ } } -.post-body--code { +.post-code { overflow-x: auto; overflow-y: hidden; position: relative; @@ -32,7 +32,6 @@ margin: 0; padding: 0px; text-align: left; - white-space: nowrap; } code { @@ -45,12 +44,16 @@ vertical-align: top; } - &:hover .post-body--code__language { + &:hover .post-code__language { @include opacity(1); } + + &--wrap code { + white-space: pre-wrap; + } } -.post-body--code__language { +.post-code__language { @include opacity(0); @include translate3d(0, 0, 0); background: #21586d; @@ -67,7 +70,7 @@ z-index: 5; } -.post-body--code__lineno { +.post-code__lineno { border-right: 1px solid #aaa; color: #aaa; margin-right: .5em; @@ -89,10 +92,6 @@ padding: 0; } - code { - white-space: pre; - } - .codespan__pre-wrap { code { white-space: pre-wrap; diff --git a/webapp/utils/syntax_hightlighting.jsx b/webapp/utils/syntax_hightlighting.jsx index 981ce6b35..882afe67f 100644 --- a/webapp/utils/syntax_hightlighting.jsx +++ b/webapp/utils/syntax_hightlighting.jsx @@ -124,56 +124,67 @@ hlJS.registerLanguage('yaml', hljsYaml); const HighlightedLanguages = Constants.HighlightedLanguages; export function formatCode(lang, data, filename) { - var language = lang || ''; - var parsed; - var header = ''; - - language = language.toLowerCase(); + const language = lang.toLowerCase() || ''; + let contents; + let header = ''; if (HighlightedLanguages[language]) { - var name = HighlightedLanguages[language].name; + let name = HighlightedLanguages[language].name; if (filename) { const fname = decodeURIComponent(Utils.getFileName(filename)); name = fname + ' - ' + name; } - header = '<span class="post-body--code__language">' + name + '</span>'; + header = '<span class="post-code__language">' + name + '</span>'; try { - parsed = hlJS.highlight(language, data).value; + contents = hlJS.highlight(language, data).value; } catch (e) { - parsed = TextFormatting.sanitizeHtml(data); + contents = TextFormatting.sanitizeHtml(data); } } else { - parsed = TextFormatting.sanitizeHtml(data); + contents = TextFormatting.sanitizeHtml(data); + } + + let className = 'post-code'; + if (!language) { + // wrap when no language is specified + className += ' post-code--wrap'; } - const lines = data.match(/\r\n|\r|\n|$/g).length; - var strlines = ''; - for (var i = 1; i <= lines; i++) { - if (strlines) { - strlines += '\n' + i; - } else { - strlines += i; + if (filename) { + // add line numbers when viewing a code file preview + const lines = data.match(/\r\n|\r|\n|$/g).length; + let strlines = ''; + for (let i = 1; i <= lines; i++) { + if (strlines) { + strlines += '\n' + i; + } else { + strlines += i; + } } + + contents = ( + '<table>' + + '<tbody>' + + '<tr>' + + '<td class="post-code__lineno">' + strlines + '</td>' + + '<td>' + + contents + + '</td>' + + '</tr>' + + '</tbody>' + + '</table>' + ); } return ( - '<div class="post-body--code">' + + '<div class="' + className + '">' + header + '<pre>' + '<code class="hljs">' + - '<table>' + - '<tbody>' + - '<tr>' + - '<td class="post-body--code__lineno">' + strlines + '</td>' + - '<td>' + - parsed + - '</td>' + - '</tr>' + - '</tbody>' + - '</table>' + + contents + '</code>' + '</pre>' + '</div>' |