update design

public/css/style.css

@@ -784,6 +784,20 @@ a:hover {
   color: var(--color) !important;
 }
 
+.markdown-body table tr {
+  background-color: var(--main-bg-color);
+  border-top: 1px solid var(--border-color);
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--paper-bg-alt);
+}
+
+.markdown-body table td,
+.markdown-body table th {
+  border: 1px solid var(--border-color);
+}
+
 .file-content {
   padding: 4px 7px;
   text-align: left;
@@ -2274,7 +2288,7 @@ code {
   gap: 8px;
   position: fixed;
   bottom: 18px;
-  left: 18px;
+  right: 18px;
   z-index: 1100;
   padding: 10px 14px;
   background: var(--color);
@@ -2295,6 +2309,16 @@ code {
 @media (max-width: 991px) {
   .sidebar-toggle { display: inline-flex; }
 
+  /* Move Ko-fi widget to the left to avoid clashing with the Files button */
+  .floatingchat-container-wrap {
+    left: 3px !important;
+    right: auto !important;
+  }
+  .floating-chat-kofi-popup-iframe {
+    left: 10px !important;
+    right: auto !important;
+  }
+
   /* Sidebar becomes a slide-in drawer */
   .leftCol {
     position: fixed;

public/partials/anonymize.htm

@@ -372,15 +372,17 @@
           </div>
           <small ng-if="options.origin">Gist ID: {{details.source.gistId}}</small>
           <small ng-if="options.username && details.gist.ownerLogin">By @{{anonymizeGistContent(details.gist.ownerLogin)}}</small>
-          <ul class="pr-comments mt-3">
-            <li class="pr-comment" ng-repeat="file in details.gist.files" ng-if="options.content">
-              <div class="pr-comment-head">
-                <strong ng-bind="anonymizeGistContent(file.filename)"></strong>
-                <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
-              </div>
-              <pre class="pr-diff"><code ng-bind="anonymizeGistContent(file.content)"></code></pre>
-            </li>
-          </ul>
+          <div ng-if="options.content && previewGistFiles.length">
+            <ul class="pr-comments mt-3">
+              <li class="pr-comment" ng-repeat="file in previewGistFiles">
+                <div class="pr-comment-head">
+                  <strong ng-bind="file.filename"></strong>
+                  <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
+                </div>
+                <gist-file file="file" terms="terms" options="options"></gist-file>
+              </li>
+            </ul>
+          </div>
           <div ng-if="options.comments && details.gist.comments && details.gist.comments.length">
             <h3 class="paper-section-eyebrow mt-3">Comments</h3>
             <ul class="pr-comments">

public/partials/gist.htm

@@ -26,7 +26,7 @@
       </div>
     </header>
 
-    <nav class="paper-tabs" ng-if="details.files || details.comments" role="tablist">
+    <nav class="paper-tabs" ng-if="(details.files && details.files.length) || (details.comments && details.comments.length)" role="tablist">
       <button
         class="paper-tab"
         ng-if="details.files"
@@ -65,7 +65,7 @@
               <strong ng-bind="file.filename"></strong>
               <span class="pr-comment-date" ng-if="file.language">{{file.language}}</span>
             </div>
-            <pre class="pr-diff"><code ng-bind="file.content"></code></pre>
+            <gist-file file="file"></gist-file>
           </li>
           <li class="paper-table-empty" ng-if="!details.files.length">
             <i class="fas fa-file"></i>

public/script/app.js

@@ -341,6 +341,92 @@ angular
       };
     },
   ])
+  .directive("gistFile", [
+    "$location",
+    "$timeout",
+    "$sce",
+    function ($location, $timeout, $sce) {
+      // Map GitHub `language` and file extensions to Prism aliases. Prism
+      // only ships a handful of grammars (js/py/r/julia/markup); unknown
+      // classes still render as readable <pre><code>.
+      const langAliases = {
+        javascript: "javascript",
+        js: "javascript",
+        typescript: "javascript",
+        ts: "javascript",
+        jsx: "javascript",
+        tsx: "javascript",
+        python: "python",
+        py: "python",
+        ipynb: "json",
+        r: "r",
+        julia: "julia",
+        html: "markup",
+        xml: "markup",
+        svg: "markup",
+        json: "json",
+        yaml: "yaml",
+        yml: "yaml",
+        bash: "bash",
+        sh: "bash",
+        shell: "bash",
+        css: "css",
+        scss: "css",
+        c: "c",
+        "c++": "cpp",
+        cpp: "cpp",
+        java: "java",
+        go: "go",
+        rust: "rust",
+        ruby: "ruby",
+        php: "php",
+        sql: "sql",
+        diff: "diff",
+      };
+      function ext(filename) {
+        const i = (filename || "").lastIndexOf(".");
+        return i < 0 ? "" : filename.slice(i + 1).toLowerCase();
+      }
+      function langFor(file) {
+        const fromLang =
+          file && file.language && langAliases[file.language.toLowerCase()];
+        if (fromLang) return fromLang;
+        const fromExt = langAliases[ext(file && file.filename)];
+        return fromExt || "none";
+      }
+      function kind(file) {
+        const e = ext(file && file.filename);
+        if (e === "md" || e === "markdown" || (file && file.language === "Markdown"))
+          return "md";
+        return "code";
+      }
+      return {
+        restrict: "E",
+        scope: { file: "=", terms: "=", options: "=" },
+        template:
+          '<div ng-if="kind === \'md\'"><markdown content="file.content" terms="terms" options="options"></markdown></div>' +
+          '<pre ng-if="kind === \'code\'" class="line-numbers"><code class="{{prismClass}}" ng-bind="file.content"></code></pre>',
+        link: function (scope, elem) {
+          function update() {
+            if (!scope.file) return;
+            scope.kind = kind(scope.file);
+            scope.prismClass = "language-" + langFor(scope.file);
+            // Re-run Prism after the new <code> lands in the DOM.
+            $timeout(() => {
+              const codes = elem[0].querySelectorAll("pre code");
+              codes.forEach((c) => {
+                if (window.Prism) Prism.highlightElement(c);
+              });
+            }, 50);
+          }
+          scope.$watch("file", update);
+          scope.$watch("file.content", update);
+          scope.$watch("terms", update);
+          scope.$watch("options", update, true);
+        },
+      };
+    },
+  ])
   .directive("markdown", [
     "$location",
     function ($location) {
@@ -1656,6 +1742,7 @@ angular
 
       let _gistAnonCache = new Map();
       let _gistSeenContents = new Set();
+      let _gistCacheVersion = 0;
 
       function collectGistContents() {
         const out = new Set();
@@ -1692,6 +1779,8 @@ angular
             next.set(seen[i], data.contents[i]);
           }
           _gistAnonCache = next;
+          _gistCacheVersion++;
+          rebuildPreviewGistFiles();
         }
       );
 
@@ -1704,6 +1793,25 @@ angular
         return content;
       };
 
+      // Precomputed file objects for the preview pane so <gist-file>'s
+      // two-way binding has a stable reference. Recomputes when the source
+      // files change OR when the anonymization cache turns over.
+      $scope.previewGistFiles = [];
+      function rebuildPreviewGistFiles() {
+        const files =
+          ($scope.details && $scope.details.gist && $scope.details.gist.files) || [];
+        $scope.previewGistFiles = files.map((f) => ({
+          filename: $scope.anonymizeGistContent(f.filename),
+          content: $scope.anonymizeGistContent(f.content),
+          language: f.language,
+        }));
+      }
+      // _prAnonCache turns over inside refreshGistPreview's applyResult; the
+      // simplest signal we have is the digest cycle, so re-derive each digest.
+      // Cheap when _gistAnonCache hits.
+      $scope.$watch("details.gist.files", rebuildPreviewGistFiles, true);
+      $scope.$watch("terms", rebuildPreviewGistFiles);
+
       // ========== SHARED LOGIC ==========
       function getConference() {
         if (!$scope.conference) return;