User:Franklin Yu/Gadget-highlighting.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

// syntax highlight user scripts
(function() {
  'use strict'

  var PRISM_BASE_URL = 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0'

  var style = detectStyle()
  if (!style)
    return

  loadPrismStyleSheet('/themes/prism.min.css')
  loadPrismStyleSheet('/plugins/line-numbers/prism-line-numbers.min.css')
  if (document.readyState == 'complete')
    highlightCodes()
  else
    window.addEventListener('load', highlightCodes)

  // @returns {?string}
  function detectStyle() {
    var path = location.pathname;
    if (!path.startsWith('/title/User:'))
      return null
    else if (path.endsWith('.css'))
      return 'css'
    else if (path.endsWith('.js'))
      return 'javascript'
    else
      return null
  }

  function highlightCodes() {
    loadPrismComponent('core').then(loadPrismLang).then(loadLineNumber).then(function() {
      var classes = {css: 'mw-css', javascript: 'mw-js'}
      var pre = document.querySelector('pre.' + classes[style])
      pre.classList.add('line-numbers')
      var code = document.createElement('code')
      code.classList.add('language-' + style)
      code.innerHTML = pre.innerHTML
      pre.innerHTML = ''
      pre.appendChild(code)
      Prism.highlightElement(code)
    })
  }

  function loadLineNumber() {
    return loadPrismScript('/plugins/line-numbers/prism-line-numbers.min.js', 'prism-line-number')
  }

  function loadPrismLang() {
    if (style === 'css')
      return loadPrismComponent('css')
    else if (style === 'javascript')
      return loadPrismComponent('clike').then(function() { loadPrismComponent('javascript') })
  }

  function loadPrismComponent(module) {
    return loadPrismScript('/components/prism-' + module + '.min.js', 'prism-' + module)
  }

  function loadPrismScript(path, id) {
    var script = document.createElement('script')
    if (id)
      script.id = id
    script.src = PRISM_BASE_URL + path
    document.head.appendChild(script)
    return new Promise(function(resolve, reject) {
      script.onload = resolve
      script.onerror = reject
    });
  }

  function loadPrismStyleSheet(path) {
    var stylesheet = document.createElement('link');
    stylesheet.rel = 'stylesheet'
    stylesheet.href = PRISM_BASE_URL + path
    document.head.appendChild(stylesheet)
  }
})()