diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-06-01 08:28:54 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-06-01 08:28:54 -0400 |
commit | f5ccfb362e724508e1a29e7f7d8cb30ffd49c2c1 (patch) | |
tree | 8b6fff1a46a2720a65079bade15ce9d79ffbaa02 /webapp/utils/markdown.jsx | |
parent | 85ccd6759361099d2bfd069d144fd8f234549c52 (diff) | |
download | chat-f5ccfb362e724508e1a29e7f7d8cb30ffd49c2c1.tar.gz chat-f5ccfb362e724508e1a29e7f7d8cb30ffd49c2c1.tar.bz2 chat-f5ccfb362e724508e1a29e7f7d8cb30ffd49c2c1.zip |
Reorganized syntax highlighting code and added search term highlighting for code blocks with syntax highlighting (#3191)
Diffstat (limited to 'webapp/utils/markdown.jsx')
-rw-r--r-- | webapp/utils/markdown.jsx | 49 |
1 files changed, 47 insertions, 2 deletions
diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx index 7fd165134..6691b57b2 100644 --- a/webapp/utils/markdown.jsx +++ b/webapp/utils/markdown.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. import * as TextFormatting from './text_formatting.jsx'; -import * as syntaxHightlighting from './syntax_hightlighting.jsx'; +import * as SyntaxHighlighting from './syntax_hightlighting.jsx'; import marked from 'marked'; import katex from 'katex'; @@ -43,7 +43,52 @@ class MattermostMarkdownRenderer extends marked.Renderer { usedLanguage = 'xml'; } - return syntaxHightlighting.formatCode(usedLanguage, code, null, this.formattingOptions.searchTerm); + let className = 'post-code'; + if (!usedLanguage) { + className += ' post-code--wrap'; + } + + let header = ''; + if (SyntaxHighlighting.canHighlight(usedLanguage)) { + header = ( + '<span class="post-code__language">' + + SyntaxHighlighting.getLanguageName(language) + + '</span>' + ); + } + + // if we have to apply syntax highlighting AND highlighting of search terms, create two copies + // of the code block, one with syntax highlighting applied and another with invisible text, but + // search term highlighting and overlap them + const content = SyntaxHighlighting.highlight(usedLanguage, code); + let searchedContent = ''; + + if (this.formattingOptions.searchTerm) { + const tokens = new Map(); + + let searched = TextFormatting.sanitizeHtml(code); + searched = TextFormatting.highlightSearchTerms(searched, tokens, this.formattingOptions.searchTerm); + + if (tokens.size > 0) { + searched = TextFormatting.replaceTokens(searched, tokens); + + searchedContent = ( + '<div class="post-code__search-highlighting">' + + searched + + '</div>' + ); + } + } + + return ( + '<div class="' + className + '">' + + header + + '<code class="hljs">' + + searchedContent + + content + + '</code>' + + '</div>' + ); } codespan(text) { |