|
|
| 第1行： |
第1行： |
| // 处理<mco>标签的脚本 | | // 添加悬停计时器到行或段落 |
| (function() { | | (function() { |
| function escapeHtml(unsafe) { | | // 目标元素选择器（可根据需要调整） |
| return unsafe
| | var selectors = 'tr, p'; |
| .replace(/&/g, "&")
| | |
| .replace(/</g, "<")
| | document.querySelectorAll(selectors).forEach(function(element) { |
| .replace(/>/g, ">")
| | var hoverTimer; |
| .replace(/"/g, """)
| |
| .replace(/'/g, "'");
| |
| }
| |
| | |
| function processMcoElements() {
| |
| var mcoElements = document.getElementsByTagName('mco'); | |
| | | |
| Array.prototype.forEach.call(mcoElements, function(mco) { | | element.addEventListener('mouseenter', function() { |
| var content = mco.textContent.trim();
| | // 启动3秒计时器 |
| var lines = content.split('\n');
| | hoverTimer = setTimeout(function() { |
| var totalLines = lines.length;
| | element.classList.add('line'); |
|
| | }, 3000); |
| // 创建容器
| |
| var container = document.createElement('div');
| |
| container.className = 'mco-container';
| |
|
| |
| // 添加行号列 | |
| var lineNumberDiv = document.createElement('div');
| |
| lineNumberDiv.className = 'line-number';
| |
| for (var i = 1; i <= totalLines + 4; i++) {
| |
| lineNumberDiv.innerHTML += '<div>' + i + '</div>';
| |
| }
| |
| container.appendChild(lineNumberDiv);
| |
|
| |
| // 添加代码块
| |
| var codeBlock = document.createElement('div');
| |
| codeBlock.className = 'code-block'; | |
|
| |
| lines.forEach(function(line) {
| |
| var lineDiv = document.createElement('div');
| |
| lineDiv.className = 'line';
| |
| line = line.trimRight();
| |
|
| |
| if (line === '') {
| |
| lineDiv.innerHTML = '<br>';
| |
| } else if (line.startsWith('[')) {
| |
| lineDiv.style.backgroundColor = '#F2F4FF';
| |
| lineDiv.innerHTML = '<span style="color:#8000FF;font-weight:bold">' + escapeHtml(line) + '</span>';
| |
| } else if (line.startsWith(';')) {
| |
| lineDiv.innerHTML = '<span style="color:#008000">' + escapeHtml(line) + '</span>';
| |
| } else if (line.includes('=')) {
| |
| var eqIndex = line.indexOf('=');
| |
| var key = escapeHtml(line.substring(0, eqIndex));
| |
| var rest = escapeHtml(line.substring(eqIndex + 1));
| |
| var semicolonIndex = rest.indexOf(';');
| |
|
| |
| if (semicolonIndex !== -1) {
| |
| var value = rest.substring(0, semicolonIndex);
| |
| var comment = rest.substring(semicolonIndex);
| |
| lineDiv.innerHTML = '<i style="color:#0000FF">' + key + '</i>' +
| |
| '<span style="color:#FF0000">=</span>' +
| |
| value +
| |
| '<span style="color:#006400">' + comment + '</span>';
| |
| } else {
| |
| lineDiv.innerHTML = '<i style="color:#0000FF">' + key + '</i>' +
| |
| '<span style="color:#FF0000">=</span>' +
| |
| rest;
| |
| }
| |
| } else { | |
| lineDiv.textContent = line;
| |
| }
| |
| codeBlock.appendChild(lineDiv);
| |
| });
| |
|
| |
| // 添加空行
| |
| for (var i = 0; i < totalLines + 3 - lines.length; i++) {
| |
| var emptyLine = document.createElement('div');
| |
| emptyLine.className = 'line';
| |
| emptyLine.innerHTML = '<br>';
| |
| codeBlock.appendChild(emptyLine);
| |
| } | |
|
| |
| container.appendChild(codeBlock);
| |
| mco.parentNode.replaceChild(container, mco);
| |
| }); | | }); |
| }
| | |
| | | element.addEventListener('mouseleave', function() { |
| // 在页面加载时运行
| | // 清除计时器并移除样式 |
| if (window.addEventListener) {
| | clearTimeout(hoverTimer); |
| window.addEventListener('load', processMcoElements); | | element.classList.remove('line'); |
| } else if (window.attachEvent) {
| | }); |
| window.attachEvent('onload', processMcoElements);
| | }); |
| } | |
| })(); | | })(); |
