{"id":1513,"date":"2014-11-12T13:14:07","date_gmt":"2014-11-12T13:14:07","guid":{"rendered":"http:\/\/www.navision-blog.de\/blog\/?p=1513"},"modified":"2014-11-12T13:27:41","modified_gmt":"2014-11-12T13:27:41","slug":"introducing-fsreveal-beautiful-version-controlled-presentations-in-the-browser","status":"publish","type":"post","link":"http:\/\/www.navision-blog.de\/blog\/2014\/11\/12\/introducing-fsreveal-beautiful-version-controlled-presentations-in-the-browser\/","title":{"rendered":"Introducing FsReveal &#8211; Beautiful, version controlled presentations in the browser"},"content":{"rendered":"<p>This <a href=\"http:\/\/fsprojects.github.io\/FsReveal\/\">FsReveal<\/a> tool stack allows you to write beautiful slides in <a href=\"http:\/\/daringfireball.net\/projects\/markdown\/syntax\">Markdown<\/a>\u00a0and brings F# to the wonderful <a href=\"https:\/\/github.com\/hakimel\/reveal.js\/\">reveal.js<\/a> web presentation framework.<\/p>\n<p>You write your slides in\u00a0Markdown like the following and the rest is magic<a href=\"#Magic\">*<\/a>:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/forki\/c254f78cd2eaadbfd61a.js\"><\/script><\/p>\n<p>will turn into:<\/p>\n<p><img loading=\"lazy\" class=\"\" src=\"http:\/\/www.navision-blog.de\/images\/fsreveal1.png\" alt=\"FsReveal slide 1\" width=\"500\" height=\"409\" \/><\/p>\n<p><img loading=\"lazy\" class=\"\" src=\"http:\/\/www.navision-blog.de\/images\/fsreveal2.png\" alt=\"FsReveal slide 2\" width=\"500\" height=\"409\" \/><\/p>\n<p><img loading=\"lazy\" class=\"\" src=\"http:\/\/www.navision-blog.de\/images\/fsreveal3.png\" alt=\"FsReveal slide 3\" width=\"500\" height=\"409\" \/><\/p>\n<h5>Features<\/h5>\n<ul>\n<li>Syntax highlighting for most programming languages including C#, F# and LaTeX<\/li>\n<li>Speaker notes &#8211; shows the current slide, next slide, elapsed time and current time<\/li>\n<li>Built in themes<\/li>\n<li>Built in slide transitions using CSS 3D transforms<\/li>\n<li>Slide overview<\/li>\n<li>Works on Windows, Linux and Mac<\/li>\n<li>Slides work\u00a0on mobile browsers. Swipe your way through the presentation.<\/li>\n<\/ul>\n<h5>Getting Started<\/h5>\n<p>Just follow the getting started guide at\u00a0<a href=\"http:\/\/fsprojects.github.io\/FsReveal\/\">http:\/\/fsprojects.github.io\/FsReveal\/<\/a>.<\/p>\n<h5>Examples<\/h5>\n<p>Check out what others have created:<\/p>\n<ul>\n<li><a href=\"http:\/\/fsreveal.azurewebsites.net\/index-md.html#\/\">Markdown example<\/a> by <a href=\"https:\/\/twitter.com\/kimsk\">@kimsk<\/a><\/li>\n<li><a href=\"http:\/\/troykershaw.github.io\/RpgFsharpWorkshop\/#\/\">RPG F# Workshop<\/a> by <a href=\"https:\/\/twitter.com\/troykershaw\">@troykershaw<\/a><\/li>\n<li><a href=\"http:\/\/panesofglass.github.io\/TodoBackendFSharp\">F# on the Web &#8211; 0 to production in 12 weeks<\/a> by <a href=\"https:\/\/twitter.com\/panesofglass\">@panesofglass<\/a><\/li>\n<\/ul>\n<h5><a name=\"Magic\"><\/a>The magic<\/h5>\n<ul>\n<li><a href=\"https:\/\/github.com\/hakimel\/reveal.js\/\">reveal.js<\/a> &#8211; Framework for easily creating beautiful presentations using HTML and JavaScript.<\/li>\n<li><a href=\"http:\/\/fsprojects.github.io\/Paket\/\">Paket <\/a>&#8211;\u00a0Dependency manager which retrieves the referenced NuGet packages and reveal.js.<\/li>\n<li><a href=\"http:\/\/fsharp.github.io\/FAKE\/\">FAKE<\/a> &#8211; Build tool which allows to orchestrate the slide building process.<\/li>\n<li><a href=\"https:\/\/github.com\/tpetricek\/FSharp.Formatting\">FSharp.Formatting<\/a> &#8211; Used to render markdown slides and for F# syntax highlighting.<\/li>\n<li><a href=\"http:\/\/suave.io\/\">Suave.io<\/a> &#8211; Simple web development framework\/ webserver which allows to host the slides.<\/li>\n<li><a href=\"http:\/\/git-scm.com\/\">git<\/a> &#8211; Allows you to bring your slides under version control.<\/li>\n<\/ul>\n<p>All of this is bundled in <a href=\"http:\/\/fsprojects.github.io\/FsReveal\/\">FsReveal<\/a>, which was originally created by the amazing <a href=\"https:\/\/twitter.com\/kimsk\">@kimsk<\/a>\u00a0(Karlkim Suwanmongkol) and is now part of <a href=\"https:\/\/github.com\/fsprojects\">fsprojects<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This FsReveal tool stack allows you to write beautiful slides in Markdown\u00a0and brings F# to the wonderful reveal.js web presentation framework. You write your slides in\u00a0Markdown like the following and the rest is magic*: will turn into: Features Syntax highlighting for most programming languages including C#, F# and LaTeX Speaker notes &#8211; shows the current [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1513"}],"collection":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":14,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":1527,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions\/1527"}],"wp:attachment":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}