md-lv 1.2.6 → 1.3.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-lv",
-  "version": "1.2.6",
+  "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();
 
@@ -329,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 エスケープ（最小限）
  */
@@ -344,6 +556,7 @@ function escapeHtmlForMermaid(str) {
 window.mdv = {
   renderMarkdown,
   highlightCode,
+  enhanceCodeViewer,
   renderMermaid,
   renderMath
 };

package/public/js/navigation.js

@@ -598,7 +598,8 @@ function initBackToTop() {
 }
 
 /**
- * ファイル名コピーボタンを初期化
+ * パスコピーボタンを初期化
+ * ファイル名ではなく相対パスをコピーする
  */
 function initCopyFilename() {
   const breadcrumbs = document.getElementById('breadcrumbs');
@@ -607,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の後にボタンを挿入
@@ -627,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);
@@ -648,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

@@ -148,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
    ============================================ */
@@ -812,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;