Site Notice

hello, world

MediaWiki:Gadget-Highlight.js

From Project-EPB Commons
Revision as of 20:42, 29 October 2020 by 机智的小鱼君 (talk | contribs) ([InPageEdit] 没有编辑摘要)

Invoke this: https://common.wjghj.cn/

Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/**
 * @name highlight.js
 * @description 为页面内的代码块提供语法高亮
 */
!(function () {

  // 为代码页面添加class
  var pageName = mw.config.get('wgPageName')
  if (pageName.substr(pageName.length - 3, 3) === '.js') {
    $('#mw-content-text pre').addClass('lang-js highlight linenums')
  } else if (pageName.substr(pageName.length - 4, 4) === '.css') {
    $('#mw-content-text pre').addClass('lang-css highlight linenums')
  } else if (mw.config.get('wgNamespaceNumber') === 828) {
    $('#mw-content-text pre').addClass('lang-lua highlight linenums')
  }

  // 加载主题
  mw.loader.load('https://cdn.jsdelivr.net/npm/[email protected]/styles/solarized-light.css', 'text/css')

  // 加载脚本
  $.ajax({
    url: 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js',
    dataType: 'script',
    cache: true
  }).then(function () {

    // 初始化高亮
    $('#mw-content-text pre.highlight').each(function (_, block) {
      hljs.highlightBlock(block)

      // 添加行号
      var $block = $(block)
      if ($block.hasClass('linenums')) {
        $block.html(function () {
          var splitHtml = $(this).html().split('\n')
          var $html = $('<div>', { class: 'line-container' }).append(
            $('<div>', { class: 'line-content' }),
            $('<div>', { class: 'line-numbers' })
          )
          $.each(splitHtml, function (lineNum, lineContent) {
            lineNum = lineNum + 1
            if (lineNum === splitHtml.length) return // 最后一个行不要再添加空的一行了
            $html.find('.line-content').append(
              $('<div>', { class: 'line-row', html: lineContent })
            )
            $html.find('.line-numbers').append(
              $('<div>', { class: 'line-number-block', text: lineNum })
            )
          })
          return $html
        })
      }

    })
  })
})()