demo.txt

{:: Welcome to the jslide demo}
{:: You can write comments between curly brackets followed by
    two colons. You can write your comment over multiple lines.}
{:: Syntax for jslide is slightly based on Markdown.}

# Demo {:: Use hashes to control the size of your title}
----   {:: a full line is generated by 4 or more bars}

{:: Curly braces with one colon are used to set attributes.
    We can, for instance, change the alignment of the text.
    The attributes .left, .right, and .center can be used}

{: .right}
jslide

{:: The text size can by controlled by using hashes, from one 
    hash # for very large text to up to 8 hashes ######## for
    tiny text. Normally the hashes are used for titles and
    subsections. Normal text's size can be set by attributes 
    .normal .small .tine .large, and .huge}

{: .small .center}
by Jan Maes


{:: To start a new slide we use the symbol @}
@


{:: Text can be written in color.}


{: .red .left}
## Red
{: .green .center}
### Green
{: .blue .right}
#### Blue
{: .center}
##### {: .orange}Different {: .yellow} colors {: .gray} are {: .white} possible

{:: Transition to the next slide is also controlled with 
    attributes. You can use .dia, .split, .fade, .zoom, 
    or .notransfer}

{: .split}

@

{:: The background can also be customized. Here you can write 
    a custom glsl shader similar to the shaders from 
    ShaderToy (https://www.shadertoy.com/).
    The syntax for a background shader is ! followed by 
    the shader code between quotes "".}

!"void mainImage( out vec4 fragColor, in vec2 fragCoord ) 
{
  fragColor = vec4(1, 0.5, 0, 1); // orange backgroun
}"

{:: See subfolder shaders in the code for some example shaders}

{: .right .blue .normal} Itemize
----

{: .left}

{:: There is no syntax for itemized lists. But if you want
    each item to appear one after the other, then you can 
    use @@ instead of recreating the whole slide over and over.}

@@
  * first item

@@
  * second item

@@
  * third item

{: .zoom .white .center}
@
{:: For background shaders, you can also provide a file instead
    of the actual shader code.}
!"shaders/fire.frag"
Hot shader

{: .dia}
@
{: .right .cyan}
I like c++
----

{:: Code snippets (between quotes `) have automatic 
    syntax highlighting. Several languages are available as 
    an attribute: .asm, .basic, .batch, .c, .cpp, .csharp, 
    .cmake, .fortran, .html, .java, .json, .javascript, .lisp,
    .lua, .metal, .objectivec, .pascal, .python, .ruby,
    .rust, .scheme, .swift, .xml }
{:: Several highlighting schemes are available:
    .dracula, .solarized, .solarizeddark, .tomorrow,
    .tomorrownight, .gruvbox, .gruvboxlight, .acme,
    .dark, .matrix, .light, .none}

{: .cpp .dracula}
`
  /*
  Fibonacci series using recursion
  */
  int fib(int n)  
  {
    if (n <= 1)
      return n;
    return fib(n-1) + fib(n-2);
  }
`
@
{: .left .green}
Images
----
{:: Images have the following syntax: ![w h](path/image.ext).
    Here w and h are floating point values between 0 and 1 
    indicating the width and height of the image with respect 
    to the slide.}

{: .center}
![0.3 0.6](yoda.jpg)
my dog