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 ="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 >
16+ </ code > </ pre > </ div > </ div > < p > With this you can generate visualizations like:</ p > < ul id ="log " class ="tab " data-tab ="990797b2-42e9-4d2f-bbe4-0e19dcf2adf7 " 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 ="990797b2-42e9-4d2f-bbe4-0e19dcf2adf7 " 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 ="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 >
19+ </ code > </ pre > </ div > </ div > </ li > </ ul > < h2 id ="another-example "> Another example</ h2 > < ul id ="data-struct " class ="tab " data-tab ="7b4fed6c-4606-4067-b118-751b87cef0a8 " 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 ="7b4fed6c-4606-4067-b118-751b87cef0a8 " 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 ="
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/[email protected] /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/[email protected] /js/mdb.min.js "
integrity ="
sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA= "
crossorigin ="
anonymous "
> </ script > < script defer src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/masonry.pkgd.min.js "
integrity ="
sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI= "
crossorigin ="
anonymous "
> </ script > < script defer src ="
https://cdn.jsdelivr.net/npm/[email protected] /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/[email protected] /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/[email protected] /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 ="
24248c78-bfea-494a-a8ed-f52c0c377606 "
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 ="
24248c78-bfea-494a-a8ed-f52c0c377606 "
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/[email protected] /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/[email protected] /js/mdb.min.js "
integrity ="
sha256-NdbiivsvWt7VYCt6hYNT3h/th9vSTL4EDWeGs5SN3DA= "
crossorigin ="
anonymous "
> </ script > < script defer src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/masonry.pkgd.min.js "
integrity ="
sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI= "
crossorigin ="
anonymous "
> </ script > < script defer src ="
https://cdn.jsdelivr.net/npm/[email protected] /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/[email protected] /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/[email protected] /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