milesblog
/
hexo-theme-icarus
同期ミラー https://github.com/MilesPong/hexo-theme-icarus.git


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117
							<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset="utf-8">
    
    <title>Markdown | Icarus</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).">
<meta property="og:type" content="article">
<meta property="og:title" content="Markdown">
<meta property="og:url" content="http://ppoffice.github.io/hexo-theme-icarus/2014/12/25/Markdown Example/index.html">
<meta property="og:site_name" content="Icarus">
<meta property="og:description" content="A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).">
<meta property="og:image" content="http://ppoffice.github.io/hexo-theme-icarus/hexo-theme-icarus/gallery/markdown.jpg">
<meta property="og:updated_time" content="2016-04-23T04:10:48.044Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Markdown">
<meta name="twitter:description" content="A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).">
<meta name="twitter:image" content="http://ppoffice.github.io/hexo-theme-icarus/hexo-theme-icarus/gallery/markdown.jpg">
    

    <link rel="stylesheet" href="/hexo-theme-icarus/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/hexo-theme-icarus/vendor/open-sans/styles.css">
    <link rel="stylesheet" href="/hexo-theme-icarus/vendor/source-code-pro/styles.css">

    <link rel="stylesheet" href="/hexo-theme-icarus/css/style.css">

    <script src="/hexo-theme-icarus/vendor/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/hexo-theme-icarus/vendor/fancybox/jquery.fancybox.css">
    
    
</head>
<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/hexo-theme-icarus/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Icarus</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/hexo-theme-icarus/.">Home</a>
                
                    <a class="main-nav-link" href="/hexo-theme-icarus/archives">Archives</a>
                
                    <a class="main-nav-link" href="/hexo-theme-icarus/categories">Categories</a>
                
                    <a class="main-nav-link" href="/hexo-theme-icarus/tags">Tags</a>
                
                    <a class="main-nav-link" href="/hexo-theme-icarus/about">About</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/hexo-theme-icarus/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="Type something..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/hexo-theme-icarus/',
        CONTENT_URL: '/hexo-theme-icarus/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/hexo-theme-icarus/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/hexo-theme-icarus/.">Home</a></td>
                
                    <td><a class="main-nav-link" href="/hexo-theme-icarus/archives">Archives</a></td>
                
                    <td><a class="main-nav-link" href="/hexo-theme-icarus/categories">Categories</a></td>
                
                    <td><a class="main-nav-link" href="/hexo-theme-icarus/tags">Tags</a></td>
                
                    <td><a class="main-nav-link" href="/hexo-theme-icarus/about">About</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="Search" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                
<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/hexo-theme-icarus/css/images/avatar.png" />
            <h2 id="name">PPOffice</h2>
            <h3 id="title">Web Developer &amp; Designer</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Harbin, China</span>
            <a id="follow" target="_blank" href="https://github.com/ppoffice/">FOLLOW</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                10
                <span>posts</span>
            </div>
            <div class="article-info-block">
                3
                <span>tags</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    <td><a href="http://github.com/ppoffice/hexo-theme-icarus" target="_blank" title="github"><i class="fa fa-github"></i></a></td>
                    
                    <td><a href="/hexo-theme-icarus/" target="_blank" title="twitter"><i class="fa fa-twitter"></i></a></td>
                    
                    <td><a href="/hexo-theme-icarus/" target="_blank" title="facebook"><i class="fa fa-facebook"></i></a></td>
                    
                    <td><a href="/hexo-theme-icarus/" target="_blank" title="dribbble"><i class="fa fa-dribbble"></i></a></td>
                    
                    <td><a href="/hexo-theme-icarus/" target="_blank" title="rss"><i class="fa fa-rss"></i></a></td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-Markdown Example" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
            
		<img src="/hexo-theme-icarus/gallery/markdown.jpg" class="article-banner" />
	

            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Markdown
        </h1>
    

                <div class="article-meta">
                    
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/hexo-theme-icarus/2014/12/25/Markdown Example/">
            <time datetime="2014-12-24T16:31:00.000Z" itemprop="datePublished">2014-12-25</time>
        </a>
    </div>


    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/hexo-theme-icarus/categories/Technology/">Technology</a><i class="fa fa-angle-right"></i><a class="article-category-link" href="/hexo-theme-icarus/categories/Technology/Github/">Github</a>
    </div>

                    
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/hexo-theme-icarus/tags/markdown/">markdown</a>
    </div>

                </div>
            </header>
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>A markdown example shows how to write a markdown file. This document integrates core syntax and extensions (GMF).<br><a id="more"></a></p>
<ul>
<li><a href="#block-elements">Block Elements</a><ul>
<li><a href="#paragraphs-and-line-breaks">Paragraphs and Line Breaks</a></li>
<li><a href="#headers">Headers</a></li>
<li><a href="#blockquotes">Blockquotes</a></li>
<li><a href="#lists">Lists</a></li>
<li><a href="#code-blocks">Code Blocks</a></li>
<li><a href="#horizontal-rules">Horizontal Rules</a></li>
<li><a href="#table">Table</a></li>
</ul>
</li>
<li><a href="#span-elements">Span Elements</a><ul>
<li><a href="#links">Links</a></li>
<li><a href="#emphasis">Emphasis</a></li>
<li><a href="#code">Code</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#strikethrough">Strikethrough</a></li>
</ul>
</li>
<li><a href="#miscellaneous">Miscellaneous</a><ul>
<li><a href="#automatic-links">Automatic Links</a></li>
<li><a href="#backslash-escapes">Backslash Escapes</a></li>
</ul>
</li>
<li><a href="#inline-html">Inline HTML</a></li>
</ul>
<!-- more -->
<h2 id="Block-Elements"><a href="#Block-Elements" class="headerlink" title="Block Elements"></a>Block Elements</h2><h3 id="Paragraphs-and-Line-Breaks"><a href="#Paragraphs-and-Line-Breaks" class="headerlink" title="Paragraphs and Line Breaks"></a>Paragraphs and Line Breaks</h3><h4 id="Paragraphs"><a href="#Paragraphs" class="headerlink" title="Paragraphs"></a>Paragraphs</h4><p>HTML Tag: <code>&lt;p&gt;</code></p>
<p>One or more blank lines. (A blank line is a line containing nothing but <strong>spaces</strong> or <strong>tabs</strong> is considered blank.)</p>
<p>Code:</p>
<pre><code>This will be
inline.

This is second paragraph.
</code></pre><p>Preview:</p>
<hr>
<p>This will be<br>inline.</p>
<p>This is second paragraph.</p>
<hr>
<h4 id="Line-Breaks"><a href="#Line-Breaks" class="headerlink" title="Line Breaks"></a>Line Breaks</h4><p>HTML Tag: <code>&lt;br /&gt;</code></p>
<p>End a line with <strong>two or more spaces</strong>.</p>
<p>Code:</p>
<pre><code>This will be not
inline.
</code></pre><p>Preview:</p>
<hr>
<p>This will be not<br>inline.</p>
<hr>
<h3 id="Headers"><a href="#Headers" class="headerlink" title="Headers"></a>Headers</h3><p>Markdown supports two styles of headers, Setext and atx.</p>
<h4 id="Setext"><a href="#Setext" class="headerlink" title="Setext"></a>Setext</h4><p>HTML Tags: <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code></p>
<p>“Underlined” using <strong>equal signs (=)</strong> as <code>&lt;h1&gt;</code> and <strong>dashes (-)</strong> as <code>&lt;h2&gt;</code> in any number.</p>
<p>Code:</p>
<pre><code>This is an H1
=============
This is an H2
-------------
</code></pre><p>Preview:</p>
<hr>
<h1 id="This-is-an-H1"><a href="#This-is-an-H1" class="headerlink" title="This is an H1"></a>This is an H1</h1><h2 id="This-is-an-H2"><a href="#This-is-an-H2" class="headerlink" title="This is an H2"></a>This is an H2</h2><hr>
<h4 id="atx"><a href="#atx" class="headerlink" title="atx"></a>atx</h4><p>HTML Tags: <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code></p>
<p>Uses 1-6 <strong>hash characters (#)</strong> at the start of the line, corresponding to <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code>.</p>
<p>Code:</p>
<pre><code># This is an H1
## This is an H2
###### This is an H6
</code></pre><p>Preview:</p>
<hr>
<h1 id="This-is-an-H1-1"><a href="#This-is-an-H1-1" class="headerlink" title="This is an H1"></a>This is an H1</h1><h2 id="This-is-an-H2-1"><a href="#This-is-an-H2-1" class="headerlink" title="This is an H2"></a>This is an H2</h2><h6 id="This-is-an-H6"><a href="#This-is-an-H6" class="headerlink" title="This is an H6"></a>This is an H6</h6><hr>
<p>Optionally, you may “close” atx-style headers. The closing hashes <strong>don’t need to match</strong> the number of hashes used to open the header.</p>
<p>Code:</p>
<pre><code># This is an H1 #
## This is an H2 ##
### This is an H3 ######
</code></pre><p>Preview:</p>
<hr>
<h1 id="This-is-an-H1-2"><a href="#This-is-an-H1-2" class="headerlink" title="This is an H1"></a>This is an H1</h1><h2 id="This-is-an-H2-2"><a href="#This-is-an-H2-2" class="headerlink" title="This is an H2"></a>This is an H2</h2><h3 id="This-is-an-H3"><a href="#This-is-an-H3" class="headerlink" title="This is an H3"></a>This is an H3</h3><hr>
<h3 id="Blockquotes"><a href="#Blockquotes" class="headerlink" title="Blockquotes"></a>Blockquotes</h3><p>HTML Tag: <code>&lt;blockquote&gt;</code></p>
<p>Markdown uses email-style <strong>&gt;</strong> characters for blockquoting. It looks best if you hard wrap the text and put a &gt; before every line.</p>
<p>Code:</p>
<pre><code>&gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
&gt; consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
&gt; Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
&gt;
&gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
&gt; id sem consectetuer libero luctus adipiscing.
</code></pre><p>Preview:</p>
<hr>
<blockquote>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>id sem consectetuer libero luctus adipiscing.</p>
</blockquote>
<hr>
<p>Markdown allows you to be lazy and only put the &gt; before the first line of a hard-wrapped paragraph.</p>
<p>Code:</p>
<pre><code>&gt; This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

&gt; Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
</code></pre><p>Preview:</p>
<hr>
<blockquote>
<p>This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,<br>consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.<br>Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.</p>
<p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse<br>id sem consectetuer libero luctus adipiscing.</p>
</blockquote>
<hr>
<p>Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by adding additional levels of &gt;.</p>
<p>Code:</p>
<pre><code>&gt; This is the first level of quoting.
&gt;
&gt; &gt; This is nested blockquote.
&gt;
&gt; Back to the first level.
</code></pre><p>Preview:</p>
<hr>
<blockquote>
<p>This is the first level of quoting.</p>
<blockquote>
<p>This is nested blockquote.</p>
</blockquote>
<p>Back to the first level.</p>
</blockquote>
<hr>
<p>Blockquotes can contain other Markdown elements, including headers, lists, and code blocks.</p>
<p>Code:</p>
<pre><code>&gt; ## This is a header.
&gt;
&gt; 1.   This is the first list item.
&gt; 2.   This is the second list item.
&gt;
&gt; Here&apos;s some example code:
&gt;
&gt;     return shell_exec(&quot;echo $input | $markdown_script&quot;);
</code></pre><p>Preview:</p>
<hr>
<blockquote>
<h2 id="This-is-a-header"><a href="#This-is-a-header" class="headerlink" title="This is a header."></a>This is a header.</h2><ol>
<li>This is the first list item.</li>
<li>This is the second list item.</li>
</ol>
<p>Here’s some example code:</p>
<pre><code>return shell_exec(&quot;echo $input | $markdown_script&quot;);
</code></pre></blockquote>
<hr>
<h3 id="Lists"><a href="#Lists" class="headerlink" title="Lists"></a>Lists</h3><p>Markdown supports ordered (numbered) and unordered (bulleted) lists.</p>
<h4 id="Unordered"><a href="#Unordered" class="headerlink" title="Unordered"></a>Unordered</h4><p>HTML Tag: <code>&lt;ul&gt;</code></p>
<p>Unordered lists use <strong>asterisks (*)</strong>, <strong>pluses (+)</strong>, and <strong>hyphens (-)</strong>.</p>
<p>Code:</p>
<pre><code>*   Red
*   Green
*   Blue
</code></pre><p>Preview:</p>
<hr>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
<hr>
<p>is equivalent to:</p>
<p>Code:</p>
<pre><code>+   Red
+   Green
+   Blue
</code></pre><p>and:</p>
<p>Code:</p>
<pre><code>-   Red
-   Green
-   Blue
</code></pre><h4 id="Ordered"><a href="#Ordered" class="headerlink" title="Ordered"></a>Ordered</h4><p>HTML Tag: <code>&lt;ol&gt;</code></p>
<p>Ordered lists use numbers followed by periods:</p>
<p>Code:</p>
<pre><code>1.  Bird
2.  McHale
3.  Parish
</code></pre><p>Preview:</p>
<hr>
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>
<hr>
<p>It’s possible to trigger an ordered list by accident, by writing something like this:</p>
<p>Code:</p>
<pre><code>1986. What a great season.
</code></pre><p>Preview:</p>
<hr>
<ol>
<li>What a great season.</li>
</ol>
<hr>
<p>You can <strong>backslash-escape (\)</strong> the period:</p>
<p>Code:</p>
<pre><code>1986\. What a great season.
</code></pre><p>Preview:</p>
<hr>
<p>1986. What a great season.</p>
<hr>
<h4 id="Indented"><a href="#Indented" class="headerlink" title="Indented"></a>Indented</h4><h5 id="Blockquote"><a href="#Blockquote" class="headerlink" title="Blockquote"></a>Blockquote</h5><p>To put a blockquote within a list item, the blockquote’s &gt; delimiters need to be indented:</p>
<p>Code:</p>
<pre><code>*   A list item with a blockquote:

    &gt; This is a blockquote
    &gt; inside a list item.
</code></pre><p>Preview:</p>
<hr>
<ul>
<li><p>A list item with a blockquote:</p>
<blockquote>
<p>This is a blockquote<br>inside a list item.</p>
</blockquote>
</li>
</ul>
<hr>
<h5 id="Code-Block"><a href="#Code-Block" class="headerlink" title="Code Block"></a>Code Block</h5><p>To put a code block within a list item, the code block needs to be indented twice — <strong>8 spaces</strong> or <strong>two tabs</strong>:</p>
<p>Code:</p>
<pre><code>*   A list item with a code block:

        &lt;code goes here&gt;
</code></pre><p>Preview:</p>
<hr>
<ul>
<li><p>A list item with a code block:</p>
<pre><code>&lt;code goes here&gt;
</code></pre></li>
</ul>
<hr>
<h5 id="Nested-List"><a href="#Nested-List" class="headerlink" title="Nested List"></a>Nested List</h5><p>Code:</p>
<pre><code>* A
  * A1
  * A2
* B
* C
</code></pre><p>Preview:</p>
<hr>
<ul>
<li>A<ul>
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
<hr>
<h3 id="Code-Blocks"><a href="#Code-Blocks" class="headerlink" title="Code Blocks"></a>Code Blocks</h3><p>HTML Tag: <code>&lt;pre&gt;</code></p>
<p>Indent every line of the block by at least <strong>4 spaces</strong> or <strong>1 tab</strong>.</p>
<p>Code:</p>
<pre><code>This is a normal paragraph:

    This is a code block.
</code></pre><p>Preview:</p>
<hr>
<p>This is a normal paragraph:</p>
<pre><code>This is a code block.
</code></pre><hr>
<p>A code block continues until it reaches a line that is not indented (or the end of the article).</p>
<p>Within a code block, <strong><em>ampersands (&amp;)</em></strong> and angle <strong>brackets (&lt; and &gt;)</strong> are automatically converted into HTML entities.</p>
<p>Code:</p>
<pre><code>&lt;div class=&quot;footer&quot;&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre><p>Preview:</p>
<hr>
<pre><code>&lt;div class=&quot;footer&quot;&gt;
    &amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre><hr>
<p>Following sections Fenced Code Blocks and Syntax Highlighting are extensions, you can use the other way to write the code block.</p>
<h4 id="Fenced-Code-Blocks"><a href="#Fenced-Code-Blocks" class="headerlink" title="Fenced Code Blocks"></a>Fenced Code Blocks</h4><p>Just wrap your code in <figure class="highlight plain"><figcaption><span>``` ```` (as shown below) and you won't need to indent it by four spaces.</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">Code:</span><br><span class="line"></span><br><span class="line">    Here&apos;s an example:</span><br></pre></td></tr></table></figure></p>
<pre><code>function test() {
  console.log(&quot;notice the blank line before this function?&quot;);
}
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Preview:</span><br><span class="line">***</span><br><span class="line">Here&apos;s an example:</span><br></pre></td></tr></table></figure>
</code></pre><p>function test() {<br>  console.log(“notice the blank line before this function?”);<br>}<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">***</span><br><span class="line">#### Syntax Highlighting</span><br><span class="line">In your fenced block, add an optional language identifier and we&apos;ll run it through syntax highlighting ([Support Languages](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml)).</span><br><span class="line"></span><br><span class="line">Code:</span><br><span class="line"></span><br><span class="line">    ```ruby</span><br><span class="line">    require &apos;redcarpet&apos;</span><br><span class="line">    markdown = Redcarpet.new(&quot;Hello World!&quot;)</span><br><span class="line">    puts markdown.to_html</span><br></pre></td></tr></table></figure></p>
<p>Preview:</p>
<hr>
<figure class="highlight ruby"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">require</span> <span class="string">'redcarpet'</span></span><br><span class="line">markdown = Redcarpet.new(<span class="string">"Hello World!"</span>)</span><br><span class="line">puts markdown.to_html</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="Horizontal-Rules"><a href="#Horizontal-Rules" class="headerlink" title="Horizontal Rules"></a>Horizontal Rules</h3><p>HTML Tag: <code>&lt;hr /&gt;</code><br>Places <strong>three or more hyphens (-), asterisks (*), or underscores (_)</strong> on a line by themselves. You may use spaces between the hyphens or asterisks.</p>
<p>Code:</p>
<pre><code>* * *
***
*****
- - -
---------------------------------------
___
</code></pre><p>Preview:</p>
<hr>
<hr>
<hr>
<hr>
<h2 id=""><a href="#" class="headerlink" title="- - -"></a>- - -</h2><hr>
<hr>
<h3 id="Table"><a href="#Table" class="headerlink" title="Table"></a>Table</h3><p>HTML Tag: <code>&lt;table&gt;</code></p>
<p>It’s an extension.</p>
<p>Separates column by <strong>pipe (|)</strong> and header by <strong>dashes (-)</strong>, and uses <strong>colon (:)</strong> for alignment.</p>
<p>The outer <strong>pipes (|)</strong> and alignment are optional. There are <strong>3 delimiters</strong> each cell at least for separating header.</p>
<p>Code:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">| Left | Center | Right |</span><br><span class="line">|:-----|:------:|------:|</span><br><span class="line">|aaa   |bbb     |ccc    |</span><br><span class="line">|ddd   |eee     |fff    |</span><br><span class="line"></span><br><span class="line"> A | B</span><br><span class="line">---|---</span><br><span class="line">123|456</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">A |B</span><br><span class="line">--|--</span><br><span class="line">12|45</span><br></pre></td></tr></table></figure></p>
<p>Preview:</p>
<hr>
<table>
<thead>
<tr>
<th style="text-align:left">Left</th>
<th style="text-align:center">Center</th>
<th style="text-align:right">Right</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">aaa</td>
<td style="text-align:center">bbb</td>
<td style="text-align:right">ccc</td>
</tr>
<tr>
<td style="text-align:left">ddd</td>
<td style="text-align:center">eee</td>
<td style="text-align:right">fff</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>456</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>45</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="Span-Elements"><a href="#Span-Elements" class="headerlink" title="Span Elements"></a>Span Elements</h2><h3 id="Links"><a href="#Links" class="headerlink" title="Links"></a>Links</h3><p>HTML Tag: <code>&lt;a&gt;</code></p>
<p>Markdown supports two style of links: inline and reference.</p>
<h4 id="Inline"><a href="#Inline" class="headerlink" title="Inline"></a>Inline</h4><p>Inline link format like this: <code>[Link Text](URL &quot;Title&quot;)</code></p>
<p>Title is optional.</p>
<p>Code:</p>
<pre><code>This is [an example](http://example.com/ &quot;Title&quot;) inline link.

[This link](http://example.net/) has no title attribute.
</code></pre><p>Preview:</p>
<hr>
<p>This is <a href="http://example.com/" title="Title" target="_blank" rel="external">an example</a> inline link.</p>
<p><a href="http://example.net/" target="_blank" rel="external">This link</a> has no title attribute.</p>
<hr>
<p>If you’re referring to a local resource on the same server, you can use relative paths:</p>
<p>Code:</p>
<pre><code>See my [About](/about/) page for details.
</code></pre><p>Preview:</p>
<hr>
<p>See my <a href="/about/">About</a> page for details.</p>
<hr>
<h4 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h4><p>You could predefine link references. Format like this: <code>[id]: URL &quot;Title&quot;</code></p>
<p>Title is also optional. And the you refer the link, format like this: <code>[Link Text][id]</code></p>
<p>Code:</p>
<pre><code>[id]: http://example.com/  &quot;Optional Title Here&quot;
This is [an example][id] reference-style link.
</code></pre><p>Preview:</p>
<hr>
<p>This is <a href="http://example.com/" title="Optional Title Here" target="_blank" rel="external">an example</a> reference-style link.</p>
<hr>
<p>That is:</p>
<ul>
<li>Square brackets containing the link identifier (<strong>not case sensitive</strong>, optionally indented from the left margin using up to three spaces);</li>
<li>followed by a colon;</li>
<li>followed by one or more spaces (or tabs);</li>
<li>followed by the URL for the link;</li>
<li>The link URL may, optionally, be surrounded by angle brackets.</li>
<li>optionally followed by a title attribute for the link, enclosed in double or single quotes, or enclosed in parentheses.</li>
</ul>
<p>The following three link definitions are equivalent:</p>
<p>Code:</p>
<pre><code>[foo]: http://example.com/  &quot;Optional Title Here&quot;
[foo]: http://example.com/  &apos;Optional Title Here&apos;
[foo]: http://example.com/  (Optional Title Here)
[foo]: &lt;http://example.com/&gt;  &quot;Optional Title Here&quot;
</code></pre><p>Uses an empty set of square brackets, the link text itself is used as the name.</p>
<p>Code:</p>
<pre><code>[Google]: http://google.com/
[Google][]
</code></pre><p>Preview:</p>
<hr>
<p><a href="http://google.com/" target="_blank" rel="external">Google</a></p>
<hr>
<h3 id="Emphasis"><a href="#Emphasis" class="headerlink" title="Emphasis"></a>Emphasis</h3><p>HTML Tags: <code>&lt;em&gt;</code>, <code>&lt;strong&gt;</code></p>
<p>Markdown treats <strong>asterisks (*)</strong> and <strong>underscores (_)</strong> as indicators of emphasis. <strong>One delimiter</strong> will be  <code>&lt;em&gt;</code>; <em>*double delimiters</em> will be <code>&lt;strong&gt;</code>.</p>
<p>Code:</p>
<pre><code>*single asterisks*

_single underscores_

**double asterisks**

__double underscores__
</code></pre><p>Preview:</p>
<hr>
<p><em>single asterisks</em></p>
<p><em>single underscores</em></p>
<p><strong>double asterisks</strong></p>
<p><strong>double underscores</strong></p>
<hr>
<p>But if you surround an * or _ with spaces, it’ll be treated as a literal asterisk or underscore.</p>
<p>You can backslash escape it:</p>
<p>Code:</p>
<pre><code>\*this text is surrounded by literal asterisks\*
</code></pre><p>Preview:</p>
<hr>
<p>*this text is surrounded by literal asterisks*</p>
<hr>
<h3 id="Code"><a href="#Code" class="headerlink" title="Code"></a>Code</h3><p>HTML Tag: <code>&lt;code&gt;</code></p>
<p>Wraps it with <strong>backtick quotes (`)</strong>.</p>
<p>Code:</p>
<pre><code>Use the `printf()` function.
</code></pre><p>Preview:</p>
<hr>
<p>Use the <code>printf()</code> function.</p>
<hr>
<p>To include a literal backtick character within a code span, you can use <strong>multiple backticks</strong> as the opening and closing delimiters:</p>
<p>Code:</p>
<pre><code>``There is a literal backtick (`) here.``
</code></pre><p>Preview:</p>
<hr>
<p><code>There is a literal backtick (`) here.</code></p>
<hr>
<p>The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:</p>
<p>Code:</p>
<pre><code>A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``
</code></pre><p>Preview:</p>
<hr>
<p>A single backtick in a code span: <code>` </code></p>
<p>A backtick-delimited string in a code span: <code>`foo` </code></p>
<hr>
<h3 id="Images"><a href="#Images" class="headerlink" title="Images"></a>Images</h3><p>HTML Tag: <code>&lt;img /&gt;</code></p>
<p>Markdown uses an image syntax that is intended to resemble the syntax for links, allowing for two styles: inline and reference.</p>
<h4 id="Inline-1"><a href="#Inline-1" class="headerlink" title="Inline"></a>Inline</h4><p>Inline image syntax looks like this: <code>![Alt text](URL &quot;Title&quot;)</code></p>
<p>Title is optional.</p>
<p>Code:</p>
<pre><code>![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg &quot;Optional title&quot;)
</code></pre><p>Preview:</p>
<hr>
<p><img src="/path/to/img.jpg" alt="Alt text"></p>
<p><img src="/path/to/img.jpg" alt="Alt text" title="Optional title"></p>
<hr>
<p>That is:</p>
<ul>
<li>An exclamation mark: !;</li>
<li>followed by a set of square brackets, containing the alt attribute text for the image;</li>
<li>followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.</li>
</ul>
<h4 id="Reference-1"><a href="#Reference-1" class="headerlink" title="Reference"></a>Reference</h4><p>Reference-style image syntax looks like this: <code>![Alt text][id]</code></p>
<p>Code:</p>
<pre><code>[img id]: url/to/image  &quot;Optional title attribute&quot;
![Alt text][img id]
</code></pre><p>Preview:</p>
<hr>
<p><img src="url/to/image" alt="Alt text" title="Optional title attribute"></p>
<hr>
<h3 id="Strikethrough"><a href="#Strikethrough" class="headerlink" title="Strikethrough"></a>Strikethrough</h3><p>HTML Tag: <code>&lt;del&gt;</code></p>
<p>It’s an extension.</p>
<p>GFM adds syntax to strikethrough text.</p>
<p>Code:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">~~Mistaken text.~~</span><br></pre></td></tr></table></figure></p>
<p>Preview:</p>
<hr>
<p><del>Mistaken text.</del></p>
<hr>
<h2 id="Miscellaneous"><a href="#Miscellaneous" class="headerlink" title="Miscellaneous"></a>Miscellaneous</h2><h3 id="Automatic-Links"><a href="#Automatic-Links" class="headerlink" title="Automatic Links"></a>Automatic Links</h3><p>Markdown supports a shortcut style for creating “automatic” links for URLs and email addresses: simply surround the URL or email address with angle brackets.</p>
<p>Code:</p>
<pre><code>&lt;http://example.com/&gt;

&lt;address@example.com&gt;
</code></pre><p>Preview:</p>
<hr>
<p><a href="http://example.com/" target="_blank" rel="external">http://example.com/</a></p>
<p><a href="&#109;&#97;&#x69;&#x6c;&#116;&#111;&#58;&#x61;&#100;&#100;&#x72;&#101;&#x73;&#x73;&#64;&#x65;&#120;&#97;&#x6d;&#112;&#x6c;&#101;&#46;&#x63;&#111;&#x6d;">&#x61;&#100;&#100;&#x72;&#101;&#x73;&#x73;&#64;&#x65;&#120;&#97;&#x6d;&#112;&#x6c;&#101;&#46;&#x63;&#111;&#x6d;</a></p>
<hr>
<p>GFM will autolink standard URLs.</p>
<p>Code:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://github.com/emn178/markdown</span><br></pre></td></tr></table></figure></p>
<p>Preview:</p>
<hr>
<p><a href="https://github.com/emn178/markdown" target="_blank" rel="external">https://github.com/emn178/markdown</a></p>
<hr>
<h3 id="Backslash-Escapes"><a href="#Backslash-Escapes" class="headerlink" title="Backslash Escapes"></a>Backslash Escapes</h3><p>Markdown allows you to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown’s formatting syntax.</p>
<p>Code:</p>
<pre><code>\*literal asterisks\*
</code></pre><p>Preview:</p>
<hr>
<p>*literal asterisks*</p>
<hr>
<p>Markdown provides backslash escapes for the following characters:</p>
<p>Code:</p>
<pre><code>\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark
</code></pre><h2 id="Inline-HTML"><a href="#Inline-HTML" class="headerlink" title="Inline HTML"></a>Inline HTML</h2><p>For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.</p>
<p>Code:</p>
<pre><code>This is a regular paragraph.

&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Foo&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;

This is another regular paragraph.
</code></pre><p>Preview:</p>
<hr>
<p>This is a regular paragraph.</p>
<table><br>    <tr><br>        <td>Foo</td><br>    </tr><br></table>

<p>This is another regular paragraph.</p>
<hr>
<p>Note that Markdown formatting syntax is <strong>not processed within block-level HTML tags</strong>.</p>
<p>Unlike block-level HTML tags, Markdown syntax is <strong>processed within span-level tags</strong>.</p>
<p>Code:</p>
<pre><code>&lt;span&gt;**Work**&lt;/span&gt;

&lt;div&gt;
    **No Work**
&lt;/div&gt;
</code></pre><p>Preview:</p>
<hr>
<p><span><strong>Work</strong></span></p>
<p><div><br>  <strong>No Work</strong><br></div></p>
<hr>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">


</div>

    <a data-url="http://ppoffice.github.io/hexo-theme-icarus/2014/12/25/Markdown%20Example/" data-id="cincq2hwh000850vc2x65b105" class="article-share-link"><i class="fa fa-share"></i>Share</a>
<script>
    (function ($) {
        // Prevent duplicate binding
        if (typeof(__SHARE_BUTTON_BINDED__) === 'undefined' || !__SHARE_BUTTON_BINDED__) {
            __SHARE_BUTTON_BINDED__ = true;
        } else {
            return;
        }
        $('body').on('click', function() {
            $('.article-share-box.on').removeClass('on');
        }).on('click', '.article-share-link', function(e) {
            e.stopPropagation();

            var $this = $(this),
                url = $this.attr('data-url'),
                encodedUrl = encodeURIComponent(url),
                id = 'article-share-box-' + $this.attr('data-id'),
                offset = $this.offset(),
                box;

            if ($('#' + id).length) {
                box = $('#' + id);

                if (box.hasClass('on')){
                    box.removeClass('on');
                    return;
                }
            } else {
                var html = [
                    '<div id="' + id + '" class="article-share-box">',
                        '<input class="article-share-input" value="' + url + '">',
                        '<div class="article-share-links">',
                            '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="fa fa-twitter article-share-twitter" target="_blank" title="Twitter"></a>',
                            '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="fa fa-facebook article-share-facebook" target="_blank" title="Facebook"></a>',
                            '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="fa fa-pinterest article-share-pinterest" target="_blank" title="Pinterest"></a>',
                            '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="fa fa-google article-share-google" target="_blank" title="Google+"></a>',
                        '</div>',
                    '</div>'
                ].join('');

              box = $(html);

              $('body').append(box);
            }

            $('.article-share-box.on').hide();

            box.css({
                top: offset.top + 25,
                left: offset.left
            }).addClass('on');

        }).on('click', '.article-share-box', function (e) {
            e.stopPropagation();
        }).on('click', '.article-share-box-input', function () {
            $(this).select();
        }).on('click', '.article-share-box-link', function (e) {
            e.preventDefault();
            e.stopPropagation();

            window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
        });
    })(jQuery);
</script>

            
        <a href="http://ppoffice.github.io/hexo-theme-icarus/2014/12/25/Markdown%20Example/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://ppoffice.github.io/hexo-theme-icarus/2014/12/25/Markdown%20Example/">Comments</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/hexo-theme-icarus/2015/01/25/post3/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">Newer</strong>
            <div class="article-nav-title">
                
                    Decreasing the Use of Smartphones
                
            </div>
        </a>
    
    
        <a href="/hexo-theme-icarus/2014/12/02/Gabrielle-Aplin-with-The-Power-Of-Love/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">Older</strong>
            <div class="article-nav-title">Gabrielle Aplin with The Power Of Love</div>
        </a>
    
</nav>


</article>


    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">recent</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/hexo-theme-icarus/2016/04/23/post2/" class="thumbnail">
    
    
        <span style="background-image:url(/hexo-theme-icarus/gallery/shoes.jpg)" alt="Being Outside in Fresh Air &amp; How Your Body Loves It" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/hexo-theme-icarus/categories/LifeStyle/">LifeStyle</a></p>
                            <p class="item-title"><a href="/hexo-theme-icarus/2016/04/23/post2/" class="title">Being Outside in Fresh Air &amp; How Your Body Loves It</a></p>
                            <p class="item-date"><time datetime="2016-04-23T04:10:48.046Z" itemprop="datePublished">2016-04-23</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/hexo-theme-icarus/2016/04/23/post1/" class="thumbnail">
    
    
        <span style="background-image:url(/hexo-theme-icarus/gallery/salt-lake.jpg)" alt="Take a Deep Breath and Just Be" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/hexo-theme-icarus/categories/LifeStyle/">LifeStyle</a></p>
                            <p class="item-title"><a href="/hexo-theme-icarus/2016/04/23/post1/" class="title">Take a Deep Breath and Just Be</a></p>
                            <p class="item-date"><time datetime="2016-04-23T04:10:48.045Z" itemprop="datePublished">2016-04-23</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/hexo-theme-icarus/2015/02/03/Independent-Artists-Make-Their-Own-Way-Without-Big-Record-Labels/" class="thumbnail">
    
    
        <span style="background-image:url(/hexo-theme-icarus/gallery/guitarist.jpg)" alt="Independent Artists Make Their Own Way Without Big Record Labels" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/hexo-theme-icarus/categories/Music/">Music</a></p>
                            <p class="item-title"><a href="/hexo-theme-icarus/2015/02/03/Independent-Artists-Make-Their-Own-Way-Without-Big-Record-Labels/" class="title">Independent Artists Make Their Own Way Without Big Record Labels</a></p>
                            <p class="item-date"><time datetime="2015-02-03T09:29:25.000Z" itemprop="datePublished">2015-02-03</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/hexo-theme-icarus/2015/02/03/Starting-to-Actually-Listen-to-The-Lyrics-in-Music/" class="thumbnail">
    
    
        <span style="background-image:url(/hexo-theme-icarus/gallery/music2.jpg)" alt="Starting to Actually Listen to The Lyrics in Music" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/hexo-theme-icarus/categories/Music/">Music</a></p>
                            <p class="item-title"><a href="/hexo-theme-icarus/2015/02/03/Starting-to-Actually-Listen-to-The-Lyrics-in-Music/" class="title">Starting to Actually Listen to The Lyrics in Music</a></p>
                            <p class="item-date"><time datetime="2015-02-03T09:27:36.000Z" itemprop="datePublished">2015-02-03</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/hexo-theme-icarus/2015/02/03/An-Ode-To-Earth-–-Baba-Yetu/" class="thumbnail">
    
    
        <span style="background-image:url(/hexo-theme-icarus/gallery/little-girl.jpg)" alt="An Ode To Earth – Baba Yetu" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/hexo-theme-icarus/categories/Music/">Music</a></p>
                            <p class="item-title"><a href="/hexo-theme-icarus/2015/02/03/An-Ode-To-Earth-–-Baba-Yetu/" class="title">An Ode To Earth – Baba Yetu</a></p>
                            <p class="item-date"><time datetime="2015-02-03T09:22:23.000Z" itemprop="datePublished">2015-02-03</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
    <div class="widget-wrap">
        <h3 class="widget-title">categories</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/hexo-theme-icarus/categories/LifeStyle/">LifeStyle</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/hexo-theme-icarus/categories/Music/">Music</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/hexo-theme-icarus/categories/Technology/">Technology</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/hexo-theme-icarus/categories/Technology/Github/">Github</a><span class="category-list-count">1</span></li></ul></li></ul>
        </div>
    </div>

    
    <div class="widget-wrap">
        <h3 class="widget-title">archives</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/hexo-theme-icarus/archives/2016/04/">April 2016</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/hexo-theme-icarus/archives/2015/02/">February 2015</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/hexo-theme-icarus/archives/2015/01/">January 2015</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/hexo-theme-icarus/archives/2014/12/">December 2014</a><span class="archive-list-count">2</span></li></ul>
        </div>
    </div>

    
    <div class="widget-wrap">
        <h3 class="widget-title">tags</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/hexo-theme-icarus/tags/Music/">Music</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/hexo-theme-icarus/tags/Research/">Research</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/hexo-theme-icarus/tags/markdown/">markdown</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
    <div class="widget-wrap">
        <h3 class="widget-title">tag cloud</h3>
        <div class="widget tagcloud">
            <a href="/hexo-theme-icarus/tags/Music/" style="font-size: 20px;">Music</a> <a href="/hexo-theme-icarus/tags/Research/" style="font-size: 10px;">Research</a> <a href="/hexo-theme-icarus/tags/markdown/" style="font-size: 10px;">markdown</a>
        </div>
    </div>

    
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">links</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2016 PPOffice<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="http://github.com/ppoffice">PPOffice</a>
        </div>
    </div>
</footer>
        
    
    <script>
    var disqus_shortname = 'hexo-theme-icarus';
    
    
    var disqus_url = 'http://ppoffice.github.io/hexo-theme-icarus/2014/12/25/Markdown%20Example/';
    
    (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    </script>


        <script src="/hexo-theme-icarus/vendor/fancybox/jquery.fancybox.pack.js"></script>
    

<!-- Custom Scripts -->
<script src="/hexo-theme-icarus/js/main.js"></script>

    </div>
</body>
</html>