15
15
< span class ="cp "> {%</ span > < span class ="w "> </ span > < span class ="nt "> endtab</ span > < span class ="w "> </ span > < span class ="cp "> %}</ span >
16
16
17
17
< span class ="cp "> {%</ span > < span class ="w "> </ span > < span class ="nt "> endtabs</ span > < span class ="w "> </ span > < span class ="cp "> %}</ span >
18
- </ code > </ pre > </ div > </ div > < p > With this you can generate visualizations like:</ p > < ul id ="log " class ="tab " data-tab ="10254485-f979-4488-ab79-9dba1cde7fe6 " data-name ="log "> < li class ="active " id ="log-php "> < a href ="# "> php </ a > </ li > < li id ="log-js "> < a href ="# "> js </ a > </ li > < li id ="log-ruby "> < a href ="# "> ruby </ a > </ li > </ ul > < ul class ="tab-content " id ="10254485-f979-4488-ab79-9dba1cde7fe6 " data-name ="log "> < li class ="active "> < div class ="language-php highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="nb "> var_dump</ span > < span class ="p "> (</ span > < span class ="s1 "> 'hello'</ span > < span class ="p "> );</ span >
18
+ </ code > </ pre > </ div > </ div > < p > With this you can generate visualizations like:</ p > < ul id ="log " class ="tab " data-tab ="094732fc-0e61-43f7-af46-b7595f633573 " data-name ="log "> < li class ="active " id ="log-php "> < a href ="# "> php </ a > </ li > < li id ="log-js "> < a href ="# "> js </ a > </ li > < li id ="log-ruby "> < a href ="# "> ruby </ a > </ li > </ ul > < ul class ="tab-content " id ="094732fc-0e61-43f7-af46-b7595f633573 " data-name ="log "> < li class ="active "> < div class ="language-php highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="nb "> var_dump</ span > < span class ="p "> (</ span > < span class ="s1 "> 'hello'</ span > < span class ="p "> );</ span >
19
19
</ code > </ pre > </ div > </ div > </ li > < li > < div class ="language-javascript highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="nx "> console</ span > < span class ="p "> .</ span > < span class ="nf "> log</ span > < span class ="p "> (</ span > < span class ="dl "> "</ span > < span class ="s2 "> hello</ span > < span class ="dl "> "</ span > < span class ="p "> );</ span >
20
20
</ code > </ pre > </ div > </ div > </ li > < li > < div class ="language-javascript highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="nx "> pputs</ span > < span class ="dl "> '</ span > < span class ="s1 "> hello</ span > < span class ="dl "> '</ span >
21
- </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="another-example "> Another example</ h2 > < ul id ="data-struct " class ="tab " data-tab ="6343b94c-f0d3-481b-8a53-f55d8354bcf1 " data-name ="data-struct "> < li class ="active " id ="data-struct-yaml "> < a href ="# "> yaml </ a > </ li > < li id ="data-struct-json "> < a href ="# "> json </ a > </ li > </ ul > < ul class ="tab-content " id ="6343b94c-f0d3-481b-8a53-f55d8354bcf1 " data-name ="data-struct "> < li class ="active "> < div class ="language-yaml highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="na "> hello</ span > < span class ="pi "> :</ span >
21
+ </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="another-example "> Another example</ h2 > < ul id ="data-struct " class ="tab " data-tab ="8ef1285c-a874-452f-b77a-af67a80c797c " data-name ="data-struct "> < li class ="active " id ="data-struct-yaml "> < a href ="# "> yaml </ a > </ li > < li id ="data-struct-json "> < a href ="# "> json </ a > </ li > </ ul > < ul class ="tab-content " id ="8ef1285c-a874-452f-b77a-af67a80c797c " data-name ="data-struct "> < li class ="active "> < div class ="language-yaml highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="na "> hello</ span > < span class ="pi "> :</ span >
22
22
< span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> whatsup"</ span >
23
23
< span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> hi"</ span >
24
24
</ code > </ pre > </ div > </ div > </ li > < li > < div class ="language-json highlighter-rouge "> < div class ="highlight "> < pre class ="highlight "> < code > < span class ="p "> {</ span > < span class ="w ">
25
25
</ span > < span class ="nl "> "hello"</ span > < span class ="p "> :</ span > < span class ="w "> </ span > < span class ="p "> [</ span > < span class ="s2 "> "whatsup"</ span > < span class ="p "> ,</ span > < span class ="w "> </ span > < span class ="s2 "> "hi"</ span > < span class ="p "> ]</ span > < span class ="w ">
26
26
</ span > < span class ="p "> }</ span > < span class ="w ">
27
- </ span > </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="tabs-for-something-else "> Tabs for something else</ h2 > < ul id ="something-else " class ="tab " data-tab ="c4b0f080-65c5-42b5-aa9c-9e745de41f23 " data-name ="something-else "> < li class ="active " id ="something-else-text "> < a href ="# "> text </ a > </ li > < li id ="something-else-quote "> < a href ="# "> quote </ a > </ li > < li id ="something-else-list "> < a href ="# "> list </ a > </ li > </ ul > < ul class ="tab-content " id ="c4b0f080-65c5-42b5-aa9c-9e745de41f23 " data-name ="something-else "> < li class ="active "> < p > Regular text</ p > </ li > < li > < blockquote > < p > A quote</ p > </ blockquote > </ li > < li > < p > Hipster list</ p > < ul > < li > brunch</ li > < li > fixie</ li > < li > raybans</ li > < li > messenger bag</ li > </ ul > </ li > </ ul > </ div > </ article > < br > < hr > < br > < ul class ="list-disc pl-8 "> </ ul > < h2 class ="text-3xl font-semibold mb-4 mt-12 "> Enjoy Reading This Article?</ h2 > < p class ="mb-2 "> Here are some more articles you might like to read next:</ p > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="https://blog.google/technology/ai/google-gemini-update-flash-ai-assistant-io-2024/ " target ="_blank " rel ="external nofollow noopener "> Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra</ a > < svg width ="1rem " height ="1rem " viewbox ="0 0 30 30 " xmlns ="http://www.w3.org/2000/svg "> < path d ="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9 " class ="icon_svg-stroke " stroke ="#999 " stroke-width ="1.5 " fill ="none " fill-rule ="evenodd " stroke-linecap ="round " stroke-linejoin ="round "> </ path > </ svg > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="https://medium.com/@al-folio/displaying-external-posts-on-your-al-folio-blog-b60a1d241a0a?source=rss-17feae71c3c4------2 " target ="_blank " rel ="external nofollow noopener "> Displaying External Posts on Your al-folio Blog</ a > < svg width ="1rem " height ="1rem " viewbox ="0 0 30 30 " xmlns ="http://www.w3.org/2000/svg "> < path d ="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9 " class ="icon_svg-stroke " stroke ="#999 " stroke-width ="1.5 " fill ="none " fill-rule ="evenodd " stroke-linecap ="round " stroke-linejoin ="round "> </ path > </ svg > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/photo-gallery/ "> a post with image galleries</ a > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/typograms/ "> a post with typograms</ a > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/post-citation/ "> a post that can be cited</ a > </ li > </ div > </ div > < footer class ="fixed-bottom " role ="contentinfo "> < div class ="container mt-0 "> © Copyright 2025 Sumit Asthana. Powered by < a href ="https://jekyllrb.com/ " target ="_blank " rel ="external nofollow noopener "> Jekyll</ a > with < a href ="https://github.com/alshedivat/al-folio " rel ="external nofollow noopener " target ="_blank "> al-folio</ a > theme. Hosted by < a href ="https://pages.github.com/ " target ="_blank " rel ="external nofollow noopener "> GitHub Pages</ a > . Photos from < a href ="https://unsplash.com " target ="_blank " rel ="external nofollow noopener "> Unsplash</ a > . </ div > </ footer > < script src ="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js " integrity ="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4= " crossorigin ="anonymous "> </ script > < script src ="/assets/js/bootstrap.bundle.min.js "> </ script > < script src ="https://cdn.jsdelivr.net/npm/mdbootstrap@4.20.0/js/mdb.min.js " integrity ="sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA= " crossorigin ="anonymous "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js " integrity ="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI= " crossorigin ="anonymous "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js " integrity ="sha256-htrLFfZJ6v5udOG+3kNLINIKh2gvoKqwEhHYfTTMICc= " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/masonry.js?a0db7e5d5c70cc3252b3138b0c91dcaf " type ="text/javascript "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js " integrity ="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc= " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/zoom.js?85ddb88934d28b74e78031fd54cf8308 "> </ script > < script src ="/assets/js/no_defer.js?2781658a0a2b13ed609542042a859126 "> </ script > < script defer src ="/assets/js/common.js?e0514a05c5c95ac1a93a8dfd5249b92e "> </ script > < script defer src ="/assets/js/copy_code.js?12775fdf7f95e901d7119054556e495f " type ="text/javascript "> </ script > < script defer src ="/assets/js/jupyter_new_tab.js?d9f17b6adc2311cbabd747f4538bb15f "> </ script > < script async src ="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js "> </ script > < script async src ="https://badge.dimensions.ai/badge.js "> </ script > < script defer type ="text/javascript " id ="MathJax-script " src ="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js " integrity ="sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI= " crossorigin ="anonymous "> </ script > < script src ="/assets/js/mathjax-setup.js?a5bb4e6a542c546dd929b24b8b236dfd "> </ script > < script defer src ="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6 " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/progress-bar.js?2f30e0e6801ea8f5036fa66e1ab0a71a " type ="text/javascript "> </ script > < script src ="/assets/js/tabs.min.js?b8748955e1076bbe0dabcf28f2549fdc "> </ script > < script src ="/assets/js/vanilla-back-to-top.min.js?f40d453793ff4f64e238e420181a1d17 "> </ script > < script >
27
+ </ span > </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="tabs-for-something-else "> Tabs for something else</ h2 > < ul id ="something-else " class ="tab " data-tab ="eeb08430-3277-411c-9bf0-3620c77eac1e " data-name ="something-else "> < li class ="active " id ="something-else-text "> < a href ="# "> text </ a > </ li > < li id ="something-else-quote "> < a href ="# "> quote </ a > </ li > < li id ="something-else-list "> < a href ="# "> list </ a > </ li > </ ul > < ul class ="tab-content " id ="eeb08430-3277-411c-9bf0-3620c77eac1e " data-name ="something-else "> < li class ="active "> < p > Regular text</ p > </ li > < li > < blockquote > < p > A quote</ p > </ blockquote > </ li > < li > < p > Hipster list</ p > < ul > < li > brunch</ li > < li > fixie</ li > < li > raybans</ li > < li > messenger bag</ li > </ ul > </ li > </ ul > </ div > </ article > < br > < hr > < br > < ul class ="list-disc pl-8 "> </ ul > < h2 class ="text-3xl font-semibold mb-4 mt-12 "> Enjoy Reading This Article?</ h2 > < p class ="mb-2 "> Here are some more articles you might like to read next:</ p > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="https://blog.google/technology/ai/google-gemini-update-flash-ai-assistant-io-2024/ " target ="_blank " rel ="external nofollow noopener "> Google Gemini updates: Flash 1.5, Gemma 2 and Project Astra</ a > < svg width ="1rem " height ="1rem " viewbox ="0 0 30 30 " xmlns ="http://www.w3.org/2000/svg "> < path d ="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9 " class ="icon_svg-stroke " stroke ="#999 " stroke-width ="1.5 " fill ="none " fill-rule ="evenodd " stroke-linecap ="round " stroke-linejoin ="round "> </ path > </ svg > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="https://medium.com/@al-folio/displaying-external-posts-on-your-al-folio-blog-b60a1d241a0a?source=rss-17feae71c3c4------2 " target ="_blank " rel ="external nofollow noopener "> Displaying External Posts on Your al-folio Blog</ a > < svg width ="1rem " height ="1rem " viewbox ="0 0 30 30 " xmlns ="http://www.w3.org/2000/svg "> < path d ="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9 " class ="icon_svg-stroke " stroke ="#999 " stroke-width ="1.5 " fill ="none " fill-rule ="evenodd " stroke-linecap ="round " stroke-linejoin ="round "> </ path > </ svg > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/photo-gallery/ "> a post with image galleries</ a > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/typograms/ "> a post with typograms</ a > </ li > < li class ="my-2 "> < a class ="text-pink-700 underline font-semibold hover:text-pink-800 " href ="/blog/2024/post-citation/ "> a post that can be cited</ a > </ li > </ div > </ div > < footer class ="fixed-bottom " role ="contentinfo "> < div class ="container mt-0 "> © Copyright 2025 Sumit Asthana. Powered by < a href ="https://jekyllrb.com/ " target ="_blank " rel ="external nofollow noopener "> Jekyll</ a > with < a href ="https://github.com/alshedivat/al-folio " rel ="external nofollow noopener " target ="_blank "> al-folio</ a > theme. Hosted by < a href ="https://pages.github.com/ " target ="_blank " rel ="external nofollow noopener "> GitHub Pages</ a > . Photos from < a href ="https://unsplash.com " target ="_blank " rel ="external nofollow noopener "> Unsplash</ a > . </ div > </ footer > < script src ="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js " integrity ="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4= " crossorigin ="anonymous "> </ script > < script src ="/assets/js/bootstrap.bundle.min.js "> </ script > < script src ="https://cdn.jsdelivr.net/npm/mdbootstrap@4.20.0/js/mdb.min.js " integrity ="sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA= " crossorigin ="anonymous "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js " integrity ="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI= " crossorigin ="anonymous "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/imagesloaded@5.0.0/imagesloaded.pkgd.min.js " integrity ="sha256-htrLFfZJ6v5udOG+3kNLINIKh2gvoKqwEhHYfTTMICc= " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/masonry.js?a0db7e5d5c70cc3252b3138b0c91dcaf " type ="text/javascript "> </ script > < script defer src ="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js " integrity ="sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc= " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/zoom.js?85ddb88934d28b74e78031fd54cf8308 "> </ script > < script src ="/assets/js/no_defer.js?2781658a0a2b13ed609542042a859126 "> </ script > < script defer src ="/assets/js/common.js?e0514a05c5c95ac1a93a8dfd5249b92e "> </ script > < script defer src ="/assets/js/copy_code.js?12775fdf7f95e901d7119054556e495f " type ="text/javascript "> </ script > < script defer src ="/assets/js/jupyter_new_tab.js?d9f17b6adc2311cbabd747f4538bb15f "> </ script > < script async src ="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js "> </ script > < script async src ="https://badge.dimensions.ai/badge.js "> </ script > < script defer type ="text/javascript " id ="MathJax-script " src ="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js " integrity ="sha256-MASABpB4tYktI2Oitl4t+78w/lyA+D7b/s9GEP0JOGI= " crossorigin ="anonymous "> </ script > < script src ="/assets/js/mathjax-setup.js?a5bb4e6a542c546dd929b24b8b236dfd "> </ script > < script defer src ="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6 " crossorigin ="anonymous "> </ script > < script defer src ="/assets/js/progress-bar.js?2f30e0e6801ea8f5036fa66e1ab0a71a " type ="text/javascript "> </ script > < script src ="/assets/js/tabs.min.js?b8748955e1076bbe0dabcf28f2549fdc "> </ script > < script src ="/assets/js/vanilla-back-to-top.min.js?f40d453793ff4f64e238e420181a1d17 "> </ script > < script >
28
28
addBackToTop ( ) ;
29
29
</ script > < script type ="module " src ="/assets/js/search/ninja-keys.min.js?a3446f084dcaecc5f75aa1757d087dcf "> </ script > < ninja-keys hidebreadcrumbs noautoloadmdicons placeholder ="Type to start searching "> </ ninja-keys > < script src ="/assets/js/search-setup.js?6c304f7b1992d4b60f7a07956e52f04a "> </ script > < script src ="/assets/js/search-data.js "> </ script > < script src ="/assets/js/shortcut-key.js?6f508d74becd347268a7f822bca7309d "> </ script > </ body > </ html >
0 commit comments