MediaWiki:Common.js:修订间差异
外观
小无编辑摘要 |
小无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* | /* 添加样式 */ | ||
(function() { | (function() { | ||
function | var styles = [ | ||
var | '.mco-ini-container { display: flex; }', | ||
'.mco-ini-line:hover { background-color: #E8E8FF !important; }', | |||
'.mco-ini-line-numbers {', | |||
' background-color: #e4e4e4;', | |||
' color: black;', | |||
' width: 39px;', | |||
' text-align: right;', | |||
' padding-right: 5px;', | |||
' font-family: Consolas, monospace;', | |||
' line-height: 1.2;', | |||
'}', | |||
'.mco-ini-code {', | |||
' font-family: "Courier New", monospace;', | |||
' background-color: #f8f9fa;', | |||
' color: #000;', | |||
' border: 1px solid #eaecf0;', | |||
' padding: 1em;', | |||
' overflow-x: hidden;', | |||
' line-height: 1.2;', | |||
' white-space: pre-wrap;', | |||
'}', | |||
'.mco-ini-section { background-color: #F2F4FF; }', | |||
'.mco-ini-section b { color: #8000FF; }', | |||
'.mco-ini-comment { color: #008000; }', | |||
'.mco-ini-key { color: #0000ff; font-style: italic; }', | |||
'.mco-ini-equal { color: #ff0000; }', | |||
'.mco-ini-value-comment { color: #006400; }' | |||
].join('\n'); | |||
var styleTag = document.createElement('style'); | |||
styleTag.textContent = styles; | |||
document.head.appendChild(styleTag); | |||
})(); | |||
/* 处理内容 */ | |||
window.processMcoIniBlocks = function() { | |||
$('.mco-ini-content').each(function() { | |||
var $pre = $(this); | |||
var content = $pre.text().trim(); | |||
var lines = content.split('\n'); | |||
var totalLines = lines.length; | |||
var codeBlockLines = totalLines + 4; | |||
// 创建容器 | |||
var $container = $('<div>').addClass('mco-ini-container'); | |||
// 添加行号 | |||
var $lineNumbers = $('<div>').addClass('mco-ini-line-numbers'); | |||
for (var i = 1; i <= codeBlockLines; i++) { | |||
$lineNumbers.append($('<div>').text(i)); | |||
} | |||
$container.append($lineNumbers); | |||
// 添加代码内容 | |||
var $codeBlock = $('<div>').addClass('mco-ini-code'); | |||
lines.forEach(function(line) { | |||
line = line.replace(/\r$/, '').trimRight(); | |||
var $lineDiv = $('<div>').addClass('mco-ini-line'); | |||
if (line === '') { | |||
$lineDiv.html('<br>'); | |||
} else if (line.startsWith('[')) { | |||
$lineDiv.addClass('mco-ini-section').html('<b>' + line.escapeHTML() + '</b>'); | |||
} else if (line.startsWith(';')) { | |||
$lineDiv.html('<span class="mco-ini-comment">' + line.escapeHTML() + '</span>'); | |||
} else { | |||
var equalIdx = line.indexOf('='); | |||
if (equalIdx !== -1) { | |||
var key = line.substr(0, equalIdx); | |||
var rest = line.substr(equalIdx + 1); | |||
var commentIdx = rest.indexOf(';'); | |||
var value = commentIdx !== -1 ? rest.substr(0, commentIdx) : rest; | |||
var comment = commentIdx !== -1 ? rest.substr(commentIdx) : ''; | |||
var | |||
var | |||
var rest | |||
var html = '<span class="mco-ini-key">' + key.escapeHTML() + '</span>' + | |||
'<span class="mco-ini-equal">=</span>' + | |||
value.escapeHTML(); | |||
if (comment) { | |||
html += '<span class="mco-ini-value-comment">' + comment.escapeHTML() + '</span>'; | |||
} | |||
$lineDiv.html(html); | |||
} else { | } else { | ||
lineDiv. | $lineDiv.text(line.escapeHTML()); | ||
} | } | ||
} | } | ||
$codeBlock.append($lineDiv); | |||
}); | }); | ||
// 补充空行 | |||
for (var i = totalLines; i < codeBlockLines; i++) { | |||
$codeBlock.append($('<div>').addClass('mco-ini-line').html('<br>')); | |||
} | } | ||
$container.append($codeBlock); | |||
// 替换原始元素 | |||
$pre.replaceWith($container); | |||
}); | |||
}; | |||
/* HTML转义 */ | |||
window.escapeHTML = function(str) { | |||
return str.toString() | |||
.replace(/&/g, '&') | |||
.replace(/</g, '<') | |||
.replace(/>/g, '>') | |||
.replace(/"/g, '"') | |||
.replace(/'/g, '''); | |||
}; | |||
/* 页面加载后执行 */ | |||
$(document).ready(function() { | |||
processMcoIniBlocks(); | |||
}); | |||
2025年5月4日 (日) 20:18的版本
/* 添加样式 */
(function() {
var styles = [
'.mco-ini-container { display: flex; }',
'.mco-ini-line:hover { background-color: #E8E8FF !important; }',
'.mco-ini-line-numbers {',
' background-color: #e4e4e4;',
' color: black;',
' width: 39px;',
' text-align: right;',
' padding-right: 5px;',
' font-family: Consolas, monospace;',
' line-height: 1.2;',
'}',
'.mco-ini-code {',
' font-family: "Courier New", monospace;',
' background-color: #f8f9fa;',
' color: #000;',
' border: 1px solid #eaecf0;',
' padding: 1em;',
' overflow-x: hidden;',
' line-height: 1.2;',
' white-space: pre-wrap;',
'}',
'.mco-ini-section { background-color: #F2F4FF; }',
'.mco-ini-section b { color: #8000FF; }',
'.mco-ini-comment { color: #008000; }',
'.mco-ini-key { color: #0000ff; font-style: italic; }',
'.mco-ini-equal { color: #ff0000; }',
'.mco-ini-value-comment { color: #006400; }'
].join('\n');
var styleTag = document.createElement('style');
styleTag.textContent = styles;
document.head.appendChild(styleTag);
})();
/* 处理内容 */
window.processMcoIniBlocks = function() {
$('.mco-ini-content').each(function() {
var $pre = $(this);
var content = $pre.text().trim();
var lines = content.split('\n');
var totalLines = lines.length;
var codeBlockLines = totalLines + 4;
// 创建容器
var $container = $('<div>').addClass('mco-ini-container');
// 添加行号
var $lineNumbers = $('<div>').addClass('mco-ini-line-numbers');
for (var i = 1; i <= codeBlockLines; i++) {
$lineNumbers.append($('<div>').text(i));
}
$container.append($lineNumbers);
// 添加代码内容
var $codeBlock = $('<div>').addClass('mco-ini-code');
lines.forEach(function(line) {
line = line.replace(/\r$/, '').trimRight();
var $lineDiv = $('<div>').addClass('mco-ini-line');
if (line === '') {
$lineDiv.html('<br>');
} else if (line.startsWith('[')) {
$lineDiv.addClass('mco-ini-section').html('<b>' + line.escapeHTML() + '</b>');
} else if (line.startsWith(';')) {
$lineDiv.html('<span class="mco-ini-comment">' + line.escapeHTML() + '</span>');
} else {
var equalIdx = line.indexOf('=');
if (equalIdx !== -1) {
var key = line.substr(0, equalIdx);
var rest = line.substr(equalIdx + 1);
var commentIdx = rest.indexOf(';');
var value = commentIdx !== -1 ? rest.substr(0, commentIdx) : rest;
var comment = commentIdx !== -1 ? rest.substr(commentIdx) : '';
var html = '<span class="mco-ini-key">' + key.escapeHTML() + '</span>' +
'<span class="mco-ini-equal">=</span>' +
value.escapeHTML();
if (comment) {
html += '<span class="mco-ini-value-comment">' + comment.escapeHTML() + '</span>';
}
$lineDiv.html(html);
} else {
$lineDiv.text(line.escapeHTML());
}
}
$codeBlock.append($lineDiv);
});
// 补充空行
for (var i = totalLines; i < codeBlockLines; i++) {
$codeBlock.append($('<div>').addClass('mco-ini-line').html('<br>'));
}
$container.append($codeBlock);
// 替换原始元素
$pre.replaceWith($container);
});
};
/* HTML转义 */
window.escapeHTML = function(str) {
return str.toString()
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
};
/* 页面加载后执行 */
$(document).ready(function() {
processMcoIniBlocks();
});