From bcd2d2a21edf5f96e8ffb799adc4de0e49059840 Mon Sep 17 00:00:00 2001
From: themushroompirates
 <59015901+themushroompirates@users.noreply.github.com>
Date: Thu, 10 Jul 2025 12:29:03 +0200
Subject: [PATCH 1/2] Added tabs for displaying shader code in examples

---
 examples/core/loader.html    | 72 +++++++++++++++++++++++++++++++++---
 examples/models/loader.html  | 67 +++++++++++++++++++++++++++++++--
 examples/shaders/loader.html | 68 ++++++++++++++++++++++++++++++++--
 examples/text/loader.html    | 67 +++++++++++++++++++++++++++++++--
 4 files changed, 256 insertions(+), 18 deletions(-)

diff --git a/examples/core/loader.html b/examples/core/loader.html
index fee8959a..765f1dc9 100644
--- a/examples/core/loader.html
+++ b/examples/core/loader.html
@@ -49,6 +49,16 @@
             .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
             .fancybox-inner { width: 850px!important; }
             .fancybox-iframe { width: 830px!important; }
+            
+            .tab-content > div { display: none; }
+            .tab-content > div.active { display: block; }
+            .tab-content > div pre { margin-top: 0!important; }
+            
+            .nav-tabs { display: block; padding: 0; margin: 10px 0 0 0; list-style: none; font-family: Courier New, Verdana, Arial !important; font-size: small; }
+            .nav-tabs li { position: relative; top: 1px; display: inline-block; margin: 5px 5px 0 5px; padding: 5px; border: 1px solid #b0b0b0; background: white; }
+            .nav-tabs li.active { border-bottom-color: #f0f0f0; background: #f0f0f0; }
+            .nav-tabs li a { text-decoration: none; color: #b0b0b0; }
+            .nav-tabs li.active a { text-decoration: none; color: black; }
         </style>
 
         <script type="text/javascript">
@@ -73,15 +83,56 @@
                 var srcUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.c';
                 var imgUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.png';
                 var linkUrl = 'https://github.com/raysan5/raylib/blob/master/examples/' + type + '/' + name + '.c';
+                var shaderBaseUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/';
 
                 $('#eximage img').attr('src', imgUrl);
 
                 $.get(srcUrl, function(data)
                 {
-                    $('pre code').text(data);
-                    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
-
+                    $('pre.main_source code').text(data);
+                    $('pre.main_source code').each(function(i, e) {hljs.highlightBlock(e)});
+                    
                     $('#source_link').attr("href", linkUrl);
+                    
+                    $('.nav-tabs a[href="#main_source"]').text(name + ".c");
+                    
+                    data.matchAll(/TextFormat\("(resources\/(?:[-_a-zA-Z0-9]+\/)*((?:[-_a-zA-Z0-9]+%i|glsl%i\/[-_a-zA-Z0-9]+)\.[fv]s))", GLSL_VERSION\)/g).forEach(function(match, index) {
+                        const shaderUriPattern = match[1];
+                        const shaderName = match[2].replace(/(\/?glsl)?%i/, '').replace(/^\//, ''); // Strip off versions here
+                        const shaderTabId = 'shader_' + (1+index);
+                        
+                        $('.nav-tabs').append(
+                            $('<li><a href="#'+shaderTabId+'">' + shaderName + '</a></li>')
+                        );
+                        
+                        const newCodePanel = $('<code class="glsl"></code>');
+                        $('.tab-content').append(
+                            $('<div id="' + shaderTabId + '"></div>').append(
+                                $('<pre></pre>').append(newCodePanel)
+                            )
+                        );
+                        
+						// Hardcoding glsl version for now
+                        const glslVersion = "330";
+                        
+                        $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
+                            newCodePanel.text(code);
+                            newCodePanel.each(function(i, e) {hljs.highlightBlock(e)});
+                        }, 'text');
+                    });
+                    
+
+                    $(".nav-tabs a").click(function(e){
+                        e.preventDefault();
+                        
+                        const paneToActivate = $(this.hash);
+                        $('.tab-content > div.active').removeClass('active');
+                        $('.nav-tabs > li.active').removeClass('active');
+                        
+                        $(this).parent('li').addClass('active');
+                        paneToActivate.addClass('active');
+                    });
+                    
                 }, 'text');
 
                 // Quick hack for some examples not working on web
@@ -136,9 +187,18 @@
         <div id="eximage"></div>
 
         <!--<textarea id="output" rows="8"></textarea>-->
-
-        <pre><code class="cpp"></code></pre>
-
+        
+        <ul class="nav-tabs">
+            <li class="active"><a href="#main_source">Main Source</a></li>
+        </ul>
+        
+        <div class="tab-content">
+            <div id="main_source" class="tab-pane active">
+                <pre class="main_source"><code class="cpp"></code></pre>
+            </div>
+        </div>
+        
+        
         <p>raylib example <a id="source_link" href="" target="_blank">source code</a></p>
 
         <script type='text/javascript'>
diff --git a/examples/models/loader.html b/examples/models/loader.html
index 521619b3..a97a4d41 100644
--- a/examples/models/loader.html
+++ b/examples/models/loader.html
@@ -49,6 +49,16 @@
             .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
             .fancybox-inner { width: 850px!important; }
             .fancybox-iframe { width: 830px!important; }
+            
+            .tab-content > div { display: none; }
+            .tab-content > div.active { display: block; }
+            .tab-content > div pre { margin-top: 0!important; }
+            
+            .nav-tabs { display: block; padding: 0; margin: 10px 0 0 0; list-style: none; font-family: Courier New, Verdana, Arial !important; font-size: small; }
+            .nav-tabs li { position: relative; top: 1px; display: inline-block; margin: 5px 5px 0 5px; padding: 5px; border: 1px solid #b0b0b0; background: white; }
+            .nav-tabs li.active { border-bottom-color: #f0f0f0; background: #f0f0f0; }
+            .nav-tabs li a { text-decoration: none; color: #b0b0b0; }
+            .nav-tabs li.active a { text-decoration: none; color: black; }
         </style>
         
         <script type="text/javascript">
@@ -73,15 +83,56 @@
                 var srcUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.c';
                 var imgUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.png';
                 var linkUrl = 'https://github.com/raysan5/raylib/blob/master/examples/' + type + '/' + name + '.c';
+                var shaderBaseUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/';
 
                 $('#eximage img').attr('src', imgUrl);
 
                 $.get(srcUrl, function(data)
-                { 
-                    $('pre code').text(data);
-                    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+                {
+                    $('pre.main_source code').text(data);
+                    $('pre.main_source code').each(function(i, e) {hljs.highlightBlock(e)});
                     
                     $('#source_link').attr("href", linkUrl);
+                    
+                    $('.nav-tabs a[href="#main_source"]').text(name + ".c");
+                    
+                    data.matchAll(/TextFormat\("(resources\/(?:[-_a-zA-Z0-9]+\/)*((?:[-_a-zA-Z0-9]+%i|glsl%i\/[-_a-zA-Z0-9]+)\.[fv]s))", GLSL_VERSION\)/g).forEach(function(match, index) {
+                        const shaderUriPattern = match[1];
+                        const shaderName = match[2].replace(/(\/?glsl)?%i/, '').replace(/^\//, ''); // Strip off versions here
+                        const shaderTabId = 'shader_' + (1+index);
+                        
+                        $('.nav-tabs').append(
+                            $('<li><a href="#'+shaderTabId+'">' + shaderName + '</a></li>')
+                        );
+                        
+                        const newCodePanel = $('<code class="glsl"></code>');
+                        $('.tab-content').append(
+                            $('<div id="' + shaderTabId + '"></div>').append(
+                                $('<pre></pre>').append(newCodePanel)
+                            )
+                        );
+                        
+						// Hardcoding glsl version for now
+                        const glslVersion = "330";
+                        
+                        $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
+                            newCodePanel.text(code);
+                            newCodePanel.each(function(i, e) {hljs.highlightBlock(e)});
+                        }, 'text');
+                    });
+                    
+
+                    $(".nav-tabs a").click(function(e){
+                        e.preventDefault();
+                        
+                        const paneToActivate = $(this.hash);
+                        $('.tab-content > div.active').removeClass('active');
+                        $('.nav-tabs > li.active').removeClass('active');
+                        
+                        $(this).parent('li').addClass('active');
+                        paneToActivate.addClass('active');
+                    });
+                    
                 }, 'text');
                 
                 // Quick hack for some examples not working on web
@@ -137,7 +188,15 @@
         
         <!--<textarea id="output" rows="8"></textarea>-->
         
-        <pre><code class="cpp"></code></pre>
+        <ul class="nav-tabs">
+            <li class="active"><a href="#main_source">Main Source</a></li>
+        </ul>
+        
+        <div class="tab-content">
+            <div id="main_source" class="tab-pane active">
+                <pre class="main_source"><code class="cpp"></code></pre>
+            </div>
+        </div>
         
         <p>raylib example <a id="source_link" href="" target="_blank">source code</a></p>
 
diff --git a/examples/shaders/loader.html b/examples/shaders/loader.html
index 5e4140be..06c820cc 100644
--- a/examples/shaders/loader.html
+++ b/examples/shaders/loader.html
@@ -49,6 +49,16 @@
             .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
             .fancybox-inner { width: 850px!important; }
             .fancybox-iframe { width: 830px!important; }
+            
+            .tab-content > div { display: none; }
+            .tab-content > div.active { display: block; }
+            .tab-content > div pre { margin-top: 0!important; }
+            
+            .nav-tabs { display: block; padding: 0; margin: 10px 0 0 0; list-style: none; font-family: Courier New, Verdana, Arial !important; font-size: small; }
+            .nav-tabs li { position: relative; top: 1px; display: inline-block; margin: 5px 5px 0 5px; padding: 5px; border: 1px solid #b0b0b0; background: white; }
+            .nav-tabs li.active { border-bottom-color: #f0f0f0; background: #f0f0f0; }
+            .nav-tabs li a { text-decoration: none; color: #b0b0b0; }
+            .nav-tabs li.active a { text-decoration: none; color: black; }
         </style>
         
         <script type="text/javascript">
@@ -73,15 +83,56 @@
                 var srcUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.c';
                 var imgUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.png';
                 var linkUrl = 'https://github.com/raysan5/raylib/blob/master/examples/' + type + '/' + name + '.c';
+                var shaderBaseUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/';
 
                 $('#eximage img').attr('src', imgUrl);
 
                 $.get(srcUrl, function(data)
-                { 
-                    $('pre code').text(data);
-                    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+                {
+                    $('pre.main_source code').text(data);
+                    $('pre.main_source code').each(function(i, e) {hljs.highlightBlock(e)});
                     
                     $('#source_link').attr("href", linkUrl);
+                    
+                    $('.nav-tabs a[href="#main_source"]').text(name + ".c");
+                    
+                    data.matchAll(/TextFormat\("(resources\/(?:[-_a-zA-Z0-9]+\/)*((?:[-_a-zA-Z0-9]+%i|glsl%i\/[-_a-zA-Z0-9]+)\.[fv]s))", GLSL_VERSION\)/g).forEach(function(match, index) {
+                        const shaderUriPattern = match[1];
+                        const shaderName = match[2].replace(/(\/?glsl)?%i/, '').replace(/^\//, ''); // Strip off versions here
+                        const shaderTabId = 'shader_' + (1+index);
+                        
+                        $('.nav-tabs').append(
+                            $('<li><a href="#'+shaderTabId+'">' + shaderName + '</a></li>')
+                        );
+                        
+                        const newCodePanel = $('<code class="glsl"></code>');
+                        $('.tab-content').append(
+                            $('<div id="' + shaderTabId + '"></div>').append(
+                                $('<pre></pre>').append(newCodePanel)
+                            )
+                        );
+                        
+						// Hardcoding glsl version for now
+                        const glslVersion = "330";
+                        
+                        $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
+                            newCodePanel.text(code);
+                            newCodePanel.each(function(i, e) {hljs.highlightBlock(e)});
+                        }, 'text');
+                    });
+                    
+
+                    $(".nav-tabs a").click(function(e){
+                        e.preventDefault();
+                        
+                        const paneToActivate = $(this.hash);
+                        $('.tab-content > div.active').removeClass('active');
+                        $('.nav-tabs > li.active').removeClass('active');
+                        
+                        $(this).parent('li').addClass('active');
+                        paneToActivate.addClass('active');
+                    });
+                    
                 }, 'text');
                 
                 // #eximage filling code: canvas sample and image
@@ -129,7 +180,16 @@
         
         <!--<textarea id="output" rows="8"></textarea>-->
         
-        <pre><code class="cpp"></code></pre>
+        <ul class="nav-tabs">
+            <li class="active"><a href="#main_source">Main Source</a></li>
+        </ul>
+        
+        <div class="tab-content">
+            <div id="main_source" class="tab-pane active">
+                <pre class="main_source"><code class="cpp"></code></pre>
+            </div>
+        </div>
+        
         
         <p>raylib example <a id="source_link" href="" target="_blank">source code</a></p>
 
diff --git a/examples/text/loader.html b/examples/text/loader.html
index 2aefb7aa..c8b18c52 100644
--- a/examples/text/loader.html
+++ b/examples/text/loader.html
@@ -49,6 +49,16 @@
             .fancybox-wrap fancybox-desktop fancybox-type-iframe fancybox-opened { width: 860px!important;}
             .fancybox-inner { width: 850px!important; }
             .fancybox-iframe { width: 830px!important; }
+            
+            .tab-content > div { display: none; }
+            .tab-content > div.active { display: block; }
+            .tab-content > div pre { margin-top: 0!important; }
+            
+            .nav-tabs { display: block; padding: 0; margin: 10px 0 0 0; list-style: none; font-family: Courier New, Verdana, Arial !important; font-size: small; }
+            .nav-tabs li { position: relative; top: 1px; display: inline-block; margin: 5px 5px 0 5px; padding: 5px; border: 1px solid #b0b0b0; background: white; }
+            .nav-tabs li.active { border-bottom-color: #f0f0f0; background: #f0f0f0; }
+            .nav-tabs li a { text-decoration: none; color: #b0b0b0; }
+            .nav-tabs li.active a { text-decoration: none; color: black; }
         </style>
         
         <script type="text/javascript">
@@ -73,15 +83,56 @@
                 var srcUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.c';
                 var imgUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/' + name + '.png';
                 var linkUrl = 'https://github.com/raysan5/raylib/blob/master/examples/' + type + '/' + name + '.c';
+                var shaderBaseUrl = 'https://raw.githubusercontent.com/raysan5/raylib/master/examples/' + type + '/';
 
                 $('#eximage img').attr('src', imgUrl);
 
                 $.get(srcUrl, function(data)
-                { 
-                    $('pre code').text(data);
-                    $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+                {
+                    $('pre.main_source code').text(data);
+                    $('pre.main_source code').each(function(i, e) {hljs.highlightBlock(e)});
                     
                     $('#source_link').attr("href", linkUrl);
+                    
+                    $('.nav-tabs a[href="#main_source"]').text(name + ".c");
+                    
+                    data.matchAll(/TextFormat\("(resources\/(?:[-_a-zA-Z0-9]+\/)*((?:[-_a-zA-Z0-9]+%i|glsl%i\/[-_a-zA-Z0-9]+)\.[fv]s))", GLSL_VERSION\)/g).forEach(function(match, index) {
+                        const shaderUriPattern = match[1];
+                        const shaderName = match[2].replace(/(\/?glsl)?%i/, '').replace(/^\//, ''); // Strip off versions here
+                        const shaderTabId = 'shader_' + (1+index);
+                        
+                        $('.nav-tabs').append(
+                            $('<li><a href="#'+shaderTabId+'">' + shaderName + '</a></li>')
+                        );
+                        
+                        const newCodePanel = $('<code class="glsl"></code>');
+                        $('.tab-content').append(
+                            $('<div id="' + shaderTabId + '"></div>').append(
+                                $('<pre></pre>').append(newCodePanel)
+                            )
+                        );
+                        
+						// Hardcoding glsl version for now
+                        const glslVersion = "330";
+                        
+                        $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
+                            newCodePanel.text(code);
+                            newCodePanel.each(function(i, e) {hljs.highlightBlock(e)});
+                        }, 'text');
+                    });
+                    
+
+                    $(".nav-tabs a").click(function(e){
+                        e.preventDefault();
+                        
+                        const paneToActivate = $(this.hash);
+                        $('.tab-content > div.active').removeClass('active');
+                        $('.nav-tabs > li.active').removeClass('active');
+                        
+                        $(this).parent('li').addClass('active');
+                        paneToActivate.addClass('active');
+                    });
+                    
                 }, 'text');
                 
                 // Quick hack for some examples not working on web
@@ -137,7 +188,15 @@
         
         <!--<textarea id="output" rows="8"></textarea>-->
         
-        <pre><code class="cpp"></code></pre>
+        <ul class="nav-tabs">
+            <li class="active"><a href="#main_source">Main Source</a></li>
+        </ul>
+        
+        <div class="tab-content">
+            <div id="main_source" class="tab-pane active">
+                <pre class="main_source"><code class="cpp"></code></pre>
+            </div>
+        </div>
         
         <p>raylib example <a id="source_link" href="" target="_blank">source code</a></p>
 

From bd2be88d1ab625ad44baacd40ee60840d3db9a3c Mon Sep 17 00:00:00 2001
From: themushroompirates
 <59015901+themushroompirates@users.noreply.github.com>
Date: Thu, 10 Jul 2025 12:35:48 +0200
Subject: [PATCH 2/2] Whitespace fix

---
 examples/core/loader.html    | 2 +-
 examples/models/loader.html  | 2 +-
 examples/shaders/loader.html | 2 +-
 examples/text/loader.html    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/core/loader.html b/examples/core/loader.html
index 765f1dc9..d7b9f1c9 100644
--- a/examples/core/loader.html
+++ b/examples/core/loader.html
@@ -112,7 +112,7 @@
                             )
                         );
                         
-						// Hardcoding glsl version for now
+                        // Hardcoding glsl version for now
                         const glslVersion = "330";
                         
                         $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
diff --git a/examples/models/loader.html b/examples/models/loader.html
index a97a4d41..3d6e0198 100644
--- a/examples/models/loader.html
+++ b/examples/models/loader.html
@@ -112,7 +112,7 @@
                             )
                         );
                         
-						// Hardcoding glsl version for now
+                        // Hardcoding glsl version for now
                         const glslVersion = "330";
                         
                         $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
diff --git a/examples/shaders/loader.html b/examples/shaders/loader.html
index 06c820cc..29e64a1f 100644
--- a/examples/shaders/loader.html
+++ b/examples/shaders/loader.html
@@ -112,7 +112,7 @@
                             )
                         );
                         
-						// Hardcoding glsl version for now
+                        // Hardcoding glsl version for now
                         const glslVersion = "330";
                         
                         $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {
diff --git a/examples/text/loader.html b/examples/text/loader.html
index c8b18c52..febb917c 100644
--- a/examples/text/loader.html
+++ b/examples/text/loader.html
@@ -112,7 +112,7 @@
                             )
                         );
                         
-						// Hardcoding glsl version for now
+                        // Hardcoding glsl version for now
                         const glslVersion = "330";
                         
                         $.get(shaderBaseUrl + shaderUriPattern.replace('%i', glslVersion), function(code) {