文件，本文件.html＋任意源码.js
功能，查看本html和.js的源码
一 场景 src 静态路由，在不需要服务器的情况下就可以高亮查看，
二 拓展 例如你想做一个游戏，能直接内部查看自己的源码
或者你想阅读Python源码，可以脚本把他转成js，后续加功能AI一体化等等
可以把这个页面做成一个插件，博主时间有限，没有时间优化自己的语言，还请见谅
源码 ，博主之前源码阅读还有
1. 离线语法高亮 2.任意语言，语法高亮。 是复制进去查看那种，不是直接查看已有的。
3. 本文，查看已有的源码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>源码高亮查看器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" id="prism-theme">
<style>
/* 1. 根元素CSS变量定义 */
:root {
--primary-color: #00b4d8;
--secondary-color: #0077b6;
--accent-color: #90e0ef;
--code-bg: #0a0e27;
--text-color: #e0f2fe;
--border-color: #1e3a5f;
--card-bg: rgba(255, 255, 255, 0.05);
--base-font-size: 1rem;
--header-height: 3.125rem; /* 50px */
}
/* 2. 全局重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 3. HTML根元素设置 */
html {
font-size: 16px; /* 基准字体大小，1rem = 16px */
}
/* 4. 页面主体样式 */
body {
font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;
background: linear-gradient(135deg, #0a0e27 0%, #1e3a5f 40%, #0077b6 100%);
min-height: 100vh;
color: var(--text-color);
position: relative;
overflow-x: hidden;
}
/* 5. 动态背景伪元素 */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 25% 35%, rgba(0, 180, 216, 0.15) 0%, transparent 50%),
radial-gradient(circle at 75% 65%, rgba(144, 224, 239, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 119, 182, 0.08) 0%, transparent 50%);
background-size: 5rem 5rem, 3.75rem 3.75rem, 4.375rem 4.375rem;
animation: backgroundFloat 30s linear infinite;
z-index: 0;
}
/* 6. 背景动画关键帧 */
@keyframes backgroundFloat {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-2.5rem, -2.5rem) rotate(-360deg); }
}
/* 7. 主容器样式 */
.container {
position: relative;
z-index: 1;
min-height: 100vh;
display: flex;
flex-direction: column;
padding: 0;
}
/* 8. 页面头部样式 */
.header {
background: rgba(10, 14, 39, 0.95);
backdrop-filter: blur(20px);
padding: 0.5rem 0.625rem;
border-bottom: 0.0625rem solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.3);
height: var(--header-height);
}
/* 9. 头部内容区域 */
.header-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* 10. 头部标题样式 */
.header h1 {
font-size: 1rem;
font-weight: 700;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 0.03125rem;
line-height: 1.2;
}
/* 11. 方向提示文字 */
.orientation-hint {
font-size: 0.625rem;
color: var(--accent-color);
opacity: 0.8;
margin-top: 0.125rem;
}
/* 12. 控制按钮容器 */
.code-controls {
display: flex;
gap: 0.375rem;
flex-wrap: wrap;
}
/* 13. 控制按钮基础样式 */
.control-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
padding: 0.375rem 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 0.5625rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.1875rem;
white-space: nowrap;
box-shadow: 0 0.125rem 0.5rem rgba(0, 180, 216, 0.3);
}
/* 14. 控制按钮悬停效果 */
.control-btn:hover {
transform: translateY(-0.125rem);
box-shadow: 0 0.25rem 0.75rem rgba(0, 180, 216, 0.5);
}
/* 15. 控制按钮激活效果 */
.control-btn:active {
transform: translateY(-0.0625rem);
}
/* 16. 控制按钮选中状态 */
.control-btn.active {
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
box-shadow: 0 0 0.9375rem rgba(144, 224, 239, 0.6);
}
/* 17. 主内容容器 */
.main-container {
flex: 1;
display: flex;
flex-direction: column;
padding: 0;
max-width: 100%;
}
/* 18. 代码展示区域 */
.code-view {
display: flex;
flex: 1;
flex-direction: column;
}
/* 19. 代码容器样式 */
.code-container {
flex: 1;
background: var(--code-bg);
overflow: auto;
height: calc(100vh - var(--header-height));
border: none;
padding: 0.9375rem;
width: 100%;
}
/* 20. 代码块样式 */
pre[class*="language-"] {
font-size: var(--base-font-size);
transition: font-size 0.3s ease;
margin: 0;
padding: 0.9375rem;
border-radius: 0;
}
/* 21. 加载提示样式 */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 12.5rem;
color: #94a3b8;
font-size: 1.125rem;
}
/* 22. Toast提示框样式 */
.toast {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 0.625rem 1.25rem;
border-radius: 1.25rem;
font-size: 0.75rem;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
box-shadow: 0 0.1875rem 0.9375rem rgba(0, 0, 0, 0.4);
}
/* 23. Toast显示状态 */
.toast.show {
opacity: 1;
}
/* 24. 手机端适配 */
@media (max-width: 768px) {
html {
font-size: 14px; /* 移动端基准字体大小 */
}
.header {
padding: 0.375rem 0.5rem;
height: 2.8125rem; /* 45px */
}
.header h1 {
font-size: 0.875rem;
}
.orientation-hint {
font-size: 0.5625rem;
}
.control-btn {
padding: 0.3125rem 0.375rem;
font-size: 0.5rem;
}
.code-container {
padding: 0.625rem;
height: calc(100vh - 2.8125rem);
}
pre[class*="language-"] {
font-size: var(--base-font-size);
padding: 0.625rem;
}
}
/* 25. 超小屏幕适配 */
@media (max-width: 480px) {
html {
font-size: 12px; /* 更小屏幕基准字体大小 */
}
.header {
height: 2.5rem; /* 40px */
}
.code-container {
height: calc(100vh - 2.5rem);
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-content">
<h1>「源码查看器」</h1>
<div class="orientation-hint">请横屏阅读</div>
</div>
<div class="code-controls">
<button class="control-btn" id="externalCodeBtn" onclick="showExternalCode()">📄外部代码</button>
<button class="control-btn" id="pageSourceBtn" onclick="showPageSource()">🌐页面源码</button>
<button class="control-btn" onclick="adjustZoom(-2)">🔍-</button>
<button class="control-btn" onclick="adjustZoom(2)">🔍+</button>
<button class="control-btn" onclick="resetZoom()">🔄</button>
<button class="control-btn" onclick="cycleTheme()">🎨</button>
<button class="control-btn" onclick="copyCode()">📋复制</button>
</div>
</div>
<div class="main-container">
<!-- 代码查看区域 -->
<div class="code-view" id="codeView">
<div class="code-container" id="codeContainer">
<div class="loading">正在加载代码...</div>
</div>
</div>
</div>
</div>
<!-- Toast 提示 -->
<div class="toast" id="toast"></div>
<script>
// 全局变量
let currentFontSize = 1; // 1rem
let currentCode = '';
let externalCode = '';
let pageSourceCode = '';
let prismLoaded = false;
let currentThemeIndex = 0;
let currentViewMode = 'external'; // 'external' 或 'page'
// 高亮主题配置
const themes = [
{ name: 'Tomorrow Night', url: 'prism-tomorrow.min.css' },
{ name: 'Dark', url: 'prism-dark.min.css' },
{ name: 'Okaidia', url: 'prism-okaidia.min.css' },
{ name: 'VSC Dark Plus', url: 'prism-vsc-dark-plus.min.css' },
{ name: 'Atom Dark', url: 'prism-atom-dark.min.css' },
{ name: 'Synthwave 84', url: 'prism-synthwave84.min.css' },
{ name: 'Dracula', url: 'prism-dracula.min.css' },
{ name: 'Material Dark', url: 'prism-material-dark.min.css' }
];
/* 1. 页面加载完成后执行的初始化函数 */
window.onload = async function () {
try {
// 加载外部代码
const response = await fetch('/A.数据库/2.相关插件/A_插件工具/3.插件_字体缩放.js');
if (!response.ok) {
throw new Error('无法加载配置文件');
}
externalCode = await response.text();
currentCode = externalCode;
// 获取页面源代码
pageSourceCode = await getPageSource();
// 加载Prism.js
if (!prismLoaded) {
await loadPrism();
prismLoaded = true;
}
// 显示代码
displayCode();
// 设置默认激活状态
document.getElementById('externalCodeBtn').classList.add('active');
showToast('代码加载完成');
} catch (error) {
console.error('初始化失败:', error);
showToast('初始化失败，请刷新页面重试');
}
};
/* 2. 初始化应用的主函数 */
async function initApp() {
try {
// 加载外部代码
const response = await fetch('1_五子棋config.js');
if (!response.ok) {
throw new Error('无法加载配置文件');
}
externalCode = await response.text();
currentCode = externalCode;
// 获取页面源代码
pageSourceCode = await getPageSource();
// 加载Prism.js
if (!prismLoaded) {
await loadPrism();
prismLoaded = true;
}
// 显示代码
displayCode();
// 设置默认激活状态
document.getElementById('externalCodeBtn').classList.add('active');
showToast('代码加载完成');
} catch (error) {
console.error('初始化失败:', error);
showToast('初始化失败，请刷新页面重试');
}
}
/* 3. 获取页面源代码的函数 */
async function getPageSource() {
// 获取当前页面的完整HTML源代码
let pageSource = document.documentElement.outerHTML;
// 格式化HTML（简单的缩进处理）
pageSource = formatHTML(pageSource);
return pageSource;
}
/* 4. 格式化HTML的函数 */
function formatHTML(html) {
let formatted = '';
let indent = 0;
const tab = ' '; // 2个空格作为缩进
html.split(/>\s*</).forEach(function(element) {
if (element.match(/^\/\w/)) {
// 闭合标签
indent--;
}
formatted += tab.repeat(Math.max(0, indent)) + '<' + element + '>\n';
if (element.match(/^<?\w[^>]*[^\/]$/) && !element.startsWith("!--")) {
// 开始标签
indent++;
}
});
return formatted.trim();
}
/* 5. 显示外部代码的函数 */
function showExternalCode() {
currentViewMode = 'external';
currentCode = externalCode;
displayCode();
// 更新按钮状态
document.getElementById('externalCodeBtn').classList.add('active');
document.getElementById('pageSourceBtn').classList.remove('active');
showToast('已切换到外部代码');
}
/* 6. 显示页面源代码的函数 */
function showPageSource() {
currentViewMode = 'page';
currentCode = pageSourceCode;
displayCode();
// 更新按钮状态
document.getElementById('pageSourceBtn').classList.add('active');
document.getElementById('externalCodeBtn').classList.remove('active');
showToast('已切换到页面源码');
}
/* 7. 加载Prism.js的函数 */
async function loadPrism() {
// 加载核心库
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js');
// 加载自动加载器
await loadScript('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js');
}
/* 8. 动态加载脚本的函数 */
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
/* 9. 显示代码高亮的函数 */
function displayCode() {
const container = document.getElementById('codeContainer');
const language = detectLanguage(currentCode);
let codeHtml = `<pre><code class="language-${language}">${escapeHtml(currentCode)}</code></pre>`;
container.innerHTML = codeHtml;
// 应用高亮
if (window.Prism) {
Prism.highlightAll();
}
// 应用当前字体大小
applyFontSize();
}
/* 10. 检测代码语言的函数 */
function detectLanguage(code) {
if (currentViewMode === 'page') {
// 页面源码使用HTML高亮
return 'html';
}
// 检测JavaScript
if (code.includes('const ') || code.includes('let ') || code.includes('function')) {
return 'javascript';
}
// 检测JSON
if ((code.startsWith('{') && code.endsWith('}')) ||
(code.startsWith('[') && code.endsWith(']'))) {
return 'json';
}
// 默认为JavaScript
return 'javascript';
}
/* 11. 切换高亮主题的函数 */
async function cycleTheme() {
currentThemeIndex = (currentThemeIndex + 1) % themes.length;
await applyTheme(currentThemeIndex);
showToast(`已切换到: ${themes[currentThemeIndex].name}`);
// 重新应用高亮
if (window.Prism && currentCode) {
displayCode();
}
}
/* 12. 应用主题的函数 */
async function applyTheme(index) {
const theme = themes[index];
const themeLink = document.getElementById('prism-theme');
themeLink.href = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/${theme.url}`;
}
/* 13. 调整字体大小的函数 */
function adjustZoom(delta) {
// 将delta转换为rem单位（假设基准为16px，delta为px值）
const deltaInRem = delta / 16;
currentFontSize = Math.max(0.75, Math.min(1.625, currentFontSize + deltaInRem));
applyFontSize();
showToast(`字体大小: ${(currentFontSize * 16).toFixed(0)}px`);
}
/* 14. 应用字体大小的函数 */
function applyFontSize() {
document.documentElement.style.setProperty('--base-font-size', currentFontSize + 'rem');
const codeElements = document.querySelectorAll('pre[class*="language-"]');
codeElements.forEach(element => {
element.style.fontSize = currentFontSize + 'rem';
});
}
/* 15. 重置字体大小的函数 */
function resetZoom() {
currentFontSize = 1; // 1rem
applyFontSize();
showToast('字体大小已重置');
}
/* 16. 复制代码的函数 */
function copyCode() {
if (currentCode) {
navigator.clipboard.writeText(currentCode).then(() => {
showToast('代码已复制到剪贴板');
}).catch(() => {
showToast('复制失败，请手动选择复制');
});
}
}
/* 17. HTML转义的函数 */
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
/* 18. 显示提示消息的函数 */
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.add('show');
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
/* 19. 键盘事件监听函数 */
document.addEventListener('keydown', function (e) {
// Ctrl+Plus/Minus 调整字体大小
if (e.ctrlKey || e.metaKey) {
if (e.key === '+' || e.key === '=') {
e.preventDefault();
adjustZoom(2);
} else if (e.key === '-' || e.key === '_') {
e.preventDefault();
adjustZoom(-2);
} else if (e.key === '0') {
e.preventDefault();
resetZoom();
} else if (e.key === 't' || e.key === 'T') {
e.preventDefault();
cycleTheme();
} else if (e.key === '1') {
e.preventDefault();
showExternalCode();
} else if (e.key === '2') {
e.preventDefault();
showPageSource();
}
}
});
</script>
</body>
</html>
扫一扫
1773
到【灌水乐园】发言
