diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/post_info.jsx | 2 | ||||
-rw-r--r-- | web/react/utils/markdown.jsx | 47 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_markdown.scss | 28 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_navbar.scss | 3 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 13 |
5 files changed, 65 insertions, 28 deletions
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index 5306edd3d..edd63decd 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -81,7 +81,7 @@ export default class PostInfo extends React.Component { role='presentation' > <a - className='reply-link visible-xs theme' + className='link__reply theme' href='#' onClick={this.props.handleCommentClick} > diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx index 7957ea31b..b0ec64bfd 100644 --- a/web/react/utils/markdown.jsx +++ b/web/react/utils/markdown.jsx @@ -110,32 +110,47 @@ class MattermostMarkdownRenderer extends marked.Renderer { this.formattingOptions = formattingOptions; } - code(code, language) { - let usedLanguage = language; + code(code, language, escaped) { + let usedLanguage = language || ''; + usedLanguage = usedLanguage.toLowerCase(); - if (String(usedLanguage).toLocaleLowerCase() === 'html') { + // treat html as xml to prevent injection attacks + if (usedLanguage === 'html') { usedLanguage = 'xml'; } - if (usedLanguage && (usedLanguage === 'tex' || usedLanguage === 'latex')) { + if (HighlightedLanguages[usedLanguage]) { + const parsed = highlightJs.highlight(usedLanguage, code); + + return ( + '<div class="post-body--code">' + + '<span class="post-body--code__language">' + + HighlightedLanguages[usedLanguage] + + '</span>' + + '<pre>' + + '<code class="hljs">' + + parsed.value + + '</code>' + + '</pre>' + + '</div>' + ); + } else if (usedLanguage === 'tex' || usedLanguage === 'latex') { try { - var html = katex.renderToString(TextFormatting.sanitizeHtml(code), {throwOnError: false, displayMode: true}); + const html = katex.renderToString(TextFormatting.sanitizeHtml(code), {throwOnError: false, displayMode: true}); + return '<div class="post-body--code tex">' + html + '</div>'; } catch (e) { - return '<div class="post-body--code">' + TextFormatting.sanitizeHtml(code) + '</div>'; + // fall through if latex parsing fails and handle below } } - if (!usedLanguage || highlightJs.listLanguages().indexOf(usedLanguage) < 0) { - let parsed = super.code(code, usedLanguage); - return '<div class="post-body--code"><code class="hljs">' + TextFormatting.sanitizeHtml($(parsed).text()) + '</code></div>'; - } - - let parsed = highlightJs.highlight(usedLanguage, code); - return '<div class="post-body--code">' + - '<span class="post-body--code__language">' + HighlightedLanguages[usedLanguage] + '</span>' + - '<code class="hljs">' + parsed.value + '</code>' + - '</div>'; + return ( + '<pre>' + + '<code class="hljs">' + + (escaped ? code : TextFormatting.sanitizeHtml(code)) + '\n' + + '</code>' + + '</pre>' + ); } br() { diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss index ea5ccd2d2..6d1ecbfa0 100644 --- a/web/sass-files/sass/partials/_markdown.scss +++ b/web/sass-files/sass/partials/_markdown.scss @@ -9,11 +9,26 @@ } } #post-list { - .markdown-inline-img { - -moz-force-broken-image-icon: 1; - max-height: 500px; - height: 500px; - } + .markdown-inline-img { + -moz-force-broken-image-icon: 1; + max-height: 500px; + height: 500px; + } +} + +.post-body--code { + position: relative; +} + +.post-body--code__language { + position: absolute; + top: 0; + right: 0; + color: #fff; + background: #21586D; + padding: 4px 10px 5px 10px; + font-size: 13px; + opacity: 0.7; } .post__body { @@ -25,6 +40,9 @@ border: 0 none; @include opacity(0.2); } + code { + white-space: pre; + } } .markdown__table { background: #fff; diff --git a/web/sass-files/sass/partials/_navbar.scss b/web/sass-files/sass/partials/_navbar.scss index c570c4663..aad46d3d9 100644 --- a/web/sass-files/sass/partials/_navbar.scss +++ b/web/sass-files/sass/partials/_navbar.scss @@ -33,6 +33,9 @@ background: #fff; width: 21px; } + .glyphicon-search { + top: -1px; + } .icon--white { color: #fff; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 99e985b0c..62d136a11 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -363,12 +363,6 @@ body.ios { } } - ul { - margin: 0; - padding: 0; - list-style: none; - } - p { margin: 0 0 1em; line-height: 1.6em; @@ -520,6 +514,8 @@ body.ios { } .post__header { + padding: 0; + list-style: none; margin-bottom: 2px; li { @@ -588,6 +584,11 @@ body.ios { padding: 0.2em 0.5em 0em; @include legacy-pie-clearfix; width: calc(100% - 70px); + + ul { + padding: 5px 0 0 20px; + } + } .post__link { |