1313< span class ="cp "> {%</ span > < span class ="w "> </ span > < span class ="nt "> endtab</ span > < span class ="w "> </ span > < span class ="cp "> %}</ span >
1414
1515< span class ="cp "> {%</ span > < span class ="w "> </ span > < span class ="nt "> endtabs</ span > < span class ="w "> </ span > < span class ="cp "> %}</ span >
16- </ code > </ pre > </ div > </ div > < p > With this you can generate visualizations like:</ p > < ul id ="log " class ="tab " data-tab ="793c2679-6aa5-4322-baef-dfaf57203110 " 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 ="793c2679-6aa5-4322-baef-dfaf57203110 " 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 >
16+ </ code > </ pre > </ div > </ div > < p > With this you can generate visualizations like:</ p > < ul id ="log " class ="tab " data-tab ="63cdecff-de18-4f83-be75-ac9b2de3b943 " 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 ="63cdecff-de18-4f83-be75-ac9b2de3b943 " 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 >
1717</ 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 >
1818</ 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 >
19- </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="another-example "> Another example</ h2 > < ul id ="data-struct " class ="tab " data-tab ="7abfba8d-1ffe-4dbb-9996-cea1659ebd70 " 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 ="7abfba8d-1ffe-4dbb-9996-cea1659ebd70 " 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 >
19+ </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="another-example "> Another example</ h2 > < ul id ="data-struct " class ="tab " data-tab ="9697427f-bdab-421a-bd1e-c3cbd1de43e0 " 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 ="9697427f-bdab-421a-bd1e-c3cbd1de43e0 " 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 >
2020 < span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> whatsup"</ span >
2121 < span class ="pi "> -</ span > < span class ="s2 "> "</ span > < span class ="s "> hi"</ span >
2222</ 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 ">
2323 </ 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 ">
2424</ span > < span class ="p "> }</ span > < span class ="w ">
25- </ 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 ="03c4ce44-e6eb-4fad-a807-2eeb3c1578ae " 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 ="03c4ce44-e6eb-4fad-a807-2eeb3c1578ae " 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 2026 WANG Bing. Last Updated: January 02, 2026. </ 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 " 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 type ="text/javascript "> window . MathJax = { tex :{ tags :"ams" } } ; </ 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 defer src ="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6 " crossorigin ="anonymous "> </ script > < script type ="text/javascript "> function progressBarSetup ( ) { "max" in document . createElement ( "progress" ) ?( initializeProgressElement ( ) , $ ( document ) . on ( "scroll" , function ( ) { progressBar . attr ( { value :getCurrentScrollPosition ( ) } ) } ) , $ ( window ) . on ( "resize" , initializeProgressElement ) ) :( resizeProgressBar ( ) , $ ( document ) . on ( "scroll" , resizeProgressBar ) , $ ( window ) . on ( "resize" , resizeProgressBar ) ) } function getCurrentScrollPosition ( ) { return $ ( window ) . scrollTop ( ) } function initializeProgressElement ( ) { let e = $ ( "#navbar" ) . outerHeight ( ! 0 ) ; $ ( "body" ) . css ( { "padding-top" :e } ) , $ ( "progress-container" ) . css ( { "padding-top" :e } ) , progressBar . css ( { top :e } ) , progressBar . attr ( { max :getDistanceToScroll ( ) , value :getCurrentScrollPosition ( ) } ) } function getDistanceToScroll ( ) { return $ ( document ) . height ( ) - $ ( window ) . height ( ) } function resizeProgressBar ( ) { progressBar . css ( { width :getWidthPercentage ( ) + "%" } ) } function getWidthPercentage ( ) { return getCurrentScrollPosition ( ) / getDistanceToScroll ( ) * 100 } const progressBar = $ ( "#progress" ) ; window . onload = function ( ) { setTimeout ( progressBarSetup , 50 ) } ; </ script > < script > var wechatModal = document . getElementById ( "WeChatMod" ) , wechatBtn = document . getElementById ( "WeChatBtn" ) ; wechatBtn . onclick = function ( ) { wechatModal . style . display = "block" } , window . onclick = function ( t ) { t . target == wechatModal && ( wechatModal . style . display = "none" ) } ; </ script > < script src ="/assets/js/tabs.min.js?b8748955e1076bbe0dabcf28f2549fdc "> </ script > < script src ="/assets/js/vanilla-back-to-top.min.js?f40d453793ff4f64e238e420181a1d17 "> </ script > < script > addBackToTop ( ) ; </ script > </ body > </ html >
25+ </ 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 ="dd98e21f-9463-4f83-a158-2ea403b0e84f " 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 ="dd98e21f-9463-4f83-a158-2ea403b0e84f " 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 2026 WANG Bing. Last Updated: January 02, 2026. </ 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 " 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 type ="text/javascript "> window . MathJax = { tex :{ tags :"ams" } } ; </ 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 defer src ="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6 " crossorigin ="anonymous "> </ script > < script type ="text/javascript "> function progressBarSetup ( ) { "max" in document . createElement ( "progress" ) ?( initializeProgressElement ( ) , $ ( document ) . on ( "scroll" , function ( ) { progressBar . attr ( { value :getCurrentScrollPosition ( ) } ) } ) , $ ( window ) . on ( "resize" , initializeProgressElement ) ) :( resizeProgressBar ( ) , $ ( document ) . on ( "scroll" , resizeProgressBar ) , $ ( window ) . on ( "resize" , resizeProgressBar ) ) } function getCurrentScrollPosition ( ) { return $ ( window ) . scrollTop ( ) } function initializeProgressElement ( ) { let e = $ ( "#navbar" ) . outerHeight ( ! 0 ) ; $ ( "body" ) . css ( { "padding-top" :e } ) , $ ( "progress-container" ) . css ( { "padding-top" :e } ) , progressBar . css ( { top :e } ) , progressBar . attr ( { max :getDistanceToScroll ( ) , value :getCurrentScrollPosition ( ) } ) } function getDistanceToScroll ( ) { return $ ( document ) . height ( ) - $ ( window ) . height ( ) } function resizeProgressBar ( ) { progressBar . css ( { width :getWidthPercentage ( ) + "%" } ) } function getWidthPercentage ( ) { return getCurrentScrollPosition ( ) / getDistanceToScroll ( ) * 100 } const progressBar = $ ( "#progress" ) ; window . onload = function ( ) { setTimeout ( progressBarSetup , 50 ) } ; </ script > < script > var wechatModal = document . getElementById ( "WeChatMod" ) , wechatBtn = document . getElementById ( "WeChatBtn" ) ; wechatBtn . onclick = function ( ) { wechatModal . style . display = "block" } , window . onclick = function ( t ) { t . target == wechatModal && ( wechatModal . style . display = "none" ) } ; </ script > < script src ="/assets/js/tabs.min.js?b8748955e1076bbe0dabcf28f2549fdc "> </ script > < script src ="/assets/js/vanilla-back-to-top.min.js?f40d453793ff4f64e238e420181a1d17 "> </ script > < script > addBackToTop ( ) ; </ script > </ body > </ html >
0 commit comments