{"title":"Syntax Highlighting System Architecture","description":"Deep dive into MyLittleContentEngine\u0027s multi-layered syntax highlighting system with Roslyn, TextMateSharp, and custom highlighters","islands":{"content":"\u003Cheader class=\u0022transition-all mb-4 lg:mb-8\u0022\u003E\u003Ch1 class=\u0022font-display text-2xl lg:text-4xl font-bold tracking-tight text-base-900 dark:text-base-50\u0022\u003ESyntax Highlighting System Architecture\u003C/h1\u003E\u003C/header\u003E\n\n\u003Cmain class=\u0022prose dark:prose-invert dark:text-base-300 max-w-full prose-sm md:prose-base min-w-0 prose-headings:scroll-m-18 prose-headings:font-display prose-headings:text-base-900 dark:prose-headings:text-base-50\u0022\u003E\u003Cp\u003EMyLittleContentEngine features a sophisticated multi-layered syntax highlighting system that provides server-side highlighting for optimal performance while maintaining broad language compatibility. The system uses a cascading approach with four different highlighting engines, each optimized for specific use cases.\u003C/p\u003E\n\u003Cdiv class=\u0022markdown-alert markdown-alert-note\u0022\u003E\n\u003Cp class=\u0022markdown-alert-title\u0022\u003E\u003Csvg viewBox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\u0022\u003E\u003C/path\u003E\u003C/svg\u003ENote\u003C/p\u003E\n\u003Cp\u003ETo enable Roslyn syntax highlighting for C# and VB.NET, see \u003Ca href=\u0022/MyLittleContentEngine/getting-started/connecting-to-roslyn/\u0022\u003EConnecting to Roslyn\u003C/a\u003E. For information about styling syntax highlighting, see \u003Ca href=\u0022/MyLittleContentEngine/reference/monorail-css-configuration/\u0022\u003EMonorail CSS Configuration\u003C/a\u003E.\u003C/p\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022architecture-overview\u0022\u003EArchitecture Overview\u003C/h2\u003E\n\u003Cp\u003EThe syntax highlighting system follows a priority-based cascade that maximizes accuracy and performance:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode class=\u0022language-mermaid code\u0022\u003E\u003Cspan class=\u0022line\u0022\u003Egraph TD\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    A[Code Block] --\u0026gt; B{Language Detection}\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    B --\u0026gt; C{Roslyn Available?}\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    C --\u0026gt;|Yes \u002B C#/VB| D[Roslyn Highlighter]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    C --\u0026gt;|No| E{Custom Highlighter?}\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    E --\u0026gt;|GBNF/Shell/Text| F[Custom Highlighter]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    E --\u0026gt;|No| G{TextMate Grammar?}\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    G --\u0026gt;|Available| H[TextMateSharp]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    G --\u0026gt;|Unavailable| I[Client-side Highlight.js]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    D --\u0026gt; J[Server-side HTML with CSS Classes]\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    F --\u0026gt; J\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    H --\u0026gt; J\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    I --\u0026gt; K[Client-side Highlighting]\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis layered approach ensures that:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EC# and VB.NET\u003C/strong\u003E get the most accurate highlighting via Roslyn\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ECommon languages\u003C/strong\u003E are highlighted server-side for better performance\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESpecialized languages\u003C/strong\u003E receive custom tokenization\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EAny language\u003C/strong\u003E can be handled via client-side fallback\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022layer-1-roslyn-highlighter-highest-priority\u0022\u003ELayer 1: Roslyn Highlighter (Highest Priority)\u003C/h2\u003E\n\u003Cp\u003EThe Roslyn highlighter provides the most accurate syntax highlighting for .NET languages by leveraging Microsoft\u0027s actual C# and VB.NET compilers.\u003C/p\u003E\n\u003Ch3 id=\u0022special-roslyn-features\u0022\u003ESpecial Roslyn Features\u003C/h3\u003E\n\u003Ch4 id=\u0022xml-documentation-integration\u0022\u003EXML Documentation Integration\u003C/h4\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003Ecsharp:xmldocid\n\u003Cspan class=\u0022hljs-name\u0022\u003ET\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003ESystem\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003ECollections\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EGeneric\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003EList\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-type\u0022\u003ET\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0026gt;\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EAdd\u003C/span\u003E\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis extracts the actual implementation of \u003Ccode\u003EList\u0026lt;T\u0026gt;.Add\u003C/code\u003E from the loaded assemblies and highlights it with full semantic information.\u003C/p\u003E\n\u003Ch4 id=\u0022file-path-loading\u0022\u003EFile Path Loading\u003C/h4\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003Ecsharp:path\n\u003Cspan class=\u0022hljs-variable\u0022\u003Eexamples\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E/\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003EMinimalExample\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E/\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003EProgram\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003Ecs\u003C/span\u003E\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003ELoads and highlights external files from your solution, ensuring documentation stays in sync with actual code.\u003C/p\u003E\n\u003Cdiv class=\u0022markdown-alert markdown-alert-tip\u0022\u003E\n\u003Cp class=\u0022markdown-alert-title\u0022\u003E\u003Csvg viewBox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z\u0022\u003E\u003C/path\u003E\u003C/svg\u003ETip\u003C/p\u003E\n\u003Cp\u003EThis will work for non-C# files too, but they have to be part of the .NET solution.\u003C/p\u003E\n\u003C/div\u003E\n\u003Ch4 id=\u0022body-only-documentation\u0022\u003EBody-Only Documentation\u003C/h4\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003Ecsharp:xmldocid,bodyonly\n\u003Cspan class=\u0022hljs-name\u0022\u003EM\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003EMyNamespace\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EMyClass\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EMyMethod\u003C/span\u003E\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E\u0060\u0060\u0060\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EShows only the method body without class declaration context.\u003C/p\u003E\n\u003Ch3 id=\u0022implementation-details\u0022\u003EImplementation Details\u003C/h3\u003E\n\u003Cp\u003EThe Roslyn highlighter operates by:\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cstrong\u003ELoading Solutions\u003C/strong\u003E: Scans referenced assemblies and XML documentation\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESemantic Analysis\u003C/strong\u003E: Uses full compiler semantic information\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EClassification\u003C/strong\u003E: Applies precise token classification (keywords, types, literals, etc.)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EHTML Generation\u003C/strong\u003E: Outputs semantic HTML with CSS classes matching Highlight.js conventions\u003C/li\u003E\n\u003C/ol\u003E\n\u003Ch2 id=\u0022layer-2-custom-highlighters\u0022\u003ELayer 2: Custom Highlighters\u003C/h2\u003E\n\u003Cp\u003ECustom highlighters provide specialized tokenization for domain-specific languages that benefit from purpose-built parsers.\u003C/p\u003E\n\u003Ch3 id=\u0022gbnf-grammar-backus-naur-form\u0022\u003EGBNF (Grammar Backus-Naur Form)\u003C/h3\u003E\n\u003Cp\u003E\u003Cstrong\u003ELanguage\u003C/strong\u003E: \u003Ccode\u003Egbnf\u003C/code\u003E\n\u003Cstrong\u003EPurpose\u003C/strong\u003E: Highlighting grammar definitions for language parsers\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Eroot\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E::=\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Eexpr\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Eexpr\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E::=\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Eterm\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u002B\u0022\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E|\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022-\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E)\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Eterm\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E*\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Eterm\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E::=\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Efactor\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022*\u0022\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E|\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022/\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E)\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Efactor\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E*\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Efactor\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E::=\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Enumber\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E|\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022(\u0022\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003Eexpr\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022)\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Enumber\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E::=\u003C/span\u003E \u003Cspan class=\u0022hljs-regexp\u0022\u003E[0-9]\u003C/span\u003E\u003Cspan class=\u0022hljs-operator\u0022\u003E\u002B\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003E\u003Cstrong\u003EFeatures:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003ERule Detection\u003C/strong\u003E: Identifies grammar rule definitions\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EOperator Highlighting\u003C/strong\u003E: Highlights GBNF operators (\u003Ccode\u003E::=\u003C/code\u003E, \u003Ccode\u003E|\u003C/code\u003E, \u003Ccode\u003E*\u003C/code\u003E, \u003Ccode\u003E\u002B\u003C/code\u003E, \u003Ccode\u003E?\u003C/code\u003E)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EString Literals\u003C/strong\u003E: Recognizes quoted terminal symbols\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ECharacter Ranges\u003C/strong\u003E: Highlights bracket notation \u003Ccode\u003E[a-z]\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EComments\u003C/strong\u003E: Supports \u003Ccode\u003E//\u003C/code\u003E line comments\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch3 id=\u0022shellbash-highlighter\u0022\u003EShell/Bash Highlighter\u003C/h3\u003E\n\u003Cp\u003E\u003Cstrong\u003ELanguages\u003C/strong\u003E: \u003Ccode\u003Ebash\u003C/code\u003E, \u003Ccode\u003Eshell\u003C/code\u003E\n\u003Cstrong\u003EPurpose\u003C/strong\u003E: Command-line script highlighting with semantic understanding\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E#!/bin/bash\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E# Install dependencies\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Ecurl\u003C/span\u003E \u003Cspan class=\u0022hljs-params\u0022\u003E-sfL\u003C/span\u003E https://example.com/install.sh | tar \u003Cspan class=\u0022hljs-params\u0022\u003E-xzf\u003C/span\u003E -\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E build \u003Cspan class=\u0022hljs-params\u0022\u003E--configuration\u003C/span\u003E Release\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003E\u003Cstrong\u003EFeatures:\u003C/strong\u003E\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003ECommand Recognition\u003C/strong\u003E: Identifies shell commands and built-ins\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EFlag Highlighting\u003C/strong\u003E: Recognizes command-line flags (\u003Ccode\u003E-f\u003C/code\u003E, \u003Ccode\u003E--verbose\u003C/code\u003E)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EString Detection\u003C/strong\u003E: Handles single and double-quoted strings\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EComment Support\u003C/strong\u003E: Highlights \u003Ccode\u003E#\u003C/code\u003E and \u003Ccode\u003EREM\u003C/code\u003E comments\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EShebang Support\u003C/strong\u003E: Recognizes script interpreters\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch3 id=\u0022plain-text-handler\u0022\u003EPlain Text Handler\u003C/h3\u003E\n\u003Cp\u003E\u003Cstrong\u003ELanguages\u003C/strong\u003E: \u003Ccode\u003Etext\u003C/code\u003E, \u0060\u0060 (empty string)\n\u003Cstrong\u003EPurpose\u003C/strong\u003E: Renders code without syntax highlighting\u003C/p\u003E\n\u003Cp\u003ESimply wraps content in \u003Ccode\u003E\u0026lt;pre\u0026gt;\u0026lt;code\u0026gt;\u003C/code\u003E tags with HTML escaping, providing a fallback for content that shouldn\u0027t be highlighted.\u003C/p\u003E\n\u003Ch2 id=\u0022layer-3-textmatesharp-integration\u0022\u003ELayer 3: TextMateSharp Integration\u003C/h2\u003E\n\u003Cp\u003E\u003Ca href=\u0022https://github.com/danipen/TextMateSharp\u0022\u003ETextMateSharp\u003C/a\u003E provides broad language support using Visual Studio Code\u0027s grammar definitions, offering server-side highlighting for 49\u002B programming languages.\u003C/p\u003E\n\u003Ch3 id=\u0022language-coverage\u0022\u003ELanguage Coverage\u003C/h3\u003E\n\u003Ch4 id=\u0022web-technologies\u0022\u003EWeb Technologies\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EFrontend\u003C/strong\u003E: HTML, CSS, SCSS, Less, JavaScript, TypeScript\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EData\u003C/strong\u003E: JSON, XML, YAML\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ETemplates\u003C/strong\u003E: Handlebars, Pug, Razor\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022systems-programming\u0022\u003ESystems Programming\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003ENative\u003C/strong\u003E: C, C\u002B\u002B, Rust, Go, Swift, Objective-C\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EManaged\u003C/strong\u003E: Java, Kotlin, Dart, Pascal\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022scripting--dynamic\u0022\u003EScripting \u0026amp; Dynamic\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EPython\u003C/strong\u003E: Full Python 3 syntax support\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ERuby\u003C/strong\u003E: Including Rails-specific highlighting\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EPHP\u003C/strong\u003E: Web-focused syntax highlighting\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EPowerShell\u003C/strong\u003E: Windows scripting support\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ELua\u003C/strong\u003E: Lightweight scripting language\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ER\u003C/strong\u003E: Statistical computing language\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022functional-programming\u0022\u003EFunctional Programming\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EF#\u003C/strong\u003E: .NET functional language\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EClojure\u003C/strong\u003E: JVM-based Lisp dialect\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EJulia\u003C/strong\u003E: Scientific computing language\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022documentation--markup\u0022\u003EDocumentation \u0026amp; Markup\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EMarkdown\u003C/strong\u003E: Including extensions and frontmatter\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ELaTeX\u003C/strong\u003E: Mathematical typesetting\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EAsciiDoc\u003C/strong\u003E: Technical documentation\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ETypst\u003C/strong\u003E: Modern markup language\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch4 id=\u0022specialized-languages\u0022\u003ESpecialized Languages\u003C/h4\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EHLSL/ShaderLab\u003C/strong\u003E: Graphics programming\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESQL\u003C/strong\u003E: Database queries\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EGroovy\u003C/strong\u003E: JVM scripting\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EDockerfile\u003C/strong\u003E: Container definitions\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch3 id=\u0022fallback-behavior\u0022\u003EFallback Behavior\u003C/h3\u003E\n\u003Cp\u003EWhen a requested language isn\u0027t found:\u003C/p\u003E\n\u003Col\u003E\n\u003Cli\u003E\u003Cstrong\u003EScope Name Generation\u003C/strong\u003E: Tries \u003Ccode\u003Esource.{language}\u003C/code\u003E pattern\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EAlias Resolution\u003C/strong\u003E: Attempts common language aliases\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EPlain Text Fallback\u003C/strong\u003E: Renders as plain code block if no grammar is found\u003C/li\u003E\n\u003C/ol\u003E\n\u003Ch2 id=\u0022layer-4-client-side-highlightjs-fallback\u0022\u003ELayer 4: Client-Side Highlight.js (Fallback)\u003C/h2\u003E\n\u003Cp\u003EWhen server-side highlighting isn\u0027t available, the system falls back to client-side Highlight.js for maximum language compatibility.\u003C/p\u003E\n\u003Ch3 id=\u0022pre-loaded-languages-23\u0022\u003EPre-loaded Languages (23)\u003C/h3\u003E\n\u003Cp\u003EHigh-frequency languages loaded immediately:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003EWeb\u003C/strong\u003E: \u003Ccode\u003Ejavascript\u003C/code\u003E, \u003Ccode\u003Etypescript\u003C/code\u003E, \u003Ccode\u003Ecss\u003C/code\u003E, \u003Ccode\u003Ehtml\u003C/code\u003E, \u003Ccode\u003Exml\u003C/code\u003E, \u003Ccode\u003Ejson\u003C/code\u003E, \u003Ccode\u003Eyaml\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003ESystems\u003C/strong\u003E: \u003Ccode\u003Ecpp\u003C/code\u003E, \u003Ccode\u003Ec\u003C/code\u003E, \u003Ccode\u003Erust\u003C/code\u003E, \u003Ccode\u003Ego\u003C/code\u003E, \u003Ccode\u003Ejava\u003C/code\u003E, \u003Ccode\u003Ekotlin\u003C/code\u003E, \u003Ccode\u003Eswift\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EScripting\u003C/strong\u003E: \u003Ccode\u003Epython\u003C/code\u003E, \u003Ccode\u003Ephp\u003C/code\u003E, \u003Ccode\u003Eruby\u003C/code\u003E, \u003Ccode\u003Ebash\u003C/code\u003E, \u003Ccode\u003Eshell\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003EData\u003C/strong\u003E: \u003Ccode\u003Esql\u003C/code\u003E, \u003Ccode\u003Emarkdown\u003C/code\u003E\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003E.NET\u003C/strong\u003E: \u003Ccode\u003Ecsharp\u003C/code\u003E\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch3 id=\u0022dynamic-loading\u0022\u003EDynamic Loading\u003C/h3\u003E\n\u003Cp\u003EFor uncommon languages, Highlight.js loads additional grammars from CDN:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E//\u003C/span\u003E\u003Cspan class=\u0022hljs-comment\u0022\u003E Lazy load additional languages from CDN\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword\u0022\u003Econst\u003C/span\u003E \u003Cspan class=\u0022hljs-literal\u0022\u003Eresponse\u003C/span\u003E \u003Cspan class=\u0022hljs-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword\u0022\u003Eawait\u003C/span\u003E \u003Cspan class=\u0022hljs-title\u0022\u003Efetch\u003C/span\u003E(\u003Cspan class=\u0022hljs-string\u0022\u003E\u0060\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Ehttps://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E${\u003C/span\u003E\u003Cspan class=\u0022hljs-variable\u0022\u003Elanguage\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E.min.js\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0060\u003C/span\u003E)\u003Cspan class=\u0022hljs-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis provides access to 190\u002B languages without increasing initial bundle size.\u003C/p\u003E\n\u003Ch2 id=\u0022summary\u0022\u003ESummary\u003C/h2\u003E\n\u003Cp\u003EMyLittleContentEngine\u0027s syntax highlighting system provides comprehensive language support through a multi-layered architecture with 52\u002B server-side languages and 190\u002B client-side languages for maximum compatibility.\u003C/p\u003E\n\u003C/main\u003E\u003Cdiv class=\u0022flex my-12 border-t border-base-200 dark:border-base-700 pt-4 lg:pt-8\u0022\u003E\u003Cdiv class=\u0022flex flex-col items-start  gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Previous: Static Site Generation Pipeline\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/content-processing-pipeline/\u0022\u003E\u003Cspan class=\u0022-ml-1 rotate-180\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E Previous\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/content-processing-pipeline/\u0022\u003EStatic Site Generation Pipeline\u003C/a\u003E\u003C/div\u003E\u003Cdiv class=\u0022flex flex-col items-end ml-auto gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Next: JavaScript Architecture\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/javascript-architecture/\u0022\u003ENext \u003Cspan class=\u0022-mr-1\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/under-the-hood/javascript-architecture/\u0022\u003EJavaScript Architecture\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}