/** * 代码高亮前端逻辑 * * 服务端(inc/theme-highlight.php)已经把每个
 规范成了卡片结构:
 *   
*
语言标签 + 复制按钮
*
*
1 2 3 …
← 行号,独立于 pre *
…
*
*
* * 前端只做三件事:上色、复制、自动识别。 * 主题切换由后台设置决定,不在前台提供切换器。 */ (function () { 'use strict'; var CFG = window.YANG_HL || {}; var L = CFG.labels || {}; /* ── 上色 ────────────────────────────────────────────────── * 作者标了语言 → 按标记高亮。 * 没标 → 交给 runAuto(如果自动识别开着)。 * * 🔴 必须先判断 hljs 在不在:脚本被 CDN 拦了 / 加载失败时, * 直接调 hljs.highlightAll 会抛 TypeError,后面的复制绑定 * 全都执行不到 —— 表现成"整块代码没有任何按钮反应"。 * 这类故障排查起来极其费时,所以要显式挡一下。 */ function paint () { if (typeof window.hljs === 'undefined') { return false; } if (typeof hljs.highlightAll === 'function') { hljs.highlightAll(); } fixPlaintextClass(); return true; } /* ── 修掉 hljs 留下的 language-undefined ────────────────── * 🔴 实测(真实浏览器):hljs 11.12.0 的 highlightElement() 处理 * `` 之后,会把 class 改写成 * **`hljs language-undefined`**。 * * 原因是 plaintext 的定义只有 {name, aliases, disableAutodetect, * rawDefinition},**没有 `language` 字段**,而 highlightElement * 内部用 `result.language` 拼了 className —— 于是拼出字面量 "undefined"。 * * 后果不是报错(页面一切正常、颜色也对,因为 plaintext 本来就不上色), * 但 class 被污染成 `language-undefined`: * · 任何人按 `[class*="language-"]` 统计语言都会多数出一个"undefined" * · 自动化判据会被它误导(本项目的探针就吃到这个假数据) * 所以这里显式改回 language-plaintext。 * * 判据必须直接查 class 字面量,不能只看"有没有颜色"—— * plaintext 本来就没颜色,看颜色永远看不出这个问题。 */ function fixPlaintextClass () { var codes = document.querySelectorAll('code.language-undefined'); for (var i = 0; i < codes.length; i++) { var cb = codes[i].closest ? codes[i].closest('.cb') : null; // 只修我们自己卡片里、且 data-lang 确实是 plaintext 的 if (!cb) { continue; } if (cb.getAttribute('data-lang') !== 'plaintext') { continue; } codes[i].className = 'hljs language-plaintext'; } } /* 判断 highlightAuto 的返回是不是"真的识别出来了" * * 🔴 绝不能用 `if (r && r.language)`: * 实测 hljs 11.12.0 对纯文本/中文内容的 highlightAuto 返回 * `{language: 'undefined', relevance: 0}` —— 注意是**字符串** * 'undefined',不是 undefined 值。用真值判断会把它当成功, * 于是 class 写成 `language-undefined`、标签写成 labelOf('undefined') * 再被 toUpperCase() 变成「UNDEFINED」,直接显示在页面上。 * * 另有一个真实的正确性隐患:英文短句会被猜成 sql(relevance 只有 1)。 * relevance 太低说明"没有可信匹配",这种也应该当作没认出来。 */ function autoOk (r) { if (!r || !r.value) { return false; } var lang = r.language; if (!lang || lang === 'undefined' || lang === 'null') { return false; } if (typeof lang !== 'string') { return false; } // relevance 为 0 = 完全没有命中任何语法特征 if (!r.relevance || r.relevance <= 0) { return false; } // 语言必须在 hljs 里真的注册过,否则写进 class 就是白板 if (typeof hljs.getLanguage === 'function' && !hljs.getLanguage(lang)) { return false; } return true; } /* ── 自动识别 ──────────────────────────────────────────────── * 🔴 这个开关必须是**真的**:拨开就真跑一次 highlightAuto 并写回, * 拨关就把高亮还原成纯文本、标签藏起来。 * 原型阶段这版曾经是个空壳(只改了一个不存在元素的 display), * 点了没有任何变化 —— 那种假开关什么都验证不了。 * * 🔴 只对**没标语言**的块生效。有标记的永远按标记来, * 因为自动识别在站内实测准确率只有 22%,不能让它覆盖作者的标注。 */ function runAuto (on) { if (typeof window.hljs === 'undefined') { return; } var boxes = document.querySelectorAll('.cb'); for (var i = 0; i < boxes.length; i++) { (function (box) { // 作者标了语言的一律不动 if (box.getAttribute('data-guess') === '0') { return; } var code = box.querySelector('pre > code'); var tag = box.querySelector('.cb-lang'); if (!code) { return; } // 原始源码:用属性缓存,避免从高亮后的 DOM 反解 var src = code.getAttribute('data-raw'); if (src === null) { src = code.textContent; code.setAttribute('data-raw', src); } if (on) { var r = hljs.highlightAuto(src); if (autoOk(r)) { code.innerHTML = r.value; code.className = 'hljs language-' + r.language; if (tag) { tag.textContent = labelOf(r.language); // 保持虚线边框:这是猜的,不是作者标的 tag.setAttribute('data-guess', '1'); tag.style.display = ''; } box.setAttribute('data-lang', r.language); } else { // 认不出来:保持纯文本,标签显示 — /* 🔴 这里**必须留着** tag 上的 data-guess="1"。 * 认不出 ≠ 已确认。删掉它,CSS 的虚线+斜体就失效, * 标签退回成实线正体的「—」—— 看上去和作者亲手写的 * 「纯文本」一模一样,等于用"已确认"的样式表示"没认出来", * 恰好相反。作者没标语言这件事本身也仍然是"未确认"状态。 * (box 上的 data-guess="1" 也不能动:runAuto 靠它 * 判断"这块可以反复重新识别"。) */ code.textContent = src; code.className = 'hljs'; if (tag) { tag.textContent = '—'; tag.setAttribute('data-guess', '1'); } } } else { /* 自动识别被关掉:还原成纯文本。 * 🔴 同样要保留 tag 上的 data-guess="1": * 关掉识别之后"这块是什么语言"依然**未知**,标签还是「—」, * 就必须还是虚线斜体。删掉它会让所有未标注块在关闭识别时 * 一齐变成实线正体,看起来像"作者确认过是纯文本"。 */ code.textContent = src; code.className = 'hljs'; if (tag) { tag.textContent = '—'; tag.setAttribute('data-guess', '1'); } box.setAttribute('data-lang', ''); } })(boxes[i]); } // runAuto 里也会重写 code.className,所以这里必须再修一次。 // (只放在 paint() 里不够:runAuto 是 DOMContentLoaded 之后又跑一遍的, // 会把 paint() 刚修好的 class 覆盖掉。) fixPlaintextClass(); } /* 语言名 → 显示名 * * 🔴 表里只能放**确实打包进 highlight.min.js 的语言**。 * 放进来但没打包 → hljs 认不出 → 代码块静默白板(只 console.warn, * 不抛错)。所以 dos / dockerfile / nginx / powershell 已从映射链路 * 与语言白名单里移除,这里保留文案只是为了 highlightAuto 万一返回 * 它们时标签不是全大写,不影响上色。 */ function labelOf (lang) { var M = { bash: 'Bash', c: 'C', cpp: 'C++', csharp: 'C#', css: 'CSS', diff: 'Diff', dos: 'Batch', dockerfile: 'Dockerfile', go: 'Go', graphql: 'GraphQL', ini: 'INI', java: 'Java', javascript: 'JavaScript', json: 'JSON', kotlin: 'Kotlin', less: 'Less', lua: 'Lua', makefile: 'Makefile', markdown: 'Markdown', nginx: 'Nginx', objectivec: 'Objective-C', perl: 'Perl', php: 'PHP', plaintext: '纯文本', powershell: 'PowerShell', python: 'Python', r: 'R', ruby: 'Ruby', rust: 'Rust', scss: 'SCSS', shell: 'Shell', sql: 'SQL', swift: 'Swift', typescript: 'TypeScript', xml: 'HTML', yaml: 'YAML' }; return M[lang] || (lang ? lang.toUpperCase() : ''); } /* ── 复制 ────────────────────────────────────────────────── * 🔴 两个硬约束: * 1. navigator.clipboard 只在安全上下文(HTTPS/localhost)存在, * HTTP 下是 undefined,直接调抛 TypeError,表现成"点了没反应"。 * 必须留 execCommand 退路。 * 2. 取 textContent 而不是 innerHTML —— 高亮后代码里全是 。 * 行号在
 外面,天然不会进 textContent,所以复制永远不含行号。 */
	function copyText (text) {
		if (navigator.clipboard && window.isSecureContext) {
			return navigator.clipboard.writeText(text);
		}
		return new Promise(function (resolve, reject) {
			var ta = document.createElement('textarea');
			ta.value = text;
			ta.style.position = 'fixed';
			ta.style.top = '-9999px';
			ta.setAttribute('readonly', 'readonly');
			document.body.appendChild(ta);
			ta.select();
			try { ta.setSelectionRange(0, text.length); } catch (e) { /* 老浏览器 */ }
			var ok = false;
			try { ok = document.execCommand('copy'); } catch (e2) { ok = false; }
			document.body.removeChild(ta);
			ok ? resolve() : reject(new Error('execCommand failed'));
		});
	}

	function flash (btn, cls, label) {
		var old = btn.textContent;
		btn.textContent = label;
		btn.className = btn.className + ' ' + cls;
		btn.disabled = true;
		setTimeout(function () {
			btn.textContent = old;
			btn.className = btn.className.replace(' ' + cls, '');
			btn.disabled = false;
		}, 2000);
	}

	/* 事件委托:评论区的代码块是 AJAX 插进来的,不能绑在元素上 */
	document.addEventListener('click', function (e) {
		var btn = e.target.closest ? e.target.closest('[data-copy]') : null;
		if (!btn) { return; }
		var box = btn.closest('.cb');
		var code = box ? box.querySelector('pre > code') : null;
		if (!code) { return; }
		e.preventDefault();
		copyText(code.textContent).then(function () {
			flash(btn, 'done', L.copied || '✓ 已复制');
		}).catch(function () {
			flash(btn, 'err', L.failed || '✗ 复制失败');
		});
	});

	/* ── 初始状态 ────────────────────────────────────────────── */
	function init () {
		if (!paint()) {
			return;
		}
		runAuto(CFG.autoDetect !== false);
	}

	// 供评论区 AJAX 插入新内容后重新调用
	window.yangHlRefresh = init;

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init);
	} else {
		init();
	}
})();