fix(html-presentation): 리뷰 대응 — 하이라이팅 벤더링, 브랜딩 옵션화, 4:3 문구

PR #273 메인테이너 리뷰(REQUEST CHANGES) 대응입니다. - highlight.js 벤더링: engine/lib/에 v11 common 빌드 + github/github-dark 테마 CSS를 두어 완전 오프라인에서 동작. template.html과 두 샘플 index.html의 CDN 링크 제거. - 브랜딩 옵션화: injectFooter()를 data-footer-* 속성 기반으로 변경. 기본 OFF, <body data-footer-credit/github/linkedin>로 활성화, data-footer="off"로 명시적 비활성화. 두 샘플에서 baekenough attribution 제거. - 4:3 문구 수정: docs/features의 "자동 조정" 약속 제거, 작성 가이드로 다듬음. 엔진은 stage 비율 축소만 담당. - 샘플 engine drift 방지: scripts/check-sample-sync.sh 추가, canonical engine과 sample 복사본을 cmp로 비교.
2026-06-24 02:04:11 +00:00 · 2026-05-19 22:16:29 +09:00 · 2026-05-19 22:16:29 +09:00 · bfa871f48d
commit bfa871f48d
parent c39e9349dc
18 changed files with 4080 additions and 162 deletions
--- a/docs/features/html-presentation.md
+++ b/docs/features/html-presentation.md
@ -10,10 +10,10 @@

 ## 먼저 알아둘 점

- **외부 JS/CSS 프레임워크 의존성 0**: 엔진은 바닐라 HTML+CSS+JS로 자급형 스캐폴드입니다. 단, 웹폰트(Pretendard, JetBrains Mono) 및 코드 하이라이터(highlight.js)는 CDN에서 로드합니다.
+- **외부 JS/CSS 프레임워크 의존성 0**: 엔진은 바닐라 HTML+CSS+JS로 자급형 스캐폴드입니다. 웹폰트(Pretendard, JetBrains Mono)만 CDN에서 로드하며, 코드 하이라이터(highlight.js v11)는 `engine/lib/`에 벤더링되어 완전 오프라인 동작합니다.
 - **`file://` 더블클릭으로 동작**: 슬라이드 콘텐츠는 `index.html`에 인라인으로 작성되므로 별도 fetch 없이 오프라인에서도 열립니다.
 - **엔진(불변) + 콘텐츠(AI 작성)의 엄격한 분리**: AI는 콘텐츠 영역(`<!-- SLIDES:START -->` ~ `<!-- SLIDES:END -->`)만 채웁니다. 엔진 파일(`engine.css`, `engine.js`)은 절대 수정하지 않습니다.
- **footer는 엔진이 자동 주입**: "made by baekenough" 텍스트와 GitHub·LinkedIn 아이콘이 자동으로 삽입되며, AI는 별도로 작성하지 않습니다.
+- **footer는 기본 OFF**: `<body>` 태그에 `data-footer-credit`, `data-footer-github`, `data-footer-linkedin` 속성을 추가하면 우하단에 footer가 표시됩니다. AI는 별도로 footer를 작성하지 않습니다.

 ## 입력 계약

@ -85,7 +85,7 @@ tone: "기술적"
 output_dir: "./hermes-deck/"
 ```

-결과: `./hermes-deck/index.html` 생성. 4:3 비율로 콘텐츠 예산이 자동 조정됩니다.
+결과: `./hermes-deck/index.html` 생성. 4:3 비율을 선택하면 슬라이드 영역이 좁아지므로, 각 레이아웃의 콘텐츠 예산(불릿 개수, 코드 줄 수 등)을 줄여 작성해 주세요. 엔진은 stage를 비율대로 축소할 뿐 콘텐츠 양을 자동 조정하지는 않습니다.

 ## 디버그 모드

@ -100,7 +100,7 @@ file:///path/to/presentation/index.html?debug=1
 ## 실패 모드

 - **폰트 CDN 차단 환경**: Pretendard/JetBrains Mono 로드 실패 시 `system-ui` fallback으로 동작합니다. 폰트 품질만 저하되며 레이아웃은 유지됩니다.
- **highlight.js CDN 차단**: 코드 슬라이드(`data-layout="code"`)가 plain text로 표시됩니다. 구문 강조만 없어지고 내용은 그대로입니다.
+- **highlight.js**: `engine/lib/`에 벤더링되어 있으므로 CDN 차단 환경에서도 구문 강조가 정상 동작합니다.
 - **콘텐츠 예산 초과**: 슬라이드 콘텐츠가 캔버스를 벗어나면 시각적으로는 잘릴 수 있습니다. `?debug=1` 모드에서 빨간 outline으로 식별하고, 해당 슬라이드의 항목 수를 줄이거나 슬라이드를 분할하세요.
 - **네트워크 없는 완전 오프라인 환경**: 폰트·하이라이터 CDN 모두 차단되더라도 슬라이드 구조와 네비게이션은 정상 동작합니다.

--- a/html-presentation/SKILL.md
+++ b/html-presentation/SKILL.md
@ -65,8 +65,12 @@ mkdir -p {output_dir}/engine
 ```bash
 cp engine/engine.css {output_dir}/engine/engine.css
 cp engine/engine.js  {output_dir}/engine/engine.js
+cp -r engine/lib     {output_dir}/engine/lib
 ```

+`engine/lib/`에는 highlight.js v11 벤더 파일이 포함되어 있습니다 (완전 오프라인 동작).
+샘플 engine drift 검사: `./scripts/check-sample-sync.sh` 수동 실행.
+
 ### Step 4. index.html 생성

 `template.html` 을 기반으로 다음 항목을 치환합니다:
@ -184,7 +188,7 @@ const example = "hello";</code></pre>
 </section>
 ```

-highlight.js CDN이 자동으로 구문 강조를 적용합니다.
+highlight.js(벤더링)가 자동으로 구문 강조를 적용합니다.
 지원 언어: `language-typescript`, `language-javascript`, `language-python`, `language-go`, `language-rust`, `language-bash`, `language-json` 등.

 ### 8. end — 마무리 슬라이드
@ -208,7 +212,6 @@ highlight.js CDN이 자동으로 구문 강조를 적용합니다.

 ### MUST (절대 준수)

- 엔진이 모든 슬라이드 우하단에 footer를 자동 주입한다("made by baekenough" + GitHub/LinkedIn 아이콘). AI는 footer를 작성하지 않는다.
 - `engine/engine.css`, `engine/engine.js` **수정 금지**
 - 슬라이드는 `<!-- SLIDES:START -->` ~ `<!-- SLIDES:END -->` **사이에만** 작성
 - 각 슬라이드에 `data-layout`(8종 중 1) + `data-title`(네비 라벨) **필수**
@ -229,6 +232,17 @@ highlight.js CDN이 자동으로 구문 강조를 적용합니다.

 - 슬라이드 내부에서 `<strong>`, `<em>`, `<a>` 등 인라인 마크업 사용
 - `data-theme="dark"` 를 `<html>` 태그에 설정하여 다크 테마 적용
+- 옵션 footer 추가: `<body>` 태그에 아래 속성을 추가하면 우하단에 footer가 표시됩니다 (기본 OFF).
+
+  ```html
+  <body
+    data-footer-credit="발표자 이름"
+    data-footer-github="https://github.com/username"
+    data-footer-linkedin="https://linkedin.com/in/username"
+  >
+  ```
+
+  세 속성 중 하나라도 있으면 footer가 활성화됩니다. 명시적으로 끄려면 `data-footer="off"` 사용.

 ---

@ -267,8 +281,9 @@ file:///path/to/index.html?debug=1

 | 항목 | 값 |
 |------|-----|
-| 외부 의존성 | Pretendard CDN, JetBrains Mono CDN, highlight.js CDN |
-| 오프라인 동작 | 폰트/highlight.js 미로드 시 system-ui fallback으로 동작 |
+| 외부 의존성 | Pretendard CDN, JetBrains Mono CDN (폰트만) |
+| 코드 하이라이팅 | highlight.js v11 — `engine/lib/`에 벤더링 (완전 오프라인 동작) |
+| 오프라인 동작 | 폰트 CDN 미로드 시 system-ui fallback으로 동작. highlight.js는 항상 로컬 |
 | 브라우저 지원 | Chrome/Edge 88+, Firefox 85+, Safari 14+ |
 | 최소 해상도 | 제한 없음 (transform scale로 자동 적응) |
 | 파일 크기 | engine.css + engine.js ≈ 10KB (minify 전) |
--- a/html-presentation/engine/engine.js
+++ b/html-presentation/engine/engine.js
@ -46,59 +46,84 @@
    }
  }

-  /* ---- Inject persistent footer into .stage ---------------- */
+  /* ---- Inject optional footer into .stage ------------------
+   * Footer is OFF by default. Activate via <body> data attributes:
+   *   data-footer-credit="your name"      — credit text
+   *   data-footer-github="https://..."    — GitHub icon + link
+   *   data-footer-linkedin="https://..."  — LinkedIn icon + link
+   *   data-footer="off"                   — explicit disable
+   * ---------------------------------------------------------- */
  function injectFooter() {
+    var body = document.body;
+    if (body.dataset.footer === 'off') return;
+
+    var creditText = body.dataset.footerCredit;
+    var githubUrl  = body.dataset.footerGithub;
+    var linkedinUrl = body.dataset.footerLinkedin;
+
+    // Default OFF: none of the attributes present → no footer
+    if (!creditText && !githubUrl && !linkedinUrl) return;
+
    var stage = document.querySelector('.stage');
    if (!stage || stage.querySelector('.footer')) return;

    var footer = document.createElement('footer');
    footer.className = 'footer';

-    var credit = document.createElement('span');
-    credit.className = 'footer-credit';
-    credit.textContent = 'made by baekenough';
+    if (creditText) {
+      var credit = document.createElement('span');
+      credit.className = 'footer-credit';
+      credit.textContent = creditText;
+      footer.appendChild(credit);
+    }

-    var links = document.createElement('span');
-    links.className = 'footer-links';
+    if (githubUrl || linkedinUrl) {
+      var links = document.createElement('span');
+      links.className = 'footer-links';

-    // GitHub (simple-icons path)
-    var gh = document.createElement('a');
-    gh.href = 'https://github.com/baekenough';
-    gh.target = '_blank';
-    gh.rel = 'noopener noreferrer';
-    gh.setAttribute('aria-label', 'GitHub');
-    var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    ghSvg.setAttribute('viewBox', '0 0 24 24');
-    ghSvg.setAttribute('width', '20');
-    ghSvg.setAttribute('height', '20');
-    ghSvg.setAttribute('fill', 'currentColor');
-    ghSvg.setAttribute('aria-hidden', 'true');
-    var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
-    ghSvg.appendChild(ghPath);
-    gh.appendChild(ghSvg);
+      if (githubUrl) {
+        // GitHub (simple-icons path)
+        var gh = document.createElement('a');
+        gh.href = githubUrl;
+        gh.target = '_blank';
+        gh.rel = 'noopener noreferrer';
+        gh.setAttribute('aria-label', 'GitHub');
+        var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        ghSvg.setAttribute('viewBox', '0 0 24 24');
+        ghSvg.setAttribute('width', '20');
+        ghSvg.setAttribute('height', '20');
+        ghSvg.setAttribute('fill', 'currentColor');
+        ghSvg.setAttribute('aria-hidden', 'true');
+        var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
+        ghSvg.appendChild(ghPath);
+        gh.appendChild(ghSvg);
+        links.appendChild(gh);
+      }

-    // LinkedIn (simple-icons path)
-    var li = document.createElement('a');
-    li.href = 'https://www.linkedin.com/in/%EC%83%81%EC%9D%B4-%EB%B0%B1-a8b028203/';
-    li.target = '_blank';
-    li.rel = 'noopener noreferrer';
-    li.setAttribute('aria-label', 'LinkedIn');
-    var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    liSvg.setAttribute('viewBox', '0 0 24 24');
-    liSvg.setAttribute('width', '20');
-    liSvg.setAttribute('height', '20');
-    liSvg.setAttribute('fill', 'currentColor');
-    liSvg.setAttribute('aria-hidden', 'true');
-    var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
-    liSvg.appendChild(liPath);
-    li.appendChild(liSvg);
+      if (linkedinUrl) {
+        // LinkedIn (simple-icons path)
+        var li = document.createElement('a');
+        li.href = linkedinUrl;
+        li.target = '_blank';
+        li.rel = 'noopener noreferrer';
+        li.setAttribute('aria-label', 'LinkedIn');
+        var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        liSvg.setAttribute('viewBox', '0 0 24 24');
+        liSvg.setAttribute('width', '20');
+        liSvg.setAttribute('height', '20');
+        liSvg.setAttribute('fill', 'currentColor');
+        liSvg.setAttribute('aria-hidden', 'true');
+        var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
+        liSvg.appendChild(liPath);
+        li.appendChild(liSvg);
+        links.appendChild(li);
+      }
+
+      footer.appendChild(links);
+    }

-    links.appendChild(gh);
-    links.appendChild(li);
-    footer.appendChild(credit);
-    footer.appendChild(links);
    stage.appendChild(footer);
  }

--- a/html-presentation/engine/lib/github-dark.min.css
+++ b/html-presentation/engine/lib/github-dark.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
--- a/html-presentation/engine/lib/github.min.css
+++ b/html-presentation/engine/lib/github.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
--- a/html-presentation/engine/lib/highlight.min.js
+++ b/html-presentation/engine/lib/highlight.min.js
--- a/html-presentation/samples/ai-agent-trends-2026/engine/engine.js
+++ b/html-presentation/samples/ai-agent-trends-2026/engine/engine.js
@ -46,59 +46,84 @@
    }
  }

-  /* ---- Inject persistent footer into .stage ---------------- */
+  /* ---- Inject optional footer into .stage ------------------
+   * Footer is OFF by default. Activate via <body> data attributes:
+   *   data-footer-credit="your name"      — credit text
+   *   data-footer-github="https://..."    — GitHub icon + link
+   *   data-footer-linkedin="https://..."  — LinkedIn icon + link
+   *   data-footer="off"                   — explicit disable
+   * ---------------------------------------------------------- */
  function injectFooter() {
+    var body = document.body;
+    if (body.dataset.footer === 'off') return;
+
+    var creditText = body.dataset.footerCredit;
+    var githubUrl  = body.dataset.footerGithub;
+    var linkedinUrl = body.dataset.footerLinkedin;
+
+    // Default OFF: none of the attributes present → no footer
+    if (!creditText && !githubUrl && !linkedinUrl) return;
+
    var stage = document.querySelector('.stage');
    if (!stage || stage.querySelector('.footer')) return;

    var footer = document.createElement('footer');
    footer.className = 'footer';

-    var credit = document.createElement('span');
-    credit.className = 'footer-credit';
-    credit.textContent = 'made by baekenough';
+    if (creditText) {
+      var credit = document.createElement('span');
+      credit.className = 'footer-credit';
+      credit.textContent = creditText;
+      footer.appendChild(credit);
+    }

-    var links = document.createElement('span');
-    links.className = 'footer-links';
+    if (githubUrl || linkedinUrl) {
+      var links = document.createElement('span');
+      links.className = 'footer-links';

-    // GitHub (simple-icons path)
-    var gh = document.createElement('a');
-    gh.href = 'https://github.com/baekenough';
-    gh.target = '_blank';
-    gh.rel = 'noopener noreferrer';
-    gh.setAttribute('aria-label', 'GitHub');
-    var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    ghSvg.setAttribute('viewBox', '0 0 24 24');
-    ghSvg.setAttribute('width', '20');
-    ghSvg.setAttribute('height', '20');
-    ghSvg.setAttribute('fill', 'currentColor');
-    ghSvg.setAttribute('aria-hidden', 'true');
-    var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
-    ghSvg.appendChild(ghPath);
-    gh.appendChild(ghSvg);
+      if (githubUrl) {
+        // GitHub (simple-icons path)
+        var gh = document.createElement('a');
+        gh.href = githubUrl;
+        gh.target = '_blank';
+        gh.rel = 'noopener noreferrer';
+        gh.setAttribute('aria-label', 'GitHub');
+        var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        ghSvg.setAttribute('viewBox', '0 0 24 24');
+        ghSvg.setAttribute('width', '20');
+        ghSvg.setAttribute('height', '20');
+        ghSvg.setAttribute('fill', 'currentColor');
+        ghSvg.setAttribute('aria-hidden', 'true');
+        var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
+        ghSvg.appendChild(ghPath);
+        gh.appendChild(ghSvg);
+        links.appendChild(gh);
+      }

-    // LinkedIn (simple-icons path)
-    var li = document.createElement('a');
-    li.href = 'https://www.linkedin.com/in/%EC%83%81%EC%9D%B4-%EB%B0%B1-a8b028203/';
-    li.target = '_blank';
-    li.rel = 'noopener noreferrer';
-    li.setAttribute('aria-label', 'LinkedIn');
-    var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    liSvg.setAttribute('viewBox', '0 0 24 24');
-    liSvg.setAttribute('width', '20');
-    liSvg.setAttribute('height', '20');
-    liSvg.setAttribute('fill', 'currentColor');
-    liSvg.setAttribute('aria-hidden', 'true');
-    var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
-    liSvg.appendChild(liPath);
-    li.appendChild(liSvg);
+      if (linkedinUrl) {
+        // LinkedIn (simple-icons path)
+        var li = document.createElement('a');
+        li.href = linkedinUrl;
+        li.target = '_blank';
+        li.rel = 'noopener noreferrer';
+        li.setAttribute('aria-label', 'LinkedIn');
+        var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        liSvg.setAttribute('viewBox', '0 0 24 24');
+        liSvg.setAttribute('width', '20');
+        liSvg.setAttribute('height', '20');
+        liSvg.setAttribute('fill', 'currentColor');
+        liSvg.setAttribute('aria-hidden', 'true');
+        var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
+        liSvg.appendChild(liPath);
+        li.appendChild(liSvg);
+        links.appendChild(li);
+      }
+
+      footer.appendChild(links);
+    }

-    links.appendChild(gh);
-    links.appendChild(li);
-    footer.appendChild(credit);
-    footer.appendChild(links);
    stage.appendChild(footer);
  }

--- a/html-presentation/samples/ai-agent-trends-2026/engine/lib/github-dark.min.css
+++ b/html-presentation/samples/ai-agent-trends-2026/engine/lib/github-dark.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
--- a/html-presentation/samples/ai-agent-trends-2026/engine/lib/github.min.css
+++ b/html-presentation/samples/ai-agent-trends-2026/engine/lib/github.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
--- a/html-presentation/samples/ai-agent-trends-2026/engine/lib/highlight.min.js
+++ b/html-presentation/samples/ai-agent-trends-2026/engine/lib/highlight.min.js
--- a/html-presentation/samples/ai-agent-trends-2026/index.html
+++ b/html-presentation/samples/ai-agent-trends-2026/index.html
@ -131,13 +131,10 @@ const result = await runAgent("분기 보고서를 분석하고 핵심 인사이
    </div>
  </div>
 </div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
-<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
-<script>
-if (window.hljs) {
-  hljs.highlightAll();
-}
-</script>
+<link rel="stylesheet" href="engine/lib/github.min.css" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="engine/lib/github-dark.min.css" media="(prefers-color-scheme: dark)">
+<script src="engine/lib/highlight.min.js"></script>
+<script>if (window.hljs) { hljs.highlightAll(); }</script>
 <script src="engine/engine.js"></script>
 </body>
 </html>
--- a/html-presentation/samples/hermes-agent/engine/engine.js
+++ b/html-presentation/samples/hermes-agent/engine/engine.js
@ -46,59 +46,84 @@
    }
  }

-  /* ---- Inject persistent footer into .stage ---------------- */
+  /* ---- Inject optional footer into .stage ------------------
+   * Footer is OFF by default. Activate via <body> data attributes:
+   *   data-footer-credit="your name"      — credit text
+   *   data-footer-github="https://..."    — GitHub icon + link
+   *   data-footer-linkedin="https://..."  — LinkedIn icon + link
+   *   data-footer="off"                   — explicit disable
+   * ---------------------------------------------------------- */
  function injectFooter() {
+    var body = document.body;
+    if (body.dataset.footer === 'off') return;
+
+    var creditText = body.dataset.footerCredit;
+    var githubUrl  = body.dataset.footerGithub;
+    var linkedinUrl = body.dataset.footerLinkedin;
+
+    // Default OFF: none of the attributes present → no footer
+    if (!creditText && !githubUrl && !linkedinUrl) return;
+
    var stage = document.querySelector('.stage');
    if (!stage || stage.querySelector('.footer')) return;

    var footer = document.createElement('footer');
    footer.className = 'footer';

-    var credit = document.createElement('span');
-    credit.className = 'footer-credit';
-    credit.textContent = 'made by baekenough';
+    if (creditText) {
+      var credit = document.createElement('span');
+      credit.className = 'footer-credit';
+      credit.textContent = creditText;
+      footer.appendChild(credit);
+    }

-    var links = document.createElement('span');
-    links.className = 'footer-links';
+    if (githubUrl || linkedinUrl) {
+      var links = document.createElement('span');
+      links.className = 'footer-links';

-    // GitHub (simple-icons path)
-    var gh = document.createElement('a');
-    gh.href = 'https://github.com/baekenough';
-    gh.target = '_blank';
-    gh.rel = 'noopener noreferrer';
-    gh.setAttribute('aria-label', 'GitHub');
-    var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    ghSvg.setAttribute('viewBox', '0 0 24 24');
-    ghSvg.setAttribute('width', '20');
-    ghSvg.setAttribute('height', '20');
-    ghSvg.setAttribute('fill', 'currentColor');
-    ghSvg.setAttribute('aria-hidden', 'true');
-    var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
-    ghSvg.appendChild(ghPath);
-    gh.appendChild(ghSvg);
+      if (githubUrl) {
+        // GitHub (simple-icons path)
+        var gh = document.createElement('a');
+        gh.href = githubUrl;
+        gh.target = '_blank';
+        gh.rel = 'noopener noreferrer';
+        gh.setAttribute('aria-label', 'GitHub');
+        var ghSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        ghSvg.setAttribute('viewBox', '0 0 24 24');
+        ghSvg.setAttribute('width', '20');
+        ghSvg.setAttribute('height', '20');
+        ghSvg.setAttribute('fill', 'currentColor');
+        ghSvg.setAttribute('aria-hidden', 'true');
+        var ghPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        ghPath.setAttribute('d', 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.4 3-.405 1.02.005 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12');
+        ghSvg.appendChild(ghPath);
+        gh.appendChild(ghSvg);
+        links.appendChild(gh);
+      }

-    // LinkedIn (simple-icons path)
-    var li = document.createElement('a');
-    li.href = 'https://www.linkedin.com/in/%EC%83%81%EC%9D%B4-%EB%B0%B1-a8b028203/';
-    li.target = '_blank';
-    li.rel = 'noopener noreferrer';
-    li.setAttribute('aria-label', 'LinkedIn');
-    var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    liSvg.setAttribute('viewBox', '0 0 24 24');
-    liSvg.setAttribute('width', '20');
-    liSvg.setAttribute('height', '20');
-    liSvg.setAttribute('fill', 'currentColor');
-    liSvg.setAttribute('aria-hidden', 'true');
-    var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
-    liSvg.appendChild(liPath);
-    li.appendChild(liSvg);
+      if (linkedinUrl) {
+        // LinkedIn (simple-icons path)
+        var li = document.createElement('a');
+        li.href = linkedinUrl;
+        li.target = '_blank';
+        li.rel = 'noopener noreferrer';
+        li.setAttribute('aria-label', 'LinkedIn');
+        var liSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        liSvg.setAttribute('viewBox', '0 0 24 24');
+        liSvg.setAttribute('width', '20');
+        liSvg.setAttribute('height', '20');
+        liSvg.setAttribute('fill', 'currentColor');
+        liSvg.setAttribute('aria-hidden', 'true');
+        var liPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        liPath.setAttribute('d', 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z');
+        liSvg.appendChild(liPath);
+        li.appendChild(liSvg);
+        links.appendChild(li);
+      }
+
+      footer.appendChild(links);
+    }

-    links.appendChild(gh);
-    links.appendChild(li);
-    footer.appendChild(credit);
-    footer.appendChild(links);
    stage.appendChild(footer);
  }

--- a/html-presentation/samples/hermes-agent/engine/lib/github-dark.min.css
+++ b/html-presentation/samples/hermes-agent/engine/lib/github-dark.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
--- a/html-presentation/samples/hermes-agent/engine/lib/github.min.css
+++ b/html-presentation/samples/hermes-agent/engine/lib/github.min.css
@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
--- a/html-presentation/samples/hermes-agent/engine/lib/highlight.min.js
+++ b/html-presentation/samples/hermes-agent/engine/lib/highlight.min.js
--- a/html-presentation/samples/hermes-agent/index.html
+++ b/html-presentation/samples/hermes-agent/index.html
@ -174,13 +174,10 @@ hermes</code></pre>
    </div>
  </div>
 </div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
-<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
-<script>
-if (window.hljs) {
-  hljs.highlightAll();
-}
-</script>
+<link rel="stylesheet" href="engine/lib/github.min.css" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="engine/lib/github-dark.min.css" media="(prefers-color-scheme: dark)">
+<script src="engine/lib/highlight.min.js"></script>
+<script>if (window.hljs) { hljs.highlightAll(); }</script>
 <script src="engine/engine.js"></script>
 </body>
 </html>
--- a/html-presentation/scripts/check-sample-sync.sh
+++ b/html-presentation/scripts/check-sample-sync.sh
@ -0,0 +1,41 @@
+#!/usr/bin/env bash
+# html-presentation sample engine sync checker
+# Verifies that samples/*/engine/ matches the canonical engine/
+set -euo pipefail
+
+SKILL_DIR="$(cd "$(dirname "$0")/.." && pwd)"
+CANONICAL="$SKILL_DIR/engine"
+SAMPLES_DIR="$SKILL_DIR/samples"
+
+if [ ! -d "$CANONICAL" ]; then
+  echo "ERROR: canonical engine not found at $CANONICAL" >&2
+  exit 1
+fi
+
+EXIT_CODE=0
+
+for sample_engine in "$SAMPLES_DIR"/*/engine; do
+  [ -d "$sample_engine" ] || continue
+  sample_name="$(basename "$(dirname "$sample_engine")")"
+
+  # Compare each file in canonical against the sample copy
+  while IFS= read -r -d '' canonical_file; do
+    rel_path="${canonical_file#$CANONICAL/}"
+    sample_file="$sample_engine/$rel_path"
+    if [ ! -f "$sample_file" ]; then
+      echo "MISSING in $sample_name: $rel_path" >&2
+      EXIT_CODE=1
+      continue
+    fi
+    if ! cmp -s "$canonical_file" "$sample_file"; then
+      echo "DRIFT in $sample_name: $rel_path" >&2
+      EXIT_CODE=1
+    fi
+  done < <(find "$CANONICAL" -type f -print0)
+done
+
+if [ $EXIT_CODE -eq 0 ]; then
+  echo "all samples in sync with canonical engine"
+fi
+
+exit $EXIT_CODE
--- a/html-presentation/template.html
+++ b/html-presentation/template.html
@ -111,8 +111,9 @@
    </div>
  </div>
 </div>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
-<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
+<link rel="stylesheet" href="engine/lib/github.min.css" media="(prefers-color-scheme: light)">
+<link rel="stylesheet" href="engine/lib/github-dark.min.css" media="(prefers-color-scheme: dark)">
+<script src="engine/lib/highlight.min.js"></script>
 <script>if (window.hljs) { hljs.highlightAll(); }</script>
 <script src="engine/engine.js"></script>
 </body>