Site Notice
hello, world
Difference between revisions of "MediaWiki:Gadget-Highlight.js"
From Project-EPB Commons
m ([InPageEdit] 没有编辑摘要) |
([InPageEdit] 没有编辑摘要) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
!(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 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') | ||
− | // | + | // 行号显示 |
− | + | 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 () { | ||
− | + | ||
+ | // 创建 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) { | ||
− | + | ||
− | if (lineNum === splitHtml.length) return // | + | // 防止最后一行后被添加一行空行 |
+ | 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 }) |
− | |||
− | |||
− | |||
) | ) | ||
}) | }) | ||
+ | |||
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
})
}
})
})
})()