Media
.background-video
WebSlides is the easiest way to make HTML presentations. Inspire and engage.
BG Video with Overlay
<slide class="bg-blue aligncenter" video="https://webslides.tv/static/videos/working.mp4 poster='https://webslides.tv/static/images/working.jpg' .dark">
or .light
Youtube Background
<slide youtube=".dark id='_m67JbGjWnc' autoplay loop">
Plugins
echarts
{"tooltip":{"trigger":"item","formatter":"{a}
{b}: {c} ({d}%)"},"legend":{"orient":"vertical","x":"left","data":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其他"]},"series":[{"name":"访问来源","type":"pie","selectedMode":"single","radius":[0,"30%"],"label":{"normal":{"position":"inner"}},"labelLine":{"normal":{"show":false}},"data":[{"value":335,"name":"直达","selected":true},{"value":679,"name":"营销广告"},{"value":1548,"name":"搜索引擎"}]},{"name":"访问来源","type":"pie","radius":["40%","55%"],"label":{"normal":{"formatter":"{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ","backgroundColor":"#eee","borderColor":"#aaa","borderWidth":1,"borderRadius":4,"rich":{"a":{"color":"#999","lineHeight":22,"align":"center"},"hr":{"borderColor":"#aaa","width":"100%","borderWidth":0.5,"height":0},"b":{"fontSize":16,"lineHeight":33},"per":{"color":"#eee","backgroundColor":"#334455","padding":[2,4],"borderRadius":2}}}},"data":[{"value":335,"name":"直达"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"},{"value":135,"name":"视频广告"},{"value":1048,"name":"百度"},{"value":251,"name":"谷歌"},{"value":147,"name":"必应"},{"value":102,"name":"其他"}]}]}
{b}: {c} ({d}%)"},"legend":{"orient":"vertical","x":"left","data":["直达","营销广告","搜索引擎","邮件营销","联盟广告","视频广告","百度","谷歌","必应","其他"]},"series":[{"name":"访问来源","type":"pie","selectedMode":"single","radius":[0,"30%"],"label":{"normal":{"position":"inner"}},"labelLine":{"normal":{"show":false}},"data":[{"value":335,"name":"直达","selected":true},{"value":679,"name":"营销广告"},{"value":1548,"name":"搜索引擎"}]},{"name":"访问来源","type":"pie","radius":["40%","55%"],"label":{"normal":{"formatter":"{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ","backgroundColor":"#eee","borderColor":"#aaa","borderWidth":1,"borderRadius":4,"rich":{"a":{"color":"#999","lineHeight":22,"align":"center"},"hr":{"borderColor":"#aaa","width":"100%","borderWidth":0.5,"height":0},"b":{"fontSize":16,"lineHeight":33},"per":{"color":"#eee","backgroundColor":"#334455","padding":[2,4],"borderRadius":2}}}},"data":[{"value":335,"name":"直达"},{"value":310,"name":"邮件营销"},{"value":234,"name":"联盟广告"},{"value":135,"name":"视频广告"},{"value":1048,"name":"百度"},{"value":251,"name":"谷歌"},{"value":147,"name":"必应"},{"value":102,"name":"其他"}]}]}
Plugins:: mermaid
Basic sequence diagram
sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you?
Message to self in loop
sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Gantt
gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h
Flowchart support for fontawesome
graph TD B["fa:fa-twitter for peace"] B-->C[fa:fa-ban forbidden] B-->D(fa:fa-spinner); B-->E(A fa:fa-camera-retro perhaps?);
Plugins:: KaTex
KaTex
equation | description |
---|---|
∇⋅B⃗=0 | divergence of B⃗ is zero |
∇×E⃗+c1∂t∂B⃗=0⃗ | curl of E⃗ is proportional to the rate of change of B⃗ |
∇×B⃗−c1∂t∂E⃗=c4πj⃗∇⋅E⃗=4πρ | wha? |
View More Demos?
* * *