diff options
author | Munken <mm.munk@gmail.com> | 2016-12-09 00:15:08 +0000 |
---|---|---|
committer | Munken <mm.munk@gmail.com> | 2016-12-14 16:50:54 +0000 |
commit | 2d170a20dc4cd3423ac7994c797cae8fbed263ba (patch) | |
tree | 273aeac77c48c027600afb2da40eee739dd6872e /app/assets | |
parent | e3f5c4c5f66c42ebf3c25c4d23507b56843b006d (diff) | |
download | gitlab-ce-2d170a20dc4cd3423ac7994c797cae8fbed263ba.tar.gz |
Render math in Asciidoc and Markdown with KaTeX using code blocks
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 | 28 | ||||
-rw-r--r-- | app/assets/javascripts/syntax_highlight.js.erb | 79 |
7 files changed, 104 insertions, 84 deletions
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js index 0c74aaaa852..51e2094d26a 100644 --- a/app/assets/javascripts/blob_edit/edit_blob.js +++ b/app/assets/javascripts/blob_edit/edit_blob.js @@ -57,7 +57,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 0ca0e255595..327dbd2878c 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -305,7 +305,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) { @@ -322,7 +322,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 @@ -463,7 +463,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 3723aa24942..b2574e8c0cd 100644 --- a/app/assets/javascripts/preview_markdown.js +++ b/app/assets/javascripts/preview_markdown.js @@ -27,7 +27,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 new file mode 100644 index 00000000000..f4e9d5af74f --- /dev/null +++ b/app/assets/javascripts/syntax_highlight.js @@ -0,0 +1,28 @@ +/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */ +// Syntax Highlighter +// +// Applies a syntax highlighting color scheme CSS class to any element with the +// `js-syntax-highlight` class +// +// ### Example Markup +// +// <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); + } else { + // Given a parent element, recurse to any of its applicable children + $children = $(this).find('.js-syntax-highlight'); + if ($children.length) { + return $children.syntaxHighlight(); + } + } + }; + +}).call(this); diff --git a/app/assets/javascripts/syntax_highlight.js.erb b/app/assets/javascripts/syntax_highlight.js.erb deleted file mode 100644 index ea79e82d887..00000000000 --- a/app/assets/javascripts/syntax_highlight.js.erb +++ /dev/null @@ -1,79 +0,0 @@ -/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-undef, no-else-return, prefer-arrow-callback, padded-blocks, max-len */ -// Syntax Highlighter -// -// Applies a syntax highlighting color scheme CSS class to any element with the -// `js-syntax-highlight` class -// -// ### Example Markup -// -// <div class="js-syntax-highlight"></div> -// -(function() { - // CSS and JS for KaTeX - CSS_PATH = "<%= asset_path('katex.css') %>"; - JS_PATH = "<%= asset_path('katex.js') %>"; - - // Only load once - var katexLoaded = false; - - // Loop over all math elements and render math - var renderWithKaTeX = function (elements) { - elements.each(function () { - if (!!$(this).attr('rendered')) return; - - $(this).attr('rendered', true); - $(this).hide(); - var mathNode = $( "<math>Test</math>" ); - mathNode.insertAfter($(this)); - - var display = $(this).hasClass('highlight'); - katex.render($(this).text(), mathNode.get(0), { displayMode: display }) - }) - }; - var handleMath = function () { - var mathElements = $('.code.math'); - - if (mathElements.length == 0) return; - - if (katexLoaded) renderWithKaTeX(mathElements); - else { - // Request CSS file so it is in the cache - $.get(CSS_PATH, function(){ - var css = $('<link>', - {rel:'stylesheet', - type:'text/css', - href: CSS_PATH - }); - css.appendTo('head'); - - // Load KaTeX js - $.getScript(JS_PATH, function() { - katexLoaded = true; - renderWithKaTeX(mathElements); // Run KaTeX - }) - }); - } - }; - - $.fn.syntaxHighlight = function() { - var $children; - - handleMath(); - - if ($(this).hasClass('js-syntax-highlight')) { - // Given the element itself, apply highlighting - return $(this).addClass(gon.user_color_scheme); - } else { - // Given a parent element, recurse to any of its applicable children - $children = $(this).find('.js-syntax-highlight'); - if ($children.length) { - return $children.syntaxHighlight(); - } - } - }; - - $(document).on('ready page:load', function() { - return $('.js-syntax-highlight').syntaxHighlight(); - }); - -}).call(this); |