Site Notice

hello, world

Difference between revisions of "MediaWiki:Gadget-Highlight.js"

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
([InPageEdit] 没有编辑摘要)
 
(4 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
!(function () {
 
!(function () {
  
   // 为代码页面添加class
+
   // 为代码页面添加 class
 
   var pageName = mw.config.get('wgPageName')
 
   var pageName = mw.config.get('wgPageName')
 
   if (pageName.substr(pageName.length - 3, 3) === '.js') {
 
   if (pageName.substr(pageName.length - 3, 3) === '.js') {
Line 11: Line 11:
 
   } else if (pageName.substr(pageName.length - 4, 4) === '.css') {
 
   } else if (pageName.substr(pageName.length - 4, 4) === '.css') {
 
     $('#mw-content-text pre').addClass('lang-css highlight linenums')
 
     $('#mw-content-text pre').addClass('lang-css highlight linenums')
   } else if (mw.config.get('wgNamespaceNumber') === 828) {
+
   } else if (mw.config.get('wgNamespaceNumber') === 828) { // Lua
 
     $('#mw-content-text pre').addClass('lang-lua highlight linenums')
 
     $('#mw-content-text pre').addClass('lang-lua highlight linenums')
 
   }
 
   }
Line 27: Line 27:
 
     // 初始化高亮
 
     // 初始化高亮
 
     $('#mw-content-text pre.highlight').each(function (_, block) {
 
     $('#mw-content-text pre.highlight').each(function (_, block) {
 +
      var $block = $(block)
 +
 +
      if ($block.attr('data-hljs') === 'done') return
 +
 +
      // 高亮当前块
 
       hljs.highlightBlock(block)
 
       hljs.highlightBlock(block)
 +
      $block.attr('data-hljs', 'done')
  
       // 添加行号
+
       // 行号显示
       var $block = $(block)
+
       if ($block.data('line-from')!==undefined || $block.data('line-ping') !== undefined) $block.addClass('linenums')
 
       if ($block.hasClass('linenums')) {
 
       if ($block.hasClass('linenums')) {
 +
 +
        // 起始行号
 +
        var lineNumFrom = Number($block.data('line-from'))
 +
        if (isNaN(lineNumFrom) || lineNumFrom < 1) lineNumFrom = 1
 +
        lineNumFrom = Number(lineNumFrom.toFixed(0))
 +
 +
        // 高亮行号
 +
        var pingLine = $block.data('line-emphatic') || $block.data('line-ping')
 +
        if (typeof pingLine === 'number') pingLine = [pingLine]
 +
        if (typeof pingLine === 'string') pingLine = pingLine.replace(/\s/g, '').split(',')
 +
        if (typeof pingLine !== 'object') pingLine = []
 +
 
         $block.html(function () {
 
         $block.html(function () {
           var splitHtml = $(this).html().split('\n')
+
 
 +
           // 创建 jQuery 对象
 
           var $html = $('<div>', { class: 'line-container' }).append(
 
           var $html = $('<div>', { class: 'line-container' }).append(
 
             $('<div>', { class: 'line-content' }),
 
             $('<div>', { class: 'line-content' }),
 
             $('<div>', { class: 'line-numbers' })
 
             $('<div>', { class: 'line-numbers' })
 
           )
 
           )
 +
 +
          // 拆开每一行
 +
          var splitHtml = $(this).html().split('\n')
 
           $.each(splitHtml, function (lineNum, lineContent) {
 
           $.each(splitHtml, function (lineNum, lineContent) {
             lineNum = lineNum + 1
+
 
 +
             // 防止最后一行后被添加一行空行
 +
            if (lineNum + 1 === splitHtml.length) return
 +
 
 +
            // 显示行号为起始行号加当前行号
 +
            displayLineNum = lineNum + lineNumFrom
 +
 
 +
            // 是否高亮显示
 +
            var isPing = ''
 +
            if (pingLine.includes(lineNum + 1)) {
 +
              isPing = ' line-ping'
 +
            }
 +
 
 +
            // 添加行号
 +
            $html.find('.line-numbers').append(
 +
              $('<div>', { class: 'line-number-block' + isPing, text: displayLineNum })
 +
            )
 +
 
 +
            // 添加内容
 
             $html.find('.line-content').append(
 
             $html.find('.line-content').append(
               $('<div>', { class: 'line-row', html: lineContent })
+
               $('<div>', { class: 'line-row' + isPing, html: lineContent })
            )
 
            $html.find('.line-numbers').append(
 
              $('<div>', { class: 'line-number-block', text: lineNum })
 
 
             )
 
             )
 
           })
 
           })
 +
 
           return $html
 
           return $html
 
         })
 
         })

Latest revision as of 22:14, 29 October 2020

/**
 * @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) { // Lua
    $('#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) {
      var $block = $(block)

      if ($block.attr('data-hljs') === 'done') return

      // 高亮当前块
      hljs.highlightBlock(block)
      $block.attr('data-hljs', 'done')

      // 行号显示
      if ($block.data('line-from')!==undefined || $block.data('line-ping') !== undefined) $block.addClass('linenums')
      if ($block.hasClass('linenums')) {

        // 起始行号
        var lineNumFrom = Number($block.data('line-from'))
        if (isNaN(lineNumFrom) || lineNumFrom < 1) lineNumFrom = 1
        lineNumFrom = Number(lineNumFrom.toFixed(0))

        // 高亮行号
        var pingLine = $block.data('line-emphatic') || $block.data('line-ping')
        if (typeof pingLine === 'number') pingLine = [pingLine]
        if (typeof pingLine === 'string') pingLine = pingLine.replace(/\s/g, '').split(',')
        if (typeof pingLine !== 'object') pingLine = []

        $block.html(function () {

          // 创建 jQuery 对象
          var $html = $('<div>', { class: 'line-container' }).append(
            $('<div>', { class: 'line-content' }),
            $('<div>', { class: 'line-numbers' })
          )

          // 拆开每一行
          var splitHtml = $(this).html().split('\n')
          $.each(splitHtml, function (lineNum, lineContent) {

            // 防止最后一行后被添加一行空行
            if (lineNum + 1 === splitHtml.length) return

            // 显示行号为起始行号加当前行号
            displayLineNum = lineNum + lineNumFrom

            // 是否高亮显示
            var isPing = ''
            if (pingLine.includes(lineNum + 1)) {
              isPing = ' line-ping'
            }

            // 添加行号
            $html.find('.line-numbers').append(
              $('<div>', { class: 'line-number-block' + isPing, text: displayLineNum })
            )

            // 添加内容
            $html.find('.line-content').append(
              $('<div>', { class: 'line-row' + isPing, html: lineContent })
            )
          })

          return $html
        })
      }

    })
  })
})()