{"id":7974,"date":"2019-12-07T06:11:24","date_gmt":"2019-12-07T06:11:24","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=7974"},"modified":"2019-12-07T07:33:44","modified_gmt":"2019-12-07T07:33:44","slug":"reveal-js-markdown-cheatsheet-complete-guide","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/reveal-js-markdown-cheatsheet-complete-guide\/","title":{"rendered":"Reveal.js  Markdown Cheatsheet  Complete guide"},"content":{"rendered":"\n<p>First, you can go to this link: <a href=\"https:\/\/github.com\/hakimel\/reveal.js\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/github.com\/hakimel\/reveal.js\/<\/a><\/p>\n\n\n\n<p><strong>Markdown<\/strong>: It is possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your elements and wrap the contents in alike the example below. You will also need to add the plugin\/markdown\/markdown.js script to the Reveal. Initialize the dependencies section at your HTML file.<\/p>\n\n\n\n<p>Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/466e656b26573fbe3af3346f6a8c6882.js\"><\/script>\n\n\n\n<p><strong>External Markdown<\/strong><\/p>\n\n\n\n<p>You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\\r?\\n&#8212;\\r?\\n$, a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide&#8217;s speaker notes (defaults to notes?:, so it will match both &#8220;note:&#8221; and &#8220;notes:&#8221;). The data-charset attribute is optional and specifies which charset to use when loading the external file.<\/p>\n\n\n\n<p>When used locally, this feature requires that reveal.js runs from a local webserver.<\/p>\n\n\n\n<p>Example: <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/746500d4ff5bba8baaec30ef7b208eb4.js\"><\/script>\n\n\n\n<p><strong>Element Attributes<\/strong><\/p>\n\n\n\n<p>Special syntax is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/3185f4beb7832d04afbe0a549aa0dcd0.js\"><\/script>\n\n\n\n<p><strong>Slide Attributes<\/strong><\/p>\n\n\n\n<p>Special syntax is available for adding attributes to the slide elements generated by your Markdown.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/34ab6752b7e1376553fe737bf2be12d8.js\"><\/script>\n\n\n\n<p><strong>Configuring marked<\/strong><\/p>\n\n\n\n<p>We use marked to parse Markdown. To customize marked&#8217;s rendering, you can pass in options when configuring Reveal:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/48a2cbef441ca1c48e91b6003698cd67.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>First, you can go to this link: https:\/\/github.com\/hakimel\/reveal.js\/ Markdown: It is possible to write your slides using Markdown. To enable Markdown, add the data-markdown attribute to your elements and wrap the contents in alike the example below. You will also need to add the plugin\/markdown\/markdown.js script to the Reveal. Initialize the dependencies section at your&#8230;<\/p>\n","protected":false},"author":9,"featured_media":7976,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[5570],"tags":[2679,5572,5571],"class_list":["post-7974","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reveal-js","tag-attributes","tag-markdown","tag-reveal-js"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=7974"}],"version-history":[{"count":2,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7974\/revisions"}],"predecessor-version":[{"id":7990,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/7974\/revisions\/7990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/7976"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=7974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=7974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=7974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}