diff options
Diffstat (limited to 'app/assets/javascripts/syntax_highlight.js')
-rw-r--r-- | app/assets/javascripts/syntax_highlight.js | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js index 474b5132bc6..96b6e78c668 100644 --- a/app/assets/javascripts/syntax_highlight.js +++ b/app/assets/javascripts/syntax_highlight.js @@ -1,7 +1,5 @@ /* eslint-disable consistent-return */ -import $ from 'jquery'; - // Syntax Highlighter // // Applies a syntax highlighting color scheme CSS class to any element with the @@ -12,14 +10,30 @@ import $ from 'jquery'; // <div class="js-syntax-highlight"></div> // -export default function syntaxHighlight(el) { - if ($(el).hasClass('js-syntax-highlight')) { - // Given the element itself, apply highlighting - return $(el).addClass(gon.user_color_scheme); - } - // Given a parent element, recurse to any of its applicable children - const $children = $(el).find('.js-syntax-highlight'); - if ($children.length) { - return syntaxHighlight($children); +export default function syntaxHighlight($els = null) { + if (!$els) return; + + const els = $els.get ? $els.get() : $els; + const handler = (el) => { + if (el.classList.contains('js-syntax-highlight')) { + // Given the element itself, apply highlighting + return el.classList.add(gon.user_color_scheme); + } + // Given a parent element, recurse to any of its applicable children + const children = el.querySelectorAll('.js-syntax-highlight'); + if (children.length) { + return syntaxHighlight(children); + } + }; + + // In order to account for NodeList returned by document.querySelectorAll, + // we should rather check whether the els object is iterable + // instead of relying on Array.isArray() + const isIterable = typeof els[Symbol.iterator] === 'function'; + + if (isIterable) { + els.forEach((el) => handler(el)); + } else { + handler(els); } } |