diff options
author | Sean McGivern <sean@mcgivern.me.uk> | 2016-12-15 14:11:38 +0000 |
---|---|---|
committer | Sean McGivern <sean@mcgivern.me.uk> | 2016-12-15 14:11:38 +0000 |
commit | 4d1f5837125ffbe363897c8b222536e3e6db8fa5 (patch) | |
tree | 231cbd8672324cf0aeae0db291c948adefcfa9fd /app/assets | |
parent | ecfa8655de37a84007a72c274b5f9662c02499ef (diff) | |
parent | 2d170a20dc4cd3423ac7994c797cae8fbed263ba (diff) | |
download | gitlab-ce-4d1f5837125ffbe363897c8b222536e3e6db8fa5.tar.gz |
Merge branch 'katex-math' into 'master'
Render math in Asciidoc and Markdown with KaTeX using code blocks
Closes #13690 and #13180
See merge request !8003
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/blob_edit/edit_blob.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/notes.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/preview_markdown.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/render_gfm.js | 16 | ||||
-rw-r--r-- | app/assets/javascripts/render_math.js | 55 | ||||
-rw-r--r-- | app/assets/javascripts/syntax_highlight.js | 6 |
6 files changed, 78 insertions, 9 deletions
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js index 33a1ddcaf09..b528e32340d 100644 --- a/app/assets/javascripts/blob_edit/edit_blob.js +++ b/app/assets/javascripts/blob_edit/edit_blob.js @@ -60,7 +60,7 @@ content: this.editor.getValue() }, function(response) { currentPane.empty().append(response); - return currentPane.syntaxHighlight(); + return currentPane.renderGFM(); }); } else { this.$toggleButton.show(); diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index fca9b8f6c91..a8b9a352870 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -309,7 +309,7 @@ } row = form.closest("tr"); note_html = $(note.html); - note_html.syntaxHighlight(); + note_html.renderGFM(); // is this the first note of discussion? discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']"); if ((note.original_discussion_id != null) && discussionContainer.length === 0) { @@ -326,7 +326,7 @@ discussionContainer.append(note_html); // Init discussion on 'Discussion' page if it is merge request page if ($('body').attr('data-page').indexOf('projects:merge_request') === 0) { - $('ul.main-notes-list').append(note.discussion_html).syntaxHighlight(); + $('ul.main-notes-list').append(note.discussion_html).renderGFM(); } } else { // append new note to all matching discussions @@ -467,7 +467,7 @@ // Convert returned HTML to a jQuery object so we can modify it further $html = $(note.html); gl.utils.localTimeAgo($('.js-timeago', $html)); - $html.syntaxHighlight(); + $html.renderGFM(); $html.find('.js-task-list-container').taskList('enable'); // Find the note's `li` element by ID and replace it with the updated HTML $note_li = $('.note-row-' + note.id); diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js index 2dc8eb8b2de..1e261cd49c2 100644 --- a/app/assets/javascripts/preview_markdown.js +++ b/app/assets/javascripts/preview_markdown.js @@ -28,7 +28,7 @@ return this.renderMarkdown(mdText, (function(_this) { return function(response) { preview.html(response.body); - preview.syntaxHighlight(); + preview.renderGFM(); return _this.renderReferencedUsers(response.references.users, form); }; })(this)); diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js new file mode 100644 index 00000000000..bbb2f186655 --- /dev/null +++ b/app/assets/javascripts/render_gfm.js @@ -0,0 +1,16 @@ +/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */ +// Render Gitlab flavoured Markdown +// +// Delegates to syntax highlight and render math +// +(function() { + $.fn.renderGFM = function() { + this.find('.js-syntax-highlight').syntaxHighlight(); + this.find('.js-render-math').renderMath(); + }; + + $(document).on('ready page:load', function() { + return $('body').renderGFM(); + }); + +}).call(this); diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js new file mode 100644 index 00000000000..a8a56430f88 --- /dev/null +++ b/app/assets/javascripts/render_math.js @@ -0,0 +1,55 @@ +/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */ +// Renders math using KaTeX in any element with the +// `js-render-math` class +// +// ### Example Markup +// +// <code class="js-render-math"></div> +// +(function() { + // Only load once + var katexLoaded = false; + + // Loop over all math elements and render math + var renderWithKaTeX = function (elements) { + elements.each(function () { + var mathNode = $('<span></span>'); + var $this = $(this); + + var display = $this.attr('data-math-style') === 'display'; + try { + katex.render($this.text(), mathNode.get(0), { displayMode: display }); + mathNode.insertAfter($this); + $this.remove(); + } catch (err) { + // What can we do?? + console.log(err.message); + } + }); + }; + + $.fn.renderMath = function() { + var $this = this; + if ($this.length === 0) return; + + if (katexLoaded) renderWithKaTeX($this); + else { + // Request CSS file so it is in the cache + $.get(gon.katex_css_url, function() { + var css = $('<link>', + { rel: 'stylesheet', + type: 'text/css', + href: gon.katex_css_url, + }); + css.appendTo('head'); + + // Load KaTeX js + $.getScript(gon.katex_js_url, function() { + katexLoaded = true; + renderWithKaTeX($this); // Run KaTeX + }); + }); + } + }; + +}).call(this); diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js index fabeb44f4b3..5d0fa62c50a 100644 --- a/app/assets/javascripts/syntax_highlight.js +++ b/app/assets/javascripts/syntax_highlight.js @@ -10,8 +10,10 @@ // <div class="js-syntax-highlight"></div> // (function() { + $.fn.syntaxHighlight = function() { var $children; + if ($(this).hasClass('js-syntax-highlight')) { // Given the element itself, apply highlighting return $(this).addClass(gon.user_color_scheme); @@ -24,8 +26,4 @@ } }; - $(document).on('ready page:load', function() { - return $('.js-syntax-highlight').syntaxHighlight(); - }); - }).call(this); |