1515< span class ="cp "> {%</ span > < span class ="w "> </ span > < span class ="nt "> endtab</ span > < span class ="w "> </ span > < span class ="cp "> %}</ span >
1616
1717< 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 ="0a38d2de-be30-47f5-9193-d38aa0ab59c9 " 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 ="0a38d2de-be30-47f5-9193-d38aa0ab59c9 " 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 ="16f65b98-d655-4af3-b33f-4651a7f081cb " 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 ="16f65b98-d655-4af3-b33f-4651a7f081cb " 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 >
1919</ 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 >
2020</ 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 ="7f252433-b25d-4d0a-8cc7-f2431417cde2 " 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 ="7f252433-b25d-4d0a-8cc7-f2431417cde2 " 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 ="135f664e-b2bc-4bc5-9a82-aeef1970166d " 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 ="135f664e-b2bc-4bc5-9a82-aeef1970166d " 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 >
2222 < span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> whatsup"</ span >
2323 < span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> hi"</ span >
2424</ 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 ">
2525 </ 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 ">
2626</ 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 ="a4ed50a8-ec91-4277-8e8d-44aed84dceda " 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 ="a4ed50a8-ec91-4277-8e8d-44aed84dceda " 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 > </ div > </ div > < footer class ="fixed-bottom " role ="contentinfo "> < div class ="container mt-0 "> © Copyright 2025 IICCSSS . 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. Last updated: May 23, 2025. </ 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 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 > </ body > </ html >
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 ="cddbd2e1-810d-4b0d-959c-1df95e671fb8 " 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 ="cddbd2e1-810d-4b0d-959c-1df95e671fb8 " 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 > </ div > </ div > < footer class ="fixed-bottom " role ="contentinfo "> < div class ="container mt-0 "> © Copyright 2025 IICCSSS . 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. Last updated: May 23, 2025. </ 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 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 > </ body > </ html >
0 commit comments