336 lines
11 KiB
HTML
336 lines
11 KiB
HTML
<!doctype html>
|
||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
|
||
|
||
<title>Getting Started with Markdown – Site Title</title>
|
||
<meta name="description" content="How to get started using your Jekyll site with Github pages. ">
|
||
<meta name="keywords" content="intro, beginner, jekyll, tutorial">
|
||
|
||
|
||
<!-- Twitter Cards -->
|
||
<meta name="twitter:title" content="Getting Started with Markdown">
|
||
<meta name="twitter:description" content="How to get started using your Jekyll site with Github pages. ">
|
||
|
||
|
||
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:image" content="/images/default-thumb.png">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:locale" content="en_US">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:title" content="Getting Started with Markdown">
|
||
<meta property="og:description" content="How to get started using your Jekyll site with Github pages. ">
|
||
<meta property="og:url" content="/blog/markdown-basics/">
|
||
<meta property="og:site_name" content="Site Title">
|
||
|
||
<meta property="og:image" content="/images/default-thumb.png">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link rel="canonical" href="/blog/markdown-basics/">
|
||
<link href="/feed.xml" type="application/atom+xml" rel="alternate" title="Site Title Feed">
|
||
|
||
<!-- http://t.co/dKP3o1e -->
|
||
<meta name="HandheldFriendly" content="True">
|
||
<meta name="MobileOptimized" content="320">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- For all browsers -->
|
||
<link rel="stylesheet" href="/assets/css/main.css">
|
||
|
||
|
||
<meta http-equiv="cleartype" content="on">
|
||
|
||
|
||
<!-- Modernizr -->
|
||
<script src="/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
|
||
|
||
|
||
<link href='//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700%7CPT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
|
||
<!-- Icons -->
|
||
<!-- 16x16 -->
|
||
<link rel="shortcut icon" href="/favicon.ico">
|
||
<!-- 32x32 -->
|
||
<link rel="shortcut icon" href="/favicon.png">
|
||
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
|
||
<link rel="apple-touch-icon-precomposed" href="/images/apple-touch-icon-precomposed.png">
|
||
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
|
||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/apple-touch-icon-72x72-precomposed.png">
|
||
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
|
||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/images/apple-touch-icon-114x114-precomposed.png">
|
||
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
|
||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/images/apple-touch-icon-144x144-precomposed.png">
|
||
|
||
</head>
|
||
|
||
<body class="post">
|
||
|
||
<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
|
||
|
||
|
||
<div class="navigation-wrapper">
|
||
<div class="site-name">
|
||
|
||
<a href="/">Site Title</a>
|
||
|
||
</div><!-- /.site-name -->
|
||
<div class="top-navigation">
|
||
<nav role="navigation" id="site-nav" class="nav">
|
||
<ul>
|
||
|
||
|
||
<li><a href="/" >Home</a></li>
|
||
|
||
|
||
<li><a href="/about/" >About Me</a></li>
|
||
|
||
|
||
<li><a href="/presentations/" >Presentations</a></li>
|
||
|
||
|
||
<li><a href="/resume/" >Resume</a></li>
|
||
|
||
|
||
<li><a href="/archive/" >Blog Archive</a></li>
|
||
|
||
</ul>
|
||
</nav>
|
||
</div><!-- /.top-navigation -->
|
||
</div><!-- /.navigation-wrapper -->
|
||
|
||
|
||
|
||
<div id="main" role="main">
|
||
<div class="article-author-side">
|
||
|
||
|
||
<div itemscope itemtype="http://schema.org/Person">
|
||
|
||
|
||
<img src="/images/bio-photo.jpg" class="bio-photo" alt="Your Name bio photo">
|
||
|
||
|
||
<h3 itemprop="name">Your Name</h3>
|
||
<p>A brief description of yourself.</p>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<article class="post">
|
||
<div class="headline-wrap">
|
||
|
||
<h1><a href="/blog/markdown-basics/" rel="bookmark" title="Getting Started with Markdown">Getting Started with Markdown</a></h1>
|
||
|
||
</div><!--/ .headline-wrap -->
|
||
<div class="article-wrap">
|
||
<h2 id="html-elements">HTML Elements</h2>
|
||
|
||
<p>Below is just about everything you’ll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.</p>
|
||
|
||
<h1 id="heading-1">Heading 1</h1>
|
||
|
||
<h2 id="heading-2">Heading 2</h2>
|
||
|
||
<h3 id="heading-3">Heading 3</h3>
|
||
|
||
<h4 id="heading-4">Heading 4</h4>
|
||
|
||
<h5 id="heading-5">Heading 5</h5>
|
||
|
||
<h6 id="heading-6">Heading 6</h6>
|
||
|
||
<h3 id="body-text">Body text</h3>
|
||
|
||
<p>Lorem ipsum dolor sit amet, test link adipiscing elit. <strong>This is strong</strong>. Nullam dignissim convallis est. Quisque aliquam.</p>
|
||
|
||
<p class="image-pull-right"><img src="/images/bio-pic.jpg" alt="Smithsonian Image" /></p>
|
||
|
||
<p><em>This is emphasized</em>. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
|
||
|
||
<p>HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
|
||
|
||
<h3 id="blockquotes">Blockquotes</h3>
|
||
|
||
<blockquote>
|
||
<p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.</p>
|
||
</blockquote>
|
||
|
||
<h2 id="list-types">List Types</h2>
|
||
|
||
<h3 id="ordered-lists">Ordered Lists</h3>
|
||
|
||
<ol>
|
||
<li>Item one
|
||
<ol>
|
||
<li>sub item one</li>
|
||
<li>sub item two</li>
|
||
<li>sub item three</li>
|
||
</ol>
|
||
</li>
|
||
<li>Item two</li>
|
||
</ol>
|
||
|
||
<h3 id="unordered-lists">Unordered Lists</h3>
|
||
|
||
<ul>
|
||
<li>Item one</li>
|
||
<li>Item two</li>
|
||
<li>Item three</li>
|
||
</ul>
|
||
|
||
<h2 id="tables">Tables</h2>
|
||
|
||
<table rules="groups">
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align: left">Header1</th>
|
||
<th style="text-align: center">Header2</th>
|
||
<th style="text-align: right">Header3</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align: left">cell1</td>
|
||
<td style="text-align: center">cell2</td>
|
||
<td style="text-align: right">cell3</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: left">cell4</td>
|
||
<td style="text-align: center">cell5</td>
|
||
<td style="text-align: right">cell6</td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<td style="text-align: left">cell1</td>
|
||
<td style="text-align: center">cell2</td>
|
||
<td style="text-align: right">cell3</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="text-align: left">cell4</td>
|
||
<td style="text-align: center">cell5</td>
|
||
<td style="text-align: right">cell6</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td style="text-align: left">Foot1</td>
|
||
<td style="text-align: center">Foot2</td>
|
||
<td style="text-align: right">Foot3</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
|
||
<h2 id="code-snippets">Code Snippets</h2>
|
||
|
||
<figure class="highlight"><pre><code class="language-css" data-lang="css"><span class="nf">#container</span> <span class="p">{</span>
|
||
<span class="nl">float</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span>
|
||
<span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="m">-240px</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span>
|
||
<span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
|
||
<span class="p">}</span></code></pre></figure>
|
||
|
||
<h2 id="buttons">Buttons</h2>
|
||
|
||
<p>Make any link standout more when applying the <code class="highlighter-rouge">.btn</code> class.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success Button<span class="nt"></a></span></code></pre></figure>
|
||
|
||
<div><a href="#" class="btn">Primary Button</a></div>
|
||
<div><a href="#" class="btn btn-success">Success Button</a></div>
|
||
<div><a href="#" class="btn btn-warning">Warning Button</a></div>
|
||
<div><a href="#" class="btn btn-danger">Danger Button</a></div>
|
||
<div><a href="#" class="btn btn-info">Info Button</a></div>
|
||
|
||
<h2 id="notices">Notices</h2>
|
||
|
||
<p class="notice"><strong>Watch out!</strong> You can also add notices by appending <code class="highlighter-rouge"><span class="p">{</span><span class="err">:</span><span class="w"> </span><span class="err">.notice</span><span class="p">}</span></code> to a paragraph.</p>
|
||
|
||
<hr />
|
||
<footer role="contentinfo">
|
||
<div class="social-share">
|
||
<!--<h4>Share on</h4>
|
||
<ul>
|
||
<li>
|
||
<a href="https://twitter.com/intent/tweet?text=/blog/markdown-basics/" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.facebook.com/sharer/sharer.php?u=/blog/markdown-basics/" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="https://plus.google.com/share?url=/blog/markdown-basics/" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
||
</li>
|
||
</ul>-->
|
||
</div><!-- /.social-share -->
|
||
|
||
<p class="byline"><strong>Getting Started with Markdown</strong> was published on <time datetime="2016-02-26T00:00:00-05:00">February 26, 2016</time> and last modified on <time datetime="2016-01-13">January 13, 2016</time>.</p>
|
||
</footer>
|
||
</div><!-- /.article-wrap -->
|
||
|
||
</article>
|
||
</div><!-- /#main -->
|
||
|
||
<div class="footer-wrap">
|
||
|
||
<div class="related-articles">
|
||
<h4>You might also enjoy <small class="pull-right">(<a href="/posts/">View all posts</a>)</small></h4>
|
||
<ul>
|
||
|
||
<li><a href="/presentation/example-presentation/" title="Example Reveal.js Presentation Deck">Example Reveal.js Presentation Deck</a></li>
|
||
|
||
<li><a href="/blog/what-is-this/" title="What is This?">What is This?</a></li>
|
||
|
||
<li><a href="/blog/editing-your-site/" title="How to edit your Jekyll site and make posts">How to edit your Jekyll site and make posts</a></li>
|
||
|
||
</ul>
|
||
<hr />
|
||
</div><!-- /.related-articles -->
|
||
|
||
<footer>
|
||
|
||
|
||
<span>© 2016 Your Name. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="http://mademistakes.com/minimal-mistakes/" rel="nofollow">Minimal Mistakes</a> theme.</span>
|
||
|
||
</footer>
|
||
</div><!-- /.footer-wrap -->
|
||
|
||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
|
||
<script src="/assets/js/scripts.min.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|