First Sample Post as Jekyll Cheat Sheet.
#Jekyll Markdown Quick Reference
####Write in simply awesome markdown
layout: post
title: Markdown Style Guide
---
This is a demo of all styled elements in Jekyll Now.
[View the markdown used to create this post](https://raw.githubusercontent.com/barryclark/www.jekyllnow.com/gh-pages/_posts/2014-6-19-Markdown-Style-Guide.md).
This is a paragraph, it's surrounded by whitespace. Next up are some headers, they're heavily influenced by GitHub's markdown style.
## Header 2 (H1 is reserved for post titles)##
### Header 3
#### Header 4
A link to [Jekyll Now](http://github.com/barryclark/jekyll-now/). A big ass literal link <http://github.com/barryclark/jekyll-now/>
An image, located within /images
* A bulletted list
- alternative syntax 1
+ alternative syntax 2
- an indented list item
1. An
2. ordered
3. list
Inline markup styles:
- _italics_
- **bold**
- `code()`
> Blockquote
>> Nested Blockquote
Syntax highlighting can be used by wrapping your code in a liquid tag like so:
{% highlight javascript %}
/* Some pointless Javascript */
var rawr = ["r", "a", "w", "r"];
{% endhighlight %}
creates...
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="cm">/* Some pointless Javascript */</span>
<span class="kd">var</span> <span class="nx">rawr</span> <span class="o">=</span> <span class="p">[</span><span class="dl">"</span><span class="s2">r</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">a</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">w</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">r</span><span class="dl">"</span><span class="p">];</span></code></pre></figure>
Use two trailing spaces
on the right
to create linebreak tags
Finally, horizontal lines
----
****
####See below for how it beautifully renders in HTML 😉
layout: post title: Markdown Style Guide —
This is a demo of all styled elements in Jekyll Now.
View the markdown used to create this post.
This is a paragraph, it’s surrounded by whitespace. Next up are some headers, they’re heavily influenced by GitHub’s markdown style.
Header 2 (H1 is reserved for post titles)##
Header 3
Header 4
A link to Jekyll Now. A big ass literal link http://github.com/barryclark/jekyll-now/
An image, located within /images
- A bulletted list
- alternative syntax 1
- alternative syntax 2
- an indented list item
- An
- ordered
- list
Inline markup styles:
- italics
- bold
code()
Blockquote
Nested Blockquote
Syntax highlighting can be used by wrapping your code in a liquid tag like so:
{% highlight javascript %}
/* Some pointless Javascript */
var rawr = [“r”, “a”, “w”, “r”];
{% endhighlight %}
creates…
/* Some pointless Javascript */
var rawr = ["r", "a", "w", "r"];Use two trailing spaces
on the right
to create linebreak tags
Finally, horizontal lines
This post has a manual excerpt <!--more--> set after the second paragraph. The following YAML Front Matter has also be applied:
excerpt_separator: "<!--more-->"
A notice displays information that explains nearby content. Often used to call attention to a particular detail.
When using Kramdown {: .notice} can be added after a sentence to assign the .notice to the <p></p> element.
Changes in Service: We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
Primary Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Info Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Warning Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Danger Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Success Notice: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.
{% capture notice-2 %}
#### New Site Features
* You can now have cover images on blog pages
* Drafts will now auto-save while writing
{% endcapture %}
<div class="notice">{{ notice-2 | markdownify }}</div>
New Site Features
- You can now have cover images on blog pages
- Drafts will now auto-save while writing
Or you could skip the capture and stick with straight HTML.
<div class="notice">
<h4>Message</h4>
<p>A basic message.</p>
</div>
Message
A basic message.
Only one thing is impossible for God: To find any sense in any copyright law on the planet.