@nodefony/monitoring-bundle/vuepress/public/documentation/assets/slides.html-ZvhKFqjd.js

import{_ as l}from"./logo-CWtQdhZE.js";import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{r as o,o as d,c as r,a,b as e,d as n,e as c,f as t}from"./app-CAAMsCo-.js";const h={},u=e("p",null,"@slidestart",-1),_=e("h2",{id:"slide-demo",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#slide-demo","aria-hidden":"true"},"#"),n(" Slide Demo")],-1),m=e("p",null,"A simple slide demo and useful hints.",-1),p=e("blockquote",null,[e("p",null,"By Mr.Hope. Please scroll mouse wheel down to the next slide")],-1),f=e("hr",null,null,-1),g=e("h2",{id:"marking-slides",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#marking-slides","aria-hidden":"true"},"#"),n(" Marking Slides")],-1),b=e("p",null,[e("a",{href:"#/1/1"},"👇")],-1),k=e("p",null,"--",-1),x=e("h2",{id:"marking-slides-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#marking-slides-1","aria-hidden":"true"},"#"),n(" Marking Slides")],-1),v=e("p",null,[n("Use "),e("code",null,"---"),n(" to mark horizontal slides")],-1),w=e("p",null,[n("Use "),e("code",null,"--"),n(" to separate vertical slides in a horizontal slide.")],-1),y=e("p",null,[n("Use "),e("code",null,"<!-- .slide: ... -->"),n(" to add attributes to slide")],-1),F=e("p",null,[n("Use "),e("code",null,"<!-- .element: ... -->"),n(" to add attributes to the previous html element")],-1),M=e("hr",null,null,-1),T=e("h2",{id:"markdown",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown","aria-hidden":"true"},"#"),n(" Markdown")],-1),A=e("p",null,"You can use all kinds of markup in slides.",-1),L=e("p",null,"--",-1),z=e("h2",{id:"markdown-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-1","aria-hidden":"true"},"#"),n(" Markdown")],-1),I=e("p",null,"You can use all kinds of markup in slides.",-1),Y=e("h3",{id:"this-is-a-h3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#this-is-a-h3","aria-hidden":"true"},"#"),n(" This is a H3")],-1),C=e("p",null,"Headings will transform to UPPERCASE by default.",-1),E=e("strong",null,"bold",-1),j=e("em",null,"italic",-1),B=e("s",null,"strike-through",-1),N={href:"https://mister-hope.com",target:"_blank",rel:"noopener noreferrer"},P=e("p",null,"--",-1),S=t('<h2 id="markdown-2" tabindex="-1"><a class="header-anchor" href="#markdown-2" aria-hidden="true">#</a> Markdown</h2><p>You can use all kinds of markup in slides.</p><p>List is <code>inline-block</code> by default.</p><ul><li>Item</li><li>Item</li><li>Item</li></ul><ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol><p>--</p>',6),H=t(`<h2 id="markdown-3" tabindex="-1"><a class="header-anchor" href="#markdown-3" aria-hidden="true">#</a> Markdown</h2><p>You can use all kinds of markup in slides.</p><p>Code block will get auto highlight if you enable <code>highlight</code> plugin.</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>--</p>`,5),U=e("h2",{id:"markdown-4",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-4","aria-hidden":"true"},"#"),n(" Markdown")],-1),V=e("p",null,"You can use all kinds of markup in slides.",-1),D=e("p",null,[n("You can also write math equation using tex syntax if you enable "),e("code",null,"math"),n(" plugin.")],-1),O=e("p",null,"$$ J(\\theta_0,\\theta_1) = \\sum_{i=0} $$",-1),$=e("p",null,"--",-1),q=e("h2",{id:"markdown-5",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#markdown-5","aria-hidden":"true"},"#"),n(" Markdown")],-1),J=e("p",null,"You can use all kinds of markup in slides.",-1),R=e("p",null,[n("⚠"),e("strong",null,"Note"),n(": Table, hr and other nonstandard Markdown syntax is not supported.")],-1),Z=e("hr",null,null,-1),G=e("h2",{id:"layout",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#layout","aria-hidden":"true"},"#"),n(" Layout")],-1),K=e("p",null,"--",-1),Q=e("h2",{id:"layout-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#layout-1","aria-hidden":"true"},"#"),n(" Layout")],-1),W=e("p",null,[n("👆 The "),e("code",null,"r-fit-text"),n(" class makes text as large as possible without overflowing the slide.")],-1),X=e("p",null,"--",-1),ee=e("h2",{id:"layout-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#layout-2","aria-hidden":"true"},"#"),n(" Layout")],-1),ae=e("figure",null,[e("img",{src:l,alt:"Logo",tabindex:"0",loading:"lazy"}),e("figcaption",null,"Logo")],-1),ne=e("p",null,[n("👆 The "),e("code",null,"r-stretch"),n(" class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.")],-1),te=e("p",null,"--",-1),se=e("h2",{id:"layout-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#layout-3","aria-hidden":"true"},"#"),n(" Layout")],-1),le=e("h3",{id:"background",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#background","aria-hidden":"true"},"#"),n(" Background")],-1),ie=e("p",null,[n("Custom background by adding "),e("code",null,"data-background"),n(" attribute to slide.")],-1),oe=e("hr",null,null,-1),de=e("h2",{id:"fragment",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#fragment","aria-hidden":"true"},"#"),n(" Fragment")],-1),re=e("p",null,"--",-1),ce=e("h2",{id:"fragment-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#fragment-1","aria-hidden":"true"},"#"),n(" Fragment")],-1),he=e("p",null,"Fragments are used to highlight or incrementally reveal individual elements on a slide.",-1),ue=e("p",null,[n("Add "),e("code",null,"fragment"),n(" and animation class to element.")],-1),_e=e("p",null,"--",-1),me=e("h2",{id:"fragment-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#fragment-2","aria-hidden":"true"},"#"),n(" Fragment")],-1),pe=e("h3",{id:"animation-class",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#animation-class","aria-hidden":"true"},"#"),n(" Animation class")],-1),fe=e("ul",null,[e("li",null,[e("code",null,"fade-in")])],-1),ge=e("ul",null,[e("li",null,[e("code",null,"fade-out")])],-1),be=e("ul",null,[e("li",null,[e("code",null,"fade-up")])],-1),ke=e("ul",null,[e("li",null,[e("code",null,"fade-down")])],-1),xe=e("ul",null,[e("li",null,[e("code",null,"fade-left")])],-1),ve=e("ul",null,[e("li",null,[e("code",null,"fade-right")])],-1),we=e("ul",null,[e("li",null,[e("code",null,"fade-in-then-out")])],-1),ye=e("ul",null,[e("li",null,[e("code",null,"fade-in-then-semi-out")])],-1),Fe=e("p",null,"--",-1),Me=e("h2",{id:"fragment-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#fragment-3","aria-hidden":"true"},"#"),n(" Fragment")],-1),Te=e("h3",{id:"animation-class-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#animation-class-1","aria-hidden":"true"},"#"),n(" Animation class")],-1),Ae=e("ul",null,[e("li",null,[e("code",null,"grow")])],-1),Le=e("ul",null,[e("li",null,[e("code",null,"shrink")])],-1),ze=e("ul",null,[e("li",null,[e("code",null,"strike")])],-1),Ie=e("ul",null,[e("li",null,[e("code",null,"highlight-red")])],-1),Ye=e("ul",null,[e("li",null,[e("code",null,"highlight-green")])],-1),Ce=e("ul",null,[e("li",null,[e("code",null,"highlight-blue")])],-1),Ee=e("ul",null,[e("li",null,[e("code",null,"highlight-current-red")])],-1),je=e("ul",null,[e("li",null,[e("code",null,"highlight-current-green")])],-1),Be=e("ul",null,[e("li",null,[e("code",null,"highlight-current-blue")])],-1),Ne=e("p",null,"--",-1),Pe=t('<h2 id="fragment-4" tabindex="-1"><a class="header-anchor" href="#fragment-4" aria-hidden="true">#</a> Fragment</h2><h3 id="multiple-fragments" tabindex="-1"><a class="header-anchor" href="#multiple-fragments" aria-hidden="true">#</a> Multiple fragments</h3><p>Multiple fragments can be applied to the same element sequentially by wrapping it</p><span class="fragment fade-in"><span class="fragment highlight-red"><span class="fragment fade-out"> Fade in &gt; Turn red &gt; Fade out </span></span></span><p>--</p>',5),Se=e("h2",{id:"fragment-5",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#fragment-5","aria-hidden":"true"},"#"),n(" Fragment")],-1),He=e("h3",{id:"order",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#order","aria-hidden":"true"},"#"),n(" Order")],-1),Ue=e("p",null,[n("Order can be changed using the "),e("code",null,"data-fragment-index"),n(" attribute.")],-1),Ve=e("p",null,"Multiple elements can appear at the same index.",-1),De=e("ul",null,[e("li",null,"Appears last")],-1),Oe=e("ul",null,[e("li",null,"Appears second")],-1),$e=e("ul",null,[e("li",null,"Appears first")],-1),qe=e("ul",null,[e("li",null,"Appears second")],-1),Je=e("hr",null,null,-1),Re=e("h2",{id:"transition",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#transition","aria-hidden":"true"},"#"),n(" Transition")],-1),Ze=e("p",null,"--",-1),Ge=e("h2",{id:"transition-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#transition-1","aria-hidden":"true"},"#"),n(" Transition")],-1),Ke=e("p",null,[n("Transition can be changed by setting the "),e("code",null,"transition"),n(" config option globally or "),e("code",null,"data-transition"),n(" attribute on slide.")],-1),Qe=e("p",null,"Possible values:",-1),We=e("ul",null,[e("li",null,"none"),e("li",null,"fade"),e("li",null,"slide")],-1),Xe=e("ul",null,[e("li",null,"convex"),e("li",null,"concave"),e("li",null,"zoom")],-1),ea=e("p",null,"--",-1),aa=e("h2",{id:"transition-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#transition-2","aria-hidden":"true"},"#"),n(" Transition")],-1),na=e("h3",{id:"auto-animate",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#auto-animate","aria-hidden":"true"},"#"),n(" Auto animate")],-1),ta=e("p",null,[e("code",null,"data-auto-animate"),n(" can be added on nearby slides to make an animation on unchanged elements.")],-1),sa=e("hr",null,null,-1),la=e("h2",{id:"functions",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#functions","aria-hidden":"true"},"#"),n(" Functions")],-1),ia=e("p",null,"--",-1),oa=e("h2",{id:"functions-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#functions-1","aria-hidden":"true"},"#"),n(" Functions")],-1),da=t(`<h3 id="code" tabindex="-1"><a class="header-anchor" href="#code" aria-hidden="true">#</a> Code</h3><p>By enabling <code>highlight</code> plugin, you can highlight code blocks.</p><p>You can use <code>[a-b|c-d]</code> syntax to highlight lines by steps.</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> <span class="token function-variable function">c</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">x</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token number">1</span> <span class="token operator">+</span> <span class="token number">2</span> <span class="token operator">+</span> x<span class="token punctuation">;</span>
<span class="token function">c</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>--</p>`,5),ra=e("h2",{id:"functions-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#functions-2","aria-hidden":"true"},"#"),n(" Functions")],-1),ca=e("h3",{id:"overview",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#overview","aria-hidden":"true"},"#"),n(" Overview")],-1),ha=e("p",null,[n("Press "),e("code",null,"Esc"),n(" or "),e("code",null,"O"),n(" to enter overview mode when the presentation is active")],-1),ua=e("p",null,"--",-1),_a=e("h2",{id:"functions-3",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#functions-3","aria-hidden":"true"},"#"),n(" Functions")],-1),ma=e("h3",{id:"full-screen",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#full-screen","aria-hidden":"true"},"#"),n(" Full Screen")],-1),pa=e("p",null,[n("Press "),e("code",null,"F"),n(" or "),e("code",null,"F11"),n(" to enter fullscreen when the presentation is active")],-1),fa=e("p",null,"--",-1),ga=e("h2",{id:"functions-4",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#functions-4","aria-hidden":"true"},"#"),n(" Functions")],-1),ba=e("h3",{id:"zoom",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#zoom","aria-hidden":"true"},"#"),n(" Zoom")],-1),ka=e("p",null,[n("Hold down the "),e("code",null,"alt"),n(" key ("),e("code",null,"ctrl"),n(" in Linux) and click on any element to zoom towards it.")],-1),xa=e("p",null,"Click again to zoom back out.",-1),va=e("hr",null,null,-1),wa=e("h2",{id:"the-end",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#the-end","aria-hidden":"true"},"#"),n(" The End")],-1),ya=e("p",null,"@slideend",-1);function Fa(Ma,Ta){const s=o("ExternalLinkIcon");return d(),r("div",null,[a(" markdownlint-disable MD024 MD033 MD051 "),u,a(' .slide: data-transition="slide" '),_,a(' .element: class="r-fit-text" '),m,a(' .element: class="r-fit-text" '),p,f,a(' .slide: data-transition="slide" data-auto-animate '),g,a(' .element: class="r-fit-text" '),b,k,a(' .slide: data-transition="slide" data-auto-animate '),x,a(' .element: class="r-fit-text" '),v,a(' .element: class="fragment fade-in" '),w,a(' .element: class="fragment fade-in" '),y,a(' .element: class="fragment fade-in" '),F,a(' .element: class="fragment fade-in" '),M,a(' .slide: data-transition="slide" data-auto-animate '),T,a(' .element: class="r-fit-text" '),A,a(' .element: class="r-fit-text" '),L,a(" .slide: data-auto-animate "),z,I,Y,C,e("p",null,[n("Here is paragraph with some "),E,n(", "),j,n(", "),B,n(" text and a "),e("a",N,[n("link"),c(s)]),n(", and it can auto break itself so you don't need to worry the length.")]),P,a(" .slide: data-auto-animate "),S,a(" .slide: data-auto-animate "),H,a(" .slide: data-auto-animate "),U,V,D,O,$,a(" .slide: data-auto-animate "),q,J,R,Z,a(' .slide: data-transition="slide" data-auto-animate '),G,a(' .element: class="r-fit-text" '),K,a(" .slide: data-auto-animate  "),Q,a(' .element: class="r-fit-text" '),W,X,a(" .slide: data-auto-animate  "),ee,ae,a(' .element: class="r-stretch" '),ne,te,a(' .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" '),se,le,ie,oe,a(" .slide: data-auto-animate "),de,a(' .element: class="r-fit-text" '),re,a(" .slide: data-auto-animate "),ce,a(' .element: class="r-fit-text" '),he,ue,_e,a(" .slide: data-auto-animate "),me,pe,fe,a(' .element: class="fragment fade-in" '),ge,a(' .element: class="fragment fade-out" '),be,a(' .element: class="fragment fade-up" '),a(" list break "),ke,a(' .element: class="fragment fade-down" '),xe,a(' .element: class="fragment fade-left" '),ve,a(' .element: class="fragment fade-right" '),a(" list break "),we,a(' .element: class="fragment fade-in-then-out" '),ye,a(' .element: class="fragment fade-in-then-semi-out" '),Fe,a(" .slide: data-auto-animate "),Me,Te,Ae,a(' .element: class="fragment grow" '),Le,a(' .element: class="fragment shrink" '),ze,a(' .element: class="fragment strike" '),a(" list break "),Ie,a(' .element: class="fragment highlight-red" '),Ye,a(' .element: class="fragment highlight-green" '),Ce,a(' .element: class="fragment highlight-blue" '),a(" list break "),Ee,a(' .element: class="fragment highlight-current-red" '),je,a(' .element: class="fragment highlight-current-green" '),Be,a(' .element: class="fragment highlight-current-blue" '),Ne,a(" .slide: data-auto-animate "),Pe,a(" .slide: data-auto-animate "),Se,He,Ue,Ve,De,a(' .element: class="fragment" data-fragment-index="3"'),Oe,a(' .element: class="fragment" data-fragment-index="2"'),a(" list break "),$e,a(' .element: class="fragment" data-fragment-index="1"'),qe,a(' .element: class="fragment" data-fragment-index="2"'),Je,a(' .slide: data-transition="slide" data-auto-animate '),Re,a(' .element: class="r-fit-text" '),Ze,a(' .slide: data-transition="slide" data-auto-animate '),Ge,a(' .element: class="r-fit-text" '),Ke,Qe,We,a(" list break "),Xe,ea,a(" .slide: data-auto-animate "),aa,a(' .element: class="r-fit-text" '),na,ta,sa,a(' .slide: data-transition="slide" data-auto-animate '),la,a(' .element: class="r-fit-text" '),ia,a(' .slide: data-transition="slide" data-auto-animate '),oa,a(' .element: class="r-fit-text" '),da,a(' .slide: data-transition="slide" data-auto-animate '),ra,a(' .element: class="r-fit-text" '),ca,ha,ua,a(' .slide: data-transition="slide" data-auto-animate '),_a,a(' .element: class="r-fit-text" '),ma,pa,fa,a(' .slide: data-transition="slide" data-auto-animate '),ga,a(' .element: class="r-fit-text" '),ba,ka,xa,va,a(' .element: class="r-fit-text" '),wa,ya])}const Ia=i(h,[["render",Fa],["__file","slides.html.vue"]]);export{Ia as default};