md-lv 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -5,6 +5,38 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2026-02-16
+
+### Added
+
+- **Code Viewer (VSCode-like)**: Non-Markdown files now display with line numbers, indent guides, filename header, and language label in a VSCode-inspired code viewer
+- **Dark Mode Syntax Highlighting**: Automatic highlight.js theme switching (github / github-dark) based on system color scheme preference
+- **Binary File Detection**: Binary files (images, archives, executables, etc.) are now properly skipped instead of attempting to render
+- **Language Display Names**: Code viewer header shows human-readable language names (e.g., "JavaScript" instead of "javascript")
+- **Expanded Language Support**: Added Dockerfile syntax highlighting, extended filename-based language detection (.env, .prettierrc, .eslintrc, ignore files, etc.)
+- **File Size Limit**: Files larger than 1MB are skipped to prevent browser performance issues
+
+### Changed
+
+- **Copy Button**: Breadcrumb copy button now copies the relative file path instead of just the filename
+- **highlight.js CDN**: Switched from `highlight.js` to `@highlightjs/cdn-assets` package for better modularity
+- **Language Detection Priority**: Filename-based detection now takes priority over extension-based detection for more accurate results
+
+## [1.2.6] - 2026-02-05
+
+### Fixed
+
+- **YAML Front Matter**: Fixed support for YAML multiline string notation (`>-`, `>`, `|`, `|-`)
+  - Folded scalars (newlines replaced with spaces)
+  - Literal scalars (newlines preserved)
+
+## [1.2.5] - 2026-02-05
+
+### Added
+
+- **Sidebar Scroll Position**: Sidebar now preserves scroll position when navigating between files
+- **Sticky Breadcrumbs**: Path display (breadcrumbs) now stays fixed at the top when scrolling
+
 ## [1.2.3] - 2026-01-31
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-lv",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Serve Markdown files as HTML with live features - syntax highlighting, Mermaid diagrams, and MathJax formulas",
   "type": "module",
   "engines": {

package/public/js/app.js

@@ -9,6 +9,9 @@ document.addEventListener('DOMContentLoaded', async () => {
   // シンタックスハイライト
   highlightCode();
 
+  // コードビューア拡張（行番号・インデントガイド）
+  enhanceCodeViewer();
+
   // Mermaid 図のレンダリング
   await renderMermaid();
 
@@ -38,15 +41,56 @@ function parseFrontmatter(markdown) {
     return { frontmatter: null, body };
   }
 
-  // YAML パース（key: value 形式と配列形式に対応）
+  // YAML パース（key: value 形式、配列形式、複数行文字列に対応）
   const frontmatter = {};
   const lines = yamlContent.split('\n');
   let currentKey = null;
+  let multilineMode = null; // 'folded' (>) or 'literal' (|)
+  let multilineBuffer = [];
+  let multilineStripTrailing = false;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+
+    // 複数行モード中の処理
+    if (multilineMode && currentKey) {
+      // インデントされた行は複数行コンテンツの一部
+      if (line.match(/^[ \t]+\S/) || line.trim() === '') {
+        // インデントを除去して保存
+        const indentMatch = line.match(/^([ \t]+)(.*)$/);
+        if (indentMatch) {
+          multilineBuffer.push(indentMatch[2]);
+        } else if (line.trim() === '') {
+          multilineBuffer.push('');
+        }
+        continue;
+      } else {
+        // インデントされていない行は複数行モードの終了
+        let result = multilineBuffer.join('\n');
+
+        if (multilineMode === 'folded') {
+          // 改行を空白に置き換え（空行は段落区切りとして保持）
+          result = result.replace(/\n(?!\n)/g, ' ').replace(/\n\n+/g, '\n\n');
+        }
+
+        // 末尾の改行を処理
+        if (multilineStripTrailing) {
+          result = result.replace(/\n+$/, '');
+        }
+
+        frontmatter[currentKey] = result.trim();
+        multilineMode = null;
+        multilineBuffer = [];
+        multilineStripTrailing = false;
+        // 現在の行を再処理するためにインデックスを戻す
+        i--;
+        continue;
+      }
+    }
 
-  for (const line of lines) {
     // 配列アイテム（- value）のチェック
     const arrayItemMatch = line.match(/^[ \t]+-[ \t]+(.*)$/);
-    if (arrayItemMatch && currentKey) {
+    if (arrayItemMatch && currentKey && !multilineMode) {
       const itemValue = parseYamlValue(arrayItemMatch[1]);
       if (!Array.isArray(frontmatter[currentKey])) {
         frontmatter[currentKey] = [];
@@ -63,15 +107,37 @@ function parseFrontmatter(markdown) {
 
       if (key) {
         currentKey = key;
-        if (value) {
+
+        // 複数行文字列の開始記号をチェック
+        if (value === '>' || value === '>-' || value === '|' || value === '|-') {
+          multilineMode = (value.startsWith('>') ? 'folded' : 'literal');
+          multilineStripTrailing = value.endsWith('-');
+          multilineBuffer = [];
+        } else if (value) {
           // 同じ行に値がある場合
           frontmatter[key] = parseYamlValue(value);
+          currentKey = key; // 配列の可能性のためにキーを保持
         }
-        // 値が空の場合は次の行で配列として処理される可能性がある
+        // 値が空の場合は次の行で配列または複数行として処理される
       }
     }
   }
 
+  // ファイル終端で複数行モードが残っている場合
+  if (multilineMode && currentKey && multilineBuffer.length > 0) {
+    let result = multilineBuffer.join('\n');
+
+    if (multilineMode === 'folded') {
+      result = result.replace(/\n(?!\n)/g, ' ').replace(/\n\n+/g, '\n\n');
+    }
+
+    if (multilineStripTrailing) {
+      result = result.replace(/\n+$/, '');
+    }
+
+    frontmatter[currentKey] = result.trim();
+  }
+
   return { frontmatter, body };
 }
 
@@ -266,6 +332,215 @@ async function renderMath(container) {
   }
 }
 
+/**
+ * コードビューアを拡張（行番号・インデントガイド）
+ * .code-viewer 内の pre>code ブロックを変換する
+ */
+function enhanceCodeViewer() {
+  const viewers = document.querySelectorAll('.code-viewer');
+  if (viewers.length === 0) return;
+
+  viewers.forEach(viewer => {
+    const codeBlock = viewer.querySelector('pre code');
+    if (!codeBlock) return;
+
+    const pre = codeBlock.parentElement;
+    const body = viewer.querySelector('.code-viewer-body');
+    if (!body) return;
+
+    // highlight.js が適用済みの HTML を取得
+    const highlightedHtml = codeBlock.innerHTML;
+
+    // 行に分割（highlight.js の span タグを考慮）
+    const lines = splitHighlightedLines(highlightedHtml);
+    const tabSize = detectTabSize(codeBlock.textContent);
+
+    // テーブル構造を構築
+    const table = document.createElement('table');
+    table.className = 'code-table';
+    table.setAttribute('role', 'presentation');
+
+    const tbody = document.createElement('tbody');
+
+    lines.forEach((lineHtml, index) => {
+      const tr = document.createElement('tr');
+      tr.className = 'code-line';
+
+      // 行番号セル
+      const lineNumTd = document.createElement('td');
+      lineNumTd.className = 'line-number';
+      lineNumTd.setAttribute('data-line', index + 1);
+      lineNumTd.textContent = index + 1;
+
+      // コード内容セル
+      const contentTd = document.createElement('td');
+      contentTd.className = 'line-content';
+
+      // インデントガイドを生成
+      const textContent = stripHtmlTags(lineHtml);
+      const indentLevel = calculateIndentLevel(textContent, tabSize);
+
+      if (indentLevel > 0) {
+        const guides = document.createElement('span');
+        guides.className = 'indent-guides';
+        guides.setAttribute('aria-hidden', 'true');
+        // 各インデントレベルのガイド線を生成
+        for (let i = 0; i < indentLevel; i++) {
+          const guide = document.createElement('span');
+          guide.className = 'indent-guide';
+          guide.style.left = (i * tabSize) + 'ch';
+          guides.appendChild(guide);
+        }
+        contentTd.appendChild(guides);
+      }
+
+      // ハイライト済みコード
+      const codeSpan = document.createElement('span');
+      codeSpan.className = 'line-code';
+      codeSpan.innerHTML = lineHtml || '\n';
+      contentTd.appendChild(codeSpan);
+
+      tr.appendChild(lineNumTd);
+      tr.appendChild(contentTd);
+      tbody.appendChild(tr);
+    });
+
+    table.appendChild(tbody);
+
+    // 元の pre>code を置き換え
+    // highlight.js のクラスを body に引き継ぐ（CSSセレクタ継承用）
+    const langClass = codeBlock.className || '';
+    if (langClass) {
+      langClass.split(/\s+/).forEach(cls => {
+        if (cls) body.classList.add(cls);
+      });
+    }
+
+    body.innerHTML = '';
+    body.appendChild(table);
+
+    // CSS変数でタブサイズを設定
+    viewer.style.setProperty('--tab-size', tabSize);
+  });
+}
+
+/**
+ * highlight.js のハイライト済み HTML を行ごとに分割
+ * span タグが行をまたぐ場合を考慮する
+ */
+function splitHighlightedLines(html) {
+  // まず改行で分割
+  const rawLines = html.split('\n');
+
+  // 開いた span タグを追跡し、行をまたぐ場合に閉じ/開きを補完
+  const result = [];
+  let openTags = [];
+
+  for (let i = 0; i < rawLines.length; i++) {
+    let line = rawLines[i];
+
+    // 前の行から引き継いだ開きタグを先頭に追加
+    if (openTags.length > 0) {
+      line = openTags.join('') + line;
+    }
+
+    // この行の開きタグと閉じタグを解析
+    openTags = getOpenTags(line);
+
+    // 開いたままのタグがある場合、行末で閉じる
+    if (openTags.length > 0) {
+      line += '</span>'.repeat(openTags.length);
+    }
+
+    result.push(line);
+  }
+
+  // 末尾の空行を削除
+  while (result.length > 1 && result[result.length - 1].trim() === '') {
+    result.pop();
+  }
+
+  return result;
+}
+
+/**
+ * HTML 文字列内の未閉じの span タグを取得
+ */
+function getOpenTags(html) {
+  const openTags = [];
+  const tagRegex = /<\/?span[^>]*>/g;
+  let match;
+
+  while ((match = tagRegex.exec(html)) !== null) {
+    if (match[0].startsWith('</')) {
+      openTags.pop();
+    } else {
+      openTags.push(match[0]);
+    }
+  }
+
+  return openTags;
+}
+
+/**
+ * HTML タグを除去してテキストのみを取得
+ */
+function stripHtmlTags(html) {
+  const tmp = document.createElement('div');
+  tmp.innerHTML = html;
+  return tmp.textContent || '';
+}
+
+/**
+ * コードのタブサイズを自動検出
+ * 最も一般的なインデント幅を返す
+ */
+function detectTabSize(text) {
+  const lines = text.split('\n');
+  const indents = {};
+
+  for (const line of lines) {
+    const match = line.match(/^( +)\S/);
+    if (match) {
+      const len = match[1].length;
+      indents[len] = (indents[len] || 0) + 1;
+    }
+  }
+
+  // インデント幅の最小差分を求める
+  const sizes = Object.keys(indents).map(Number).sort((a, b) => a - b);
+  if (sizes.length === 0) return 2;
+
+  // 最小のインデント幅
+  const minIndent = sizes[0];
+  if (minIndent <= 4 && minIndent >= 1) return minIndent;
+
+  return 2; // デフォルト
+}
+
+/**
+ * テキストのインデントレベルを計算
+ * @param {string} text - テキスト行
+ * @param {number} tabSize - タブサイズ（スペース数）
+ * @returns {number} インデントレベル
+ */
+function calculateIndentLevel(text, tabSize) {
+  if (!text || text.trim() === '') return 0;
+
+  let spaces = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === ' ') {
+      spaces++;
+    } else if (text[i] === '\t') {
+      spaces += tabSize;
+    } else {
+      break;
+    }
+  }
+
+  return Math.floor(spaces / tabSize);
+}
+
 /**
  * Mermaid 用の HTML エスケープ（最小限）
  */
@@ -281,6 +556,7 @@ function escapeHtmlForMermaid(str) {
 window.mdv = {
   renderMarkdown,
   highlightCode,
+  enhanceCodeViewer,
   renderMermaid,
   renderMath
 };

package/public/js/navigation.js

@@ -55,6 +55,31 @@ function removeExpandedDirectory(path) {
   saveExpandedDirectories(filtered);
 }
 
+/**
+ * サイドバーのスクロール位置をlocalStorageに保存
+ */
+function saveSidebarScrollPosition(scrollTop) {
+  try {
+    localStorage.setItem('sidebar-scroll-position', scrollTop.toString());
+  } catch {
+    // Storage full or unavailable
+  }
+}
+
+/**
+ * サイドバーのスクロール位置をlocalStorageから取得して復元
+ */
+function restoreSidebarScrollPosition(element) {
+  try {
+    const savedScrollTop = localStorage.getItem('sidebar-scroll-position');
+    if (savedScrollTop !== null) {
+      element.scrollTop = parseInt(savedScrollTop, 10);
+    }
+  } catch {
+    // Storage unavailable
+  }
+}
+
 /**
  * サイドバーナビゲーションを初期化
  */
@@ -138,6 +163,23 @@ function initSidebar() {
   // 現在のパスを取得
   const currentPath = window.location.pathname;
 
+  // サイドバーコンテンツのスクロール位置を復元・保存
+  const sidebarContent = document.querySelector('.sidebar-content');
+  if (sidebarContent) {
+    // ページロード時にスクロール位置を復元
+    restoreSidebarScrollPosition(sidebarContent);
+
+    // スクロール時にスクロール位置を保存
+    sidebarContent.addEventListener('scroll', () => {
+      saveSidebarScrollPosition(sidebarContent.scrollTop);
+    });
+
+    // ページ遷移前にスクロール位置を保存
+    window.addEventListener('beforeunload', () => {
+      saveSidebarScrollPosition(sidebarContent.scrollTop);
+    });
+  }
+
   // ルートディレクトリを読み込み
   loadDirectory('/', fileTree, 0).then(async () => {
     // 保存された展開状態を復元
@@ -145,6 +187,11 @@ function initSidebar() {
     for (const dirPath of expandedDirs) {
       await expandToPath(dirPath, fileTree);
     }
+
+    // ツリーの読み込み後、再度スクロール位置を復元（コンテンツが変わった場合に備えて）
+    if (sidebarContent) {
+      restoreSidebarScrollPosition(sidebarContent);
+    }
   });
 }
 
@@ -551,7 +598,8 @@ function initBackToTop() {
 }
 
 /**
- * ファイル名コピーボタンを初期化
+ * パスコピーボタンを初期化
+ * ファイル名ではなく相対パスをコピーする
  */
 function initCopyFilename() {
   const breadcrumbs = document.getElementById('breadcrumbs');
@@ -560,15 +608,19 @@ function initCopyFilename() {
   const currentSpan = breadcrumbs.querySelector('.current');
   if (!currentSpan) return;
 
-  const filename = currentSpan.textContent.trim();
-  if (!filename) return;
+  const currentName = currentSpan.textContent.trim();
+  if (!currentName || currentName === 'Home') return;
+
+  // 相対パスを取得（先頭の / を除去）
+  const relativePath = getRelativePath(window.location.pathname);
+  if (!relativePath) return;
 
   // コピーボタンを作成
   const copyButton = document.createElement('button');
   copyButton.id = 'copy-filename';
   copyButton.type = 'button';
-  copyButton.title = 'Copy filename';
-  copyButton.setAttribute('aria-label', 'Copy filename');
+  copyButton.title = 'Copy path: ' + relativePath;
+  copyButton.setAttribute('aria-label', 'Copy path');
   copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
 
   // currentSpanの後にボタンを挿入
@@ -580,12 +632,12 @@ function initCopyFilename() {
     e.stopPropagation();
 
     try {
-      await navigator.clipboard.writeText(filename);
+      await navigator.clipboard.writeText(relativePath);
       showCopySuccess(copyButton);
     } catch (err) {
       // フォールバック: execCommandを使用
       const textArea = document.createElement('textarea');
-      textArea.value = filename;
+      textArea.value = relativePath;
       textArea.style.position = 'fixed';
       textArea.style.left = '-9999px';
       document.body.appendChild(textArea);
@@ -601,6 +653,15 @@ function initCopyFilename() {
   });
 }
 
+/**
+ * URLパスから相対パスを取得
+ * @param {string} pathname - window.location.pathname
+ * @returns {string} 先頭の / を除いた相対パス
+ */
+function getRelativePath(pathname) {
+  return pathname.replace(/^\//, '');
+}
+
 /**
  * コピー成功時のフィードバック表示
  */

package/public/styles/modern.css

@@ -78,6 +78,10 @@ a:hover {
   border-radius: 6px;
   margin-bottom: 24px;
   border: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: var(--shadow-sm);
 }
 
 #breadcrumbs a {
@@ -144,6 +148,183 @@ code {
   }
 }
 
+/* ============================================
+   Code Viewer (VSCode-like)
+   ============================================ */
+.code-viewer {
+  --cv-bg: var(--color-code-bg);
+  --cv-header-bg: var(--color-bg-secondary);
+  --cv-border: var(--color-border);
+  --cv-line-number-color: var(--color-text-muted);
+  --cv-line-number-bg: var(--color-code-bg);
+  --cv-line-hover-bg: rgba(128, 128, 128, 0.08);
+  --cv-indent-guide-color: rgba(128, 128, 128, 0.2);
+  --tab-size: 2;
+  border: 1px solid var(--cv-border);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.code-viewer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background-color: var(--cv-header-bg);
+  border-bottom: 1px solid var(--cv-border);
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+.code-viewer-filename {
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.code-viewer-language {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  padding: 2px 8px;
+  background-color: var(--cv-bg);
+  border-radius: 4px;
+  border: 1px solid var(--cv-border);
+}
+
+.code-viewer-body {
+  overflow-x: auto;
+  background-color: var(--cv-bg);
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Override default pre/code styles inside code-viewer */
+.code-viewer pre {
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.code-viewer pre code {
+  background: transparent;
+  padding: 0;
+}
+
+/* Code table layout */
+.code-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  margin: 0;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  tab-size: var(--tab-size);
+}
+
+.code-table tr {
+  background: transparent;
+  border: none;
+}
+
+.code-table tr:nth-child(2n) {
+  background: transparent;
+}
+
+.code-table th,
+.code-table td {
+  border: none;
+  padding: 0;
+}
+
+.code-line:hover {
+  background-color: var(--cv-line-hover-bg);
+}
+
+/* Line numbers */
+.line-number {
+  position: sticky;
+  left: 0;
+  width: 1px;
+  min-width: 50px;
+  padding: 0 12px 0 16px !important;
+  text-align: right;
+  color: var(--cv-line-number-color);
+  background-color: var(--cv-line-number-bg);
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: top;
+  font-size: 13px;
+  line-height: 1.5;
+  border-right: 1px solid var(--cv-border);
+}
+
+.code-line:hover .line-number {
+  color: var(--color-text-secondary);
+}
+
+/* Line content */
+.line-content {
+  position: relative;
+  padding: 0 16px 0 16px !important;
+  white-space: pre;
+  word-wrap: normal;
+  vertical-align: top;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* Indent guides */
+.indent-guides {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  bottom: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.indent-guide {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--cv-indent-guide-color);
+}
+
+/* Line code span */
+.line-code {
+  position: relative;
+}
+
+/* Override highlight.js background on code-viewer-body */
+.code-viewer-body.hljs {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .code-viewer {
+    --cv-line-hover-bg: rgba(128, 128, 128, 0.1);
+    --cv-indent-guide-color: rgba(128, 128, 128, 0.25);
+  }
+}
+
+/* First and last lines padding */
+.code-table tbody tr:first-child td {
+  padding-top: 12px !important;
+}
+
+.code-table tbody tr:last-child td {
+  padding-bottom: 12px !important;
+}
+
 /* ============================================
    Directory Listing Enhancement
    ============================================ */
@@ -808,4 +989,12 @@ body.sidebar-open #sidebar-overlay {
   #main-wrapper {
     margin-left: 0 !important;
   }
+
+  .line-number {
+    position: static;
+  }
+
+  .code-viewer-body {
+    overflow: visible;
+  }
 }

package/src/routes/raw.js

@@ -3,12 +3,15 @@ import fs from 'fs/promises';
 import path from 'path';
 import { validatePath } from '../utils/path.js';
 import { renderTemplate } from '../utils/template.js';
-import { getLanguageFromExtension, getLanguageFromFilename, isSupportedExtension } from '../utils/language.js';
+import { getLanguageFromExtension, getLanguageFromFilename, getLanguageDisplayName, isBinaryExtension } from '../utils/language.js';
 import { escapeHtml } from '../utils/html.js';
 import { generateBreadcrumbs } from '../utils/navigation.js';
 
 const router = Router();
 
+// 1MB - 巨大ファイルの表示を防止
+const MAX_FILE_SIZE = 1 * 1024 * 1024;
+
 /**
  * Raw コード表示ルート
  * 非 Markdown ファイルをシンタックスハイライト付きで表示
@@ -23,14 +26,13 @@ router.get(/^\/.*/, async (req, res, next) => {
       return next();
     }
 
-    const fileName = path.basename(requestPath);
-    const filenameLanguage = getLanguageFromFilename(fileName);
-
-    // サポートされていない拡張子かつファイル名でも判定できない場合は次のハンドラへ
-    if (!isSupportedExtension(ext) && !filenameLanguage) {
+    // バイナリファイルは次のハンドラへ
+    if (isBinaryExtension(ext)) {
       return next();
     }
 
+    const fileName = path.basename(requestPath);
+
     const docRoot = req.app.get('docRoot');
     let filePath;
 
@@ -56,16 +58,35 @@ router.get(/^\/.*/, async (req, res, next) => {
       return next();
     }
 
-    // ファイル読み込み
-    const content = await fs.readFile(filePath, 'utf-8');
-    // 拡張子ベースの言語判定を優先し、なければファイル名ベース
-    const language = isSupportedExtension(ext) ? getLanguageFromExtension(ext) : (filenameLanguage || 'plaintext');
+    // ファイルサイズ制限チェック
+    if (stat.size > MAX_FILE_SIZE) {
+      return next();
+    }
+
+    // ファイル読み込み（非UTF-8ファイルを安全にスキップ）
+    let content;
+    try {
+      content = await fs.readFile(filePath, 'utf-8');
+    } catch {
+      return next();
+    }
+    // ファイル名ベースの判定を優先し、なければ拡張子ベース（未知の拡張子は plaintext）
+    const filenameLanguage = getLanguageFromFilename(fileName);
+    const language = filenameLanguage || getLanguageFromExtension(ext);
+    const languageDisplayName = getLanguageDisplayName(language);
 
     const docRootName = req.app.get('docRootName');
     const html = renderTemplate('page', {
       title: `${fileName} - ${docRootName}`,
-      content: `<h1>${escapeHtml(fileName)}</h1>
-                <pre><code class="language-${language}">${escapeHtml(content)}</code></pre>`,
+      content: `<div class="code-viewer" data-file-path="${escapeHtml(requestPath)}">
+                  <div class="code-viewer-header">
+                    <span class="code-viewer-filename">${escapeHtml(fileName)}</span>
+                    <span class="code-viewer-language">${escapeHtml(languageDisplayName)}</span>
+                  </div>
+                  <div class="code-viewer-body">
+                    <pre><code class="language-${language}">${escapeHtml(content)}</code></pre>
+                  </div>
+                </div>`,
       breadcrumbs: generateBreadcrumbs(requestPath)
     });
 

package/src/utils/language.js

@@ -26,13 +26,32 @@ export function getLanguageFromFilename(filename) {
     // Shell config
     '.bashrc': 'bash',
     '.bash_profile': 'bash',
-    '.zshrc': 'zsh',
+    '.zshrc': 'bash',
     '.profile': 'bash',
 
     // Node.js
     '.npmrc': 'ini',
     '.nvmrc': 'plaintext',
 
+    // Config (JSON-based)
+    '.prettierrc': 'json',
+    '.eslintrc': 'json',
+    '.babelrc': 'json',
+
+    // Env files
+    '.env': 'bash',
+    '.env.local': 'bash',
+    '.env.example': 'bash',
+    '.env.development': 'bash',
+    '.env.production': 'bash',
+    '.env.test': 'bash',
+
+    // Ignore files
+    '.prettierignore': 'plaintext',
+    '.eslintignore': 'plaintext',
+    '.dockerignore': 'plaintext',
+    '.npmignore': 'plaintext',
+
     // Misc
     'Vagrantfile': 'ruby',
     'Rakefile': 'ruby',
@@ -106,7 +125,7 @@ export function getLanguageFromExtension(ext) {
     // Shell
     '.sh': 'bash',
     '.bash': 'bash',
-    '.zsh': 'zsh',
+    '.zsh': 'bash',
     '.fish': 'shell',
 
     // SQL
@@ -149,3 +168,76 @@ export function isSupportedExtension(ext) {
 
   return supportedExtensions.includes(ext.toLowerCase());
 }
+
+/**
+ * バイナリファイルの拡張子かどうかをチェック
+ * @param {string} ext - ファイル拡張子（.付き）
+ * @returns {boolean}
+ */
+export function isBinaryExtension(ext) {
+  const binaryExtensions = [
+    // 画像
+    '.png', '.jpg', '.jpeg', '.gif', '.bmp', '.svg', '.ico', '.webp', '.tiff', '.tif',
+    // 動画
+    '.mp4', '.avi', '.mov', '.webm', '.mkv', '.flv', '.wmv',
+    // 音声
+    '.mp3', '.wav', '.ogg', '.flac', '.aac', '.wma',
+    // 圧縮
+    '.zip', '.tar', '.gz', '.7z', '.rar', '.bz2', '.xz',
+    // 実行・ライブラリ
+    '.exe', '.dll', '.so', '.dylib', '.bin', '.class',
+    // フォント
+    '.woff', '.woff2', '.ttf', '.eot', '.otf',
+    // ドキュメント（バイナリ形式）
+    '.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx',
+    // データベース
+    '.sqlite', '.db',
+    // その他
+    '.DS_Store',
+  ];
+
+  return binaryExtensions.includes(ext.toLowerCase());
+}
+
+/**
+ * highlight.js 言語名から表示用の言語名を取得
+ * @param {string} language - highlight.js の言語名
+ * @returns {string} - 表示用の言語名
+ */
+export function getLanguageDisplayName(language) {
+  if (!language) return 'Plain Text';
+
+  const displayNames = {
+    'javascript': 'JavaScript',
+    'typescript': 'TypeScript',
+    'python': 'Python',
+    'json': 'JSON',
+    'html': 'HTML',
+    'css': 'CSS',
+    'scss': 'SCSS',
+    'less': 'Less',
+    'xml': 'XML',
+    'yaml': 'YAML',
+    'toml': 'TOML',
+    'bash': 'Bash',
+    'zsh': 'Zsh',
+    'shell': 'Shell',
+    'sql': 'SQL',
+    'php': 'PHP',
+    'cpp': 'C++',
+    'c': 'C',
+    'go': 'Go',
+    'rust': 'Rust',
+    'java': 'Java',
+    'ruby': 'Ruby',
+    'erb': 'ERB',
+    'makefile': 'Makefile',
+    'dockerfile': 'Dockerfile',
+    'cmake': 'CMake',
+    'ini': 'INI',
+    'markdown': 'Markdown',
+    'plaintext': 'Plain Text'
+  };
+
+  return displayNames[language] || language.charAt(0).toUpperCase() + language.slice(1);
+}

package/templates/page.html

@@ -12,7 +12,11 @@
   <link rel="stylesheet" href="/static/styles/base.css">
   <link rel="stylesheet" href="/static/styles/modern.css">
   <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github.min.css">
+    href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github.min.css"
+    media="(prefers-color-scheme: light)">
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css"
+    media="(prefers-color-scheme: dark)">
 
   <!-- MathJax 設定 -->
   <script>
@@ -100,7 +104,8 @@
 
   <!-- クライアント側ライブラリ -->
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/highlight.js@11"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/highlight.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/languages/dockerfile.min.js"></script>
   <script type="module">
     import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
     window.mermaid = mermaid;