{"data":{"markdownRemark":{"html":"<p><strong>NOTE:</strong> This markdown cheatsheet is a typography demo for this theme. Check out this post to learn more about this markdown usage when you want to get started with this theme. Enjoy!</p>\n<h2>Typography Elements in One</h2>\n<p>Let's start with a informative paragraph. <strong>This text is bolded.</strong> But not this one! <em>How about italic text?</em> Cool right? Ok, let's <strong><em>combine</em></strong> them together. Yeah, that's right! I have code to highlight, so <code class=\"language-text\">ThisIsMyCode()</code>. What a nice! Good people will hyperlink away, so <a href=\"#\">here we go</a> or <a href=\"http://www.example.com\">http://www.example.com</a>.</p>\n<div class=\"divider\"></div>\n<h2>Headings H1 to H6</h2>\n<h1>H1 Heading</h1>\n<h2>H2 Heading</h2>\n<h3>H3 Heading</h3>\n<h4>H4 Heading</h4>\n<h5>H5 Heading</h5>\n<h6>H6 Heading</h6>\n<div class=\"divider\"></div>\n<h2>Footnote</h2>\n<p>Let's say you have text that you want to refer with a footnote, you can do that too! This is an example for the footnote number one <sup id=\"fnref-1\"><a href=\"#fn-1\" class=\"footnote-ref\">1</a></sup>. You can even add more footnotes, with link! <sup id=\"fnref-2\"><a href=\"#fn-2\" class=\"footnote-ref\">2</a></sup></p>\n<div class=\"divider\"></div>\n<h2>Blockquote</h2>\n<blockquote>\n<p>Start by doing what's necessary; then do what's possible; and suddenly you are doing the impossible. --Francis of Assisi</p>\n</blockquote>\n<p><strong>NOTE:</strong> This theme does NOT support nested blockquotes.</p>\n<div class=\"divider\"></div>\n<h2>List Items</h2>\n<ol>\n<li>\n<p>First order list item</p>\n</li>\n<li>\n<p>Second item</p>\n</li>\n<li>\n<p>Unordered list can use asterisks</p>\n</li>\n<li>\n<p>Or minuses</p>\n</li>\n<li>\n<p>Or pluses</p>\n</li>\n</ol>\n<div class=\"divider\"></div>\n<h2>Code Blocks</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">var</span> s <span class=\"token operator\">=</span> <span class=\"token string\">\"JavaScript syntax highlighting\"</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">alert</span><span class=\"token punctuation\">(</span>s<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"python\"><pre class=\"language-python\"><code class=\"language-python\">s <span class=\"token operator\">=</span> <span class=\"token string\">\"Python syntax highlighting\"</span>\n<span class=\"token keyword\">print</span> s</code></pre></div>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">No language indicated, so no syntax highlighting.\nBut let&#39;s throw in a &lt;b&gt;tag&lt;/b&gt;.</code></pre></div>\n<div class=\"divider\"></div>\n<h2>Table</h2>\n<h3>Table 1: With Alignment</h3>\n<table>\n<thead>\n<tr>\n<th>Tables</th>\n<th align=\"center\">Are</th>\n<th align=\"right\">Cool</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>col 3 is</td>\n<td align=\"center\">right-aligned</td>\n<td align=\"right\">$1600</td>\n</tr>\n<tr>\n<td>col 2 is</td>\n<td align=\"center\">centered</td>\n<td align=\"right\">$12</td>\n</tr>\n<tr>\n<td>zebra stripes</td>\n<td align=\"center\">are neat</td>\n<td align=\"right\">$1</td>\n</tr>\n</tbody>\n</table>\n<h3>Table 2: With Typography Elements</h3>\n<table>\n<thead>\n<tr>\n<th>Markdown</th>\n<th>Less</th>\n<th>Pretty</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><em>Still</em></td>\n<td><code class=\"language-text\">renders</code></td>\n<td><strong>nicely</strong></td>\n</tr>\n<tr>\n<td>1</td>\n<td>2</td>\n<td>3</td>\n</tr>\n</tbody>\n</table>\n<div class=\"divider\"></div>\n<h2>Horizontal Line</h2>\n<p>The HTML <code class=\"language-text\">&lt;hr&gt;</code> element is for creating a \"thematic break\" between paragraph-level elements. In markdown, you can create a <code class=\"language-text\">&lt;hr&gt;</code> with any of the following:</p>\n<ul>\n<li><code class=\"language-text\">___</code>: three consecutive underscores</li>\n<li><code class=\"language-text\">---</code>: three consecutive dashes</li>\n<li><code class=\"language-text\">***</code>: three consecutive asterisks</li>\n</ul>\n<p>renders to:</p>\n<hr>\n<hr>\n<hr>\n<div class=\"divider\"></div>\n<h2>Media</h2>\n<h3>YouTube Embedded Iframe</h3>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/n1a7o44WxNo\" frameborder=\"0\" allowfullscreen></iframe>\n<h3>Image</h3>\n<p><img src=\"https://octodex.github.com/images/minion.png\" alt=\"Minion\"></p>\n<div class=\"footnotes\">\n<hr>\n<ol>\n<li id=\"fn-1\">\n<p>Footnote number one yeah baby! Long sentence test of footnote to see how the words are wrapping between each other. Might overflowww!</p>\n<a href=\"#fnref-1\" class=\"footnote-backref\">↩</a>\n</li>\n<li id=\"fn-2\">\n<p>A footnote you can link to - <a href=\"#\">click here!</a></p>\n<a href=\"#fnref-2\" class=\"footnote-backref\">↩</a>\n</li>\n</ol>\n</div>","frontmatter":{"date":"October 2016","title":"Typography Elements"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/2019/typography/","prev":{"fields":{"slug":"/2019/hello-world/"},"frontmatter":{"title":"This is My Very First Post - Hello World!"}},"next":{"fields":{"slug":"/2019/lorem-ipsum/"},"frontmatter":{"title":"Lorem Ipsum"}}}}