docs: Prism.js syntax highlighting with eggspot brand theme#101
docs: Prism.js syntax highlighting with eggspot brand theme#101cloud-hai-vo merged 1 commit intomainfrom
Conversation
- Add prism-eggspot.css: custom dark theme using #FAB400 yellow (types), #7b9eff blue (keywords), #7ec699 green (strings), #FAB8C4 pink (decorators) - Tag 187 code blocks across all 20 pages with language-csharp / language-bash / language-powershell / language-xml; 37 plain-text blocks left untagged - Inject Prism core + autoloader from cdnjs CDN into every page - Remove hardcoded color from pre code in eggspot.css so token colours show through Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds Prism.js-based syntax highlighting to the EggMapper docs site, using an Eggspot-branded dark theme so code samples across the documentation render with consistent, readable token colors.
Changes:
- Add a custom Prism theme (
prism-eggspot.css) and include it across docs pages. - Tag code blocks with Prism
language-*classes for C#, bash, PowerShell, and XML. - Inject Prism core + autoloader scripts via cdnjs and adjust existing code styling to allow Prism token colors to show.
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 22 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/index.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/quick-start.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/vs-automapper.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Getting-Started.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Configuration.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Profiles.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Dependency-Injection.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Advanced-Features.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Performance.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Migration-Guide.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/API-Reference.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Tier2-Getting-Started.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/Tier3-Getting-Started.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG1002.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG1003.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG2001.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG2002.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG3001.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG3002.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/diagnostics/EGG3003.html | Includes Prism theme + Prism scripts; tags code blocks for highlighting. |
| docs/assets/css/eggspot.css | Removes pre code hardcoded color so Prism token colors can render. |
| docs/assets/css/prism-eggspot.css | Adds the Eggspot-branded Prism token color theme. |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (typeof Prism !== "undefined") { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism && typeof window.Prism.highlightAll === "function") { | |
| window.Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="../assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="../assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism && typeof window.Prism.highlightAll === "function") { | |
| window.Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="../assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism && typeof window.Prism.highlightAll === "function") { | |
| window.Prism.highlightAll(); | |
| } | |
| </script> |
| </footer> | ||
| <script src="assets/js/nav.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> |
There was a problem hiding this comment.
Prism is loaded with prism-core + prism-autoloader, but nothing triggers highlighting. With this setup Prism will not automatically run, so the page’s code blocks will remain unhighlighted unless you call Prism.highlightAll() (or include the full prism.min.js build that auto-runs). Add an explicit init after these script tags (or a shared prism-init.js).
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> | |
| <script> | |
| if (window.Prism) { | |
| Prism.highlightAll(); | |
| } | |
| </script> |
📊 Benchmark Results
🔵 Flat Mapping — 10-property object
🟡 Flattening — 2 nested objects → 8 flat properties
🟣 Deep Mapping — 2 nested address objects
🟢 Complex Mapping — nested object + collection
🟠 Collection — 100-item
|
| Method | Mean | Error | StdDev | Min | Median | Max | Ratio | RatioSD | Rank | Gen0 | Gen1 | Allocated | Alloc Ratio |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Manual | 1.742 μs | 0.5113 μs | 0.0280 μs | 1.722 μs | 1.729 μs | 1.774 μs | 1.00 | 0.02 | 1 | 0.5283 | 0.0172 | 8.65 KB | 1.00 |
| EggMapper | 1.761 μs | 0.8974 μs | 0.0492 μs | 1.727 μs | 1.739 μs | 1.817 μs | 1.01 | 0.03 | 1 | 0.5283 | 0.0172 | 8.65 KB | 1.00 |
| AutoMapper | 2.371 μs | 0.3107 μs | 0.0170 μs | 2.360 μs | 2.361 μs | 2.390 μs | 1.36 | 0.02 | 2 | 0.6065 | 0.0191 | 9.95 KB | 1.15 |
| Mapster | 1.769 μs | 0.2637 μs | 0.0145 μs | 1.754 μs | 1.770 μs | 1.783 μs | 1.02 | 0.02 | 1 | 0.5283 | 0.0172 | 8.65 KB | 1.00 |
| MapperlyMap | 1.748 μs | 0.2200 μs | 0.0121 μs | 1.737 μs | 1.747 μs | 1.761 μs | 1.00 | 0.02 | 1 | 0.5283 | 0.0172 | 8.65 KB | 1.00 |
| AgileMapper | 2.560 μs | 0.7501 μs | 0.0411 μs | 2.521 μs | 2.557 μs | 2.603 μs | 1.47 | 0.03 | 2 | 0.5417 | 0.0153 | 8.91 KB | 1.03 |
🟠 Collection — 100-item List<T>
| Method | Mean | Error | StdDev | Min | Median | Max | Ratio | RatioSD | Rank | Gen0 | Gen1 | Allocated | Alloc Ratio |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Manual | 5.297 μs | 0.4120 μs | 0.0226 μs | 5.276 μs | 5.294 μs | 5.321 μs | 1.00 | 0.01 | 1 | 1.6708 | 0.0916 | 27.4 KB | 1.00 |
| EggMapper | 5.816 μs | 1.2624 μs | 0.0692 μs | 5.746 μs | 5.818 μs | 5.884 μs | 1.10 | 0.01 | 1 | 1.6708 | 0.0916 | 27.4 KB | 1.00 |
| AutoMapper | 6.599 μs | 1.6296 μs | 0.0893 μs | 6.520 μs | 6.580 μs | 6.696 μs | 1.25 | 0.02 | 1 | 1.7548 | 0.1068 | 28.7 KB | 1.05 |
| Mapster | 5.923 μs | 1.9743 μs | 0.1082 μs | 5.858 μs | 5.864 μs | 6.048 μs | 1.12 | 0.02 | 1 | 1.6708 | 0.0916 | 27.4 KB | 1.00 |
| MapperlyMap | 5.433 μs | 3.6149 μs | 0.1981 μs | 5.282 μs | 5.359 μs | 5.657 μs | 1.03 | 0.03 | 1 | 1.6785 | 0.0992 | 27.42 KB | 1.00 |
| AgileMapper | 5.337 μs | 0.7891 μs | 0.0433 μs | 5.299 μs | 5.327 μs | 5.384 μs | 1.01 | 0.01 | 1 | 1.0223 | 0.0610 | 16.72 KB | 0.61 |
🟠 Collection — 100-item List<T>
| Method | Mean | Error | StdDev | Min | Median | Max | Ratio | RatioSD | Rank | Gen0 | Gen1 | Allocated | Alloc Ratio |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Manual | 16.55 μs | 0.835 μs | 0.046 μs | 16.50 μs | 16.55 μs | 16.59 μs | 1.00 | 0.00 | 1 | 5.2490 | 1.3123 | 85.99 KB | 1.00 |
| EggMapper | 17.86 μs | 10.368 μs | 0.568 μs | 17.26 μs | 17.93 μs | 18.39 μs | 1.08 | 0.03 | 1 | 5.2490 | 1.3123 | 85.99 KB | 1.00 |
| AutoMapper | 22.98 μs | 2.336 μs | 0.128 μs | 22.90 μs | 22.92 μs | 23.13 μs | 1.39 | 0.01 | 1 | 5.7678 | 1.4343 | 94.34 KB | 1.10 |
| Mapster | 18.20 μs | 9.209 μs | 0.505 μs | 17.65 μs | 18.31 μs | 18.65 μs | 1.10 | 0.03 | 1 | 5.2490 | 1.3123 | 85.99 KB | 1.00 |
| MapperlyMap | 18.69 μs | 3.469 μs | 0.190 μs | 18.51 μs | 18.68 μs | 18.89 μs | 1.13 | 0.01 | 1 | 5.2490 | 1.2817 | 86.02 KB | 1.00 |
| AgileMapper | 20.32 μs | 8.743 μs | 0.479 μs | 19.78 μs | 20.48 μs | 20.69 μs | 1.23 | 0.03 | 1 | 5.2795 | 1.3123 | 86.25 KB | 1.00 |
⚪ Startup / Configuration time
| Method | Mean | Error | StdDev | Min | Median | Max | Ratio | RatioSD | Rank | Gen0 | Gen1 | Allocated | Alloc Ratio |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| EggMapperStartup | 1,352.690 μs | 1,770.3107 μs | 97.0367 μs | 1,275.921 μs | 1,320.392 μs | 1,461.757 μs | 1.003 | 0.09 | 3 | 5.8594 | 3.9063 | 95.43 KB | 1.00 |
| AutoMapperStartup | 355.803 μs | 1,048.2038 μs | 57.4556 μs | 319.518 μs | 325.845 μs | 422.046 μs | 0.264 | 0.04 | 2 | 5.8594 | - | 104 KB | 1.09 |
| MapsterStartup | 2.509 μs | 0.8584 μs | 0.0470 μs | 2.462 μs | 2.508 μs | 2.556 μs | 0.002 | 0.00 | 1 | 0.7019 | 0.0267 | 11.51 KB | 0.12 |
EggMapper.Benchmarks.ColdStartBenchmark-report-github
| Method | Mean | Error | StdDev | Min | Median | Max | Ratio | RatioSD | Rank | Gen0 | Gen1 | Allocated | Alloc Ratio |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| EggMapper | 1.356 ms | 0.3836 ms | 0.0210 ms | 1.333 ms | 1.362 ms | 1.374 ms | 1.00 | 0.02 | 1 | 5.8594 | 3.9063 | 96.46 KB | 1.00 |
| AutoMapper | 4.024 ms | 10.2585 ms | 0.5623 ms | 3.583 ms | 3.832 ms | 4.657 ms | 2.97 | 0.36 | 2 | 15.6250 | 7.8125 | 311.87 KB | 3.23 |
| Mapster | 4.596 ms | 7.2101 ms | 0.3952 ms | 4.143 ms | 4.778 ms | 4.868 ms | 3.39 | 0.26 | 2 | 39.0625 | 15.6250 | 757.67 KB | 7.85 |
📝 Notes
- Each benchmark class is decorated with
[MemoryDiagnoser]and[RankColumn]. - The global config (see
src/EggMapper.Benchmarks/Program.cs) addsMin,Median, andMaxcolumns. - Manual is the hand-written baseline (ratio = 1.00). A ratio < 1 means faster than manual.
- Benchmarks run on GitHub-hosted runners — absolute times may vary between runs; focus on Ratio for comparisons.
- To reproduce locally:
cd src/EggMapper.Benchmarks dotnet run --configuration Release -- --filter '*'
Summary
prism-eggspot.css— custom Prism.js dark theme using eggspot brand colours:#FAB400yellow for types/class names,#7b9effblue for keywords,#7ec699green for strings,#FAB8C4pink for decorators/annotations,#f08d49orange for numberslanguage-csharp,language-bash,language-powershell, orlanguage-xmlacross all 20 pages; 37 plain-text/pseudo-code blocks left untaggedeggspot.css— removed hardcodedcolor: var(--text)frompre codeso Prism token colours render correctlyTest plan
#7b9eff), string colour (green), type names (yellow)<code>spans still use the amber colour (not affected by Prism)🤖 Generated with Claude Code