Site Notice

hello, world

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

From Project-EPB Commons
([InPageEdit] 没有编辑摘要)
 
([InPageEdit] 没有编辑摘要)
Line 1: Line 1:
/** highlight.js **/
+
/**
 +
* @name highlight.js
 +
* @description 为页面内的代码块提供语法高亮
 +
*/
 
!(function () {
 
!(function () {
 +
 +
  // 为代码页面添加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 9: Line 14:
 
     $('#mw-content-text pre').addClass('lang-lua hightlight linenums')
 
     $('#mw-content-text pre').addClass('lang-lua hightlight linenums')
 
   }
 
   }
 +
 +
  // 加载主题
 +
  mw.loader.load('https://cdn.jsdelivr.net/npm/[email protected]/styles/solarized-light.css', 'text/css')
 +
 +
  // 加载脚本
 
   $.ajax({
 
   $.ajax({
 
     url: 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js',
 
     url: 'https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js',
Line 14: Line 24:
 
     cache: true
 
     cache: true
 
   }).then(function () {
 
   }).then(function () {
     $('#mw-content-text .hightlight').each(function (_, item) {
+
 
       hljs.highlightBlock(item)
+
    // 初始化高亮
       if ($(item).hasClass('linenums')) {
+
     $('#mw-content-text pre.hightlight, #mw-content-text pre.hljs').each(function (_, block) {
         $(item).html(function () {
+
       hljs.highlightBlock(block)
           var html = $(this).html()
+
 
          html = html.split('\n')
+
      // 添加行号
           var $content = $('<div>', { class: 'line-all' })
+
      var $block = $(block)
          $.each(html, function (line, lineContent) {
+
       if ($block.hasClass('linenums')) {
             $content.append(
+
         $block.html(function () {
              $('<div>', { class: 'line-container' }).append(
+
           var splitHtml = $(this).html().split('\n')
                $('<div>', { class: 'line-num', text: line + 1 }),
+
           var $html = $('<div>', { class: 'line-container' }).append(
                $('<div>', { class: 'line-content', html: lineContent })
+
            $('<div>', { class: 'line-content' }),
              )
+
             $('<div>', { class: 'line-numbers' })
 +
          )
 +
          $.each(splitHtml, function (lineNum, lineContent) {
 +
            lineNum = lineNum + 1
 +
            $html.find('.line-content').append(
 +
              $('<div>', { class: 'line-row', html: lineContent })
 +
            )
 +
            $html.find('.line-numbers').append(
 +
              $('<div>', { class: 'line-number-block', text: lineNum })
 
             )
 
             )
 
           })
 
           })
           return $content
+
           return $html
 
         })
 
         })
 
       }
 
       }
 +
 
     })
 
     })
 
   })
 
   })
  mw.loader.load('https://cdn.jsdelivr.net/npm/[email protected]/styles/solarized-light.css', 'text/css')
 
 
})()
 
})()

Revision as of 20:18, 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 hightlight linenums')
  } else if (pageName.substr(pageName.length - 4, 4) === '.css') {
    $('#mw-content-text pre').addClass('lang-css hightlight linenums')
  } else if (mw.config.get('wgNamespaceNumber') === 828) {
    $('#mw-content-text pre').addClass('lang-lua hightlight 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.hightlight, #mw-content-text pre.hljs').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
            $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
        })
      }

    })
  })
})()