icsboyx/bhs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enhance code content display with syntax highlighting and improve logging structure

Browse Source
This commit is contained in:
icsboyx
2026-01-12 16:14:47 +01:00
parent 1b295aa843
commit 0685de8ffa
5 changed files with 86 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
data/html/style.css
View File

@@ -363,6 +363,18 @@ h1 .home-link:hover {
scrollbar-width: thin;
}
.zoom-text-content.code-content {
background-color: var(--bg-primary);
border-color: var(--border-color);
overflow-x: auto;
white-space: pre;
}
.zoom-text-content.code-content code {
display: block;
white-space: pre;
}
.zoom-text-content::-webkit-scrollbar {
width: 8px;
}
@@ -393,7 +405,7 @@ h1 .home-link:hover {
align-items: center;
justify-content: center;
z-index: 9999;
cursor: zoom-out;
cursor: default;
padding: 20px;
box-sizing: border-box;
}
@@ -600,6 +612,18 @@ body.view-page {
border: none;
}
.text-content-view.code-content {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
overflow-x: auto;
white-space: pre;
}
.text-content-view.code-content code {
display: block;
white-space: pre;
}
.text-content-view::-webkit-scrollbar {
width: 8px;
}

58
data/html/view.html
View File

@@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Black Hole Share - View</title>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
</head>
<body class="view-page">
@@ -32,6 +34,7 @@
<!-- Zoom overlay -->
<div id="zoomOverlay" class="zoom-overlay" style="display: none;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
const contentArea = document.getElementById('contentArea');
const zoomOverlay = document.getElementById('zoomOverlay');
@@ -40,6 +43,28 @@
const pathParts = window.location.pathname.split('/');
const assetId = pathParts[pathParts.length - 1];
function escapeHtml(text) {
return text.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
function isCodeLike(text) {
const lines = text.split('\n');
if (lines.length < 2) {
return false;
}
const indicators = [
/;\s*$/,
/^\s*(fn|function|class|def|public|private|struct|enum|pub\s+struct)\b/,
/^\s*#\[/,
/=>|::|#include|import\s+\w+/,
/\{|\}|\(|\)|\[|\]/,
];
const indicatorHits = indicators.reduce((count, re) => count + (re.test(text) ? 1 : 0), 0);
return indicatorHits >= 2;
}
async function loadContent() {
try {
const response = await fetch(`/api/content/${assetId}`);
@@ -82,12 +107,23 @@
} else if (contentType.startsWith('text/')) {
// Display text
const text = await response.text();
contentArea.innerHTML = `<div class="text-content-view" style="cursor: zoom-in;">${text.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>`;
const safeText = escapeHtml(text);
const isCode = isCodeLike(text);
const textHtml = isCode
? `<pre class="text-content-view code-content"><code>${safeText}</code></pre>`
: `<div class="text-content-view">${safeText}</div>`;
contentArea.innerHTML = textHtml;
if (isCode && window.hljs) {
contentArea.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightElement(block);
});
}
const textContent = contentArea.querySelector('.text-content-view');
textContent.addEventListener('click', function (e) {
e.stopPropagation();
showZoom(text, true);
showZoom(text, true, isCode);
});
} else {
contentArea.innerHTML = '<p class="error">Unsupported content type</p>';
@@ -99,11 +135,19 @@
}
}
function showZoom(content, isText = false) {
function showZoom(content, isText = false, isCode = false) {
if (isText) {
zoomOverlay.innerHTML = `
<div class="zoom-text-content">${content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
`;
const safeText = escapeHtml(content);
const zoomClass = isCode ? 'zoom-text-content code-content' : 'zoom-text-content';
const zoomHtml = isCode
? `<pre class="${zoomClass}"><code>${safeText}</code></pre>`
: `<div class="${zoomClass}">${safeText}</div>`;
zoomOverlay.innerHTML = zoomHtml;
if (isCode && window.hljs) {
zoomOverlay.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightElement(block);
});
}
} else {
zoomOverlay.innerHTML = `<img id="zoomImage" src="${content}" alt="Zoomed Content"
style="max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 50px rgba(51, 204, 255, 0.5);">`;
@@ -115,8 +159,6 @@
zoomOverlay.style.display = 'none';
}
zoomOverlay.addEventListener('click', hideZoom);
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' || e.key === 'Esc') {
hideZoom();