{"id":5865,"date":"2021-04-12T11:30:12","date_gmt":"2021-04-12T11:30:12","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=5865"},"modified":"2022-04-13T16:30:49","modified_gmt":"2022-04-13T16:30:49","slug":"where-to-use-an-html-slide-presentation-in-reveal-js","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/","title":{"rendered":"Where to Use an HTML slide presentation in reveal JS?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, PDF exports, and JavaScript APIs to control slide navigation. Presentations are written using HTML using Reveal.js.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up reveal.js<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before using reveal.js, you should have both Node.js and Grunt installed on your machine. The next steps are to clone the reveal.js repository from GitHub, install all of the dependencies, and start the revealed server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a Presentation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A presentation reveals the HTML pages slide. Before the end of the body tag, we have a script that is key to the presentation configuration. There are several options that we can configure. For example, we can optionally show presentation progress, can enable the transition, and set a theme for our presentation. Once, we start adding slides in your presentation that we will dig deeper.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/11d4ea5f11b784eaf97b137b384f12bf.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Slides<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we&#8217;ll start adding slides to your presentation letter. Using this HTML, add your first slide. Section represents elements slide. As an example illustrated by the nested classes, we can also nest within the other slides.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/f14a819dda6d940ea932bf150cbd6ac5.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Save your file and restart the server using the command grunt serve. You should look at the slides went created our new. Note that the arrow can be controlled slides using keys. Although this functionality is enabled by default, you can configure the behavior by using the keyboard in the really Reveal.js initialize () method.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Themes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are many themes available such as Beige, Solarized, and Sky which are located in CSS \/ Theme. To use them, you&#8217;ll just have to change the default style on your page, as shown in the following example.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/7576b90518aac7b75a386365e049d27a.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Transitions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The infection can be revealed of style and speed. Using the initial () transition and transition speed parameters. An example of this is shown below.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/c00ee542da1580ecdf1f3675544d5a0f.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Markdown Slide Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to encourage you to write your slides using Markdown so fans Markdown. Just add a data-markdown attribute to your section tag, and wrap your content inside the tag as shown below.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/2314e67e00409c0f778d27859223a9f7.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5866,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5198],"tags":[5134,4459,3094,5197,5199],"class_list":["post-5865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reveal-js","tag-css","tag-html","tag-presentation","tag-revealjs","tag-slides"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Where to Use an HTML slide presentation in reveal JS? - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Where to Use an HTML slide presentation in reveal JS? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-12T11:30:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:30:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"Where to Use an HTML slide presentation in reveal JS?\",\"datePublished\":\"2021-04-12T11:30:12+00:00\",\"dateModified\":\"2022-04-13T16:30:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/\"},\"wordCount\":352,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/whereto-use-an-html-slide-presentation-in-reveal-js.png\",\"keywords\":[\"css\",\"HTML\",\"Presentation\",\"revealjs\",\"slides\"],\"articleSection\":[\"Reveal JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/\",\"name\":\"Where to Use an HTML slide presentation in reveal JS? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/whereto-use-an-html-slide-presentation-in-reveal-js.png\",\"datePublished\":\"2021-04-12T11:30:12+00:00\",\"dateModified\":\"2022-04-13T16:30:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/whereto-use-an-html-slide-presentation-in-reveal-js.png\",\"contentUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/whereto-use-an-html-slide-presentation-in-reveal-js.png\",\"width\":660,\"height\":330},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/where-to-use-an-html-slide-presentation-in-reveal-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Where to Use an HTML slide presentation in reveal JS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Where to Use an HTML slide presentation in reveal JS? - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/","og_locale":"en_US","og_type":"article","og_title":"Where to Use an HTML slide presentation in reveal JS? - scmGalaxy","og_description":"Reveal.js is a framework for creating beautiful presentations using HTML. It has sleek features such as markdown content, nested slides, [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/","og_site_name":"scmGalaxy","article_published_time":"2021-04-12T11:30:12+00:00","article_modified_time":"2022-04-13T16:30:49+00:00","og_image":[{"width":660,"height":330,"url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png","type":"image\/png"}],"author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"Where to Use an HTML slide presentation in reveal JS?","datePublished":"2021-04-12T11:30:12+00:00","dateModified":"2022-04-13T16:30:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/"},"wordCount":352,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png","keywords":["css","HTML","Presentation","revealjs","slides"],"articleSection":["Reveal JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/","name":"Where to Use an HTML slide presentation in reveal JS? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png","datePublished":"2021-04-12T11:30:12+00:00","dateModified":"2022-04-13T16:30:49+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#primaryimage","url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png","contentUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/whereto-use-an-html-slide-presentation-in-reveal-js.png","width":660,"height":330},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/where-to-use-an-html-slide-presentation-in-reveal-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"Where to Use an HTML slide presentation in reveal JS?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=5865"}],"version-history":[{"count":2,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5865\/revisions"}],"predecessor-version":[{"id":5868,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5865\/revisions\/5868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media\/5866"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=5865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=5865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=5865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}