Introducing VSV = Versatile Separated Values. Simple, elegant format usable for lists, tables, object notation, subtitles, playlists.
/* find bar */
.active.visible.webpageview .find-in-page {position:absolute; bottom:-1px; z-index:1; margin: 0 auto; left:0; right:0; max-width: fit-content; border-radius: calc(var(--radius) * 1.3); padding-left: 6px;}
.find-in-page .fip-input-label {display:none;}
.find-in-page > label:not(:hover) .fip-checkbox-label {font-size:0; padding:.5px; }
.find-in-page .fip-checkbox-label {font-size: 80%; transition: font-size .15s !important;}
.find-in-page > .toolbar.toolbar-group button svg {transform:rotate(90deg);}
.find-in-page > .button-toolbar button {fill:crimson;}
.find-in-page > .button-toolbar button:hover {fill:beige; background:crimson; box-shadow: 0 0 0 1.5px beige inset;}
/* compact mode */
.active.visible.webpageview .find-in-page:not(:focus-within):not(:hover) {opacity: .5; visibility:hidden;}
.active.visible.webpageview .find-in-page :is(input[type="search"], .fip-results) {visibility:visible;}
/* nomatch alert */
.find-in-page.fip-nomatches:focus-within input[type="search"] {color:maroon; background:pink; transition: 0s .15s !important;}
.find-in-page.fip-nomatches:focus-within {animation: jump 1.3s steps(2) .15s 4 !important;}
@keyframes jump {8% {transform:translateY(0);} 1%, 5% {transform:translateY(5px);} 3% {transform:translateY(-4px);}}
VSV.pugFilters = {
'vsv':function (text, options) {
return "<script>VSV.mapTo.autoScript(`" + text.replace(/([`{[(<])/g, '\\$1') + "`);</script>";
}
};
res.render(myDoc, {filters: VSV.pugFilters});
include:vsv /public/atable.vsv
include:vsv /public/alist.vsv
include:vsv /public/mydoc.vml
:vsv
[[vsvlist]]
,almonds
,banana
,cream pie
[ftable
<
,columns,3
,headerRows,1
>
,Header 1,Header 2
[span
,complex Header3
]
,simple,row,here
,first column
,second column
[a
,complex third column is anchor element
]
]
[ftable
<
,columns,5
,headerRows,2
>
,header1,header2
,data1,data2
,data1,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
]
[ftable
<
,columns,5
>
((``Caption``))
((Header1)) ((Header2))
((Header3)) ((Header4))
,data1,data2
,data3,data4
,data5,,,
]
[div
[ftable
<
,columns,5
,headerRows,2
>
,data1,data2
,data3,data4
,data5,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
[ftable
<
,columns,5
,headerRows,2
>
,data1,data2
,data1,data2
,data1,,,
[p
,new paragraph
[span
,this is a span
]
]
,data1,
[a
<#href#https://ieants.cc>
,new link
]
[vsvtable
((``Demo``r))
[[Name]] {{Age}} ((Gender))
((each row of data can have different delimiter, no problem
,Hammie, 20.5, F
-Chow, Vivian-40-F
:Amuseum:25:M:
*Shena'Fu *18+5/12 *F
|Grndr-1245|21 months||
Fairy Nuff 14 K N/A
((``Guess these names :)``b))
]
]
]
[p
,outside parag
]
]
Page created in 0.152 seconds with 15 queries.