Showcases all elements, stylin and profilin .

Table of Content

• Headers
• Paragraph Text
• Blockquotes
• Blockquote with markdown elements
• Inline Text
• Code
• GitHub Gists
• Lists
• Tables
• Images

Headers

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Top ↑

Paragraph text

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

Top ↑

Blockquotes

Single Blockquote

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Two paragraph Blockquote

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.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Nested Blockquote

This is the first level of quoting.

This is a nested blockquote.

Back to the first level.

Top ↑

Blockquote with markdown elements

This is a header

1. This is the first list item.
2. This is the second list item.

Here’s some example code:

return shell_exec("echo $input | $markdown_script")

Top ↑

Inline Text

• Bold text
• Italicize text
• Abbr (abbreviation)
• Citation
• Deleted
• Underlined
• Superscript ^text
• Subscript _text

Top ↑

Code

package io.todos;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebUI {
    public static void main(String[] args) {
      SpringApplication.run(WebUI.class, args);
    }
}

db.orders.find(
   { price: { $gt: 5000, $lte: 10000 }, cust_id: "mickey@mouse.com" }
)

SELECT *
FROM orders
WHERE cust_id = "mickey@mouse.com"
AND   price > 5000
AND   price <= 10000

Top ↑

GitHub Gists

Top ↑

Lists

• One fish
• Two fish
• Red fish

• Blue fish

• One fish
  • Two fish
    • Red fish
      • Blue fish

1. One fish
2. Two fish
3. Red fish
4. Blue fish

Top ↑

Tables

Basic Table

See: Github markdown tables

Player	BA	HR
Hank Aaron	.305	755
Babe Ruth	.342	714
Mookie Wilson	.274	67

Table with formatted content

Command	Description
git rm	Remove a file from the index
git status	List all new or modified files
git diff	Show file differences that haven’t been staged

Table with cell alignment

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff

Top ↑

Images

CSS Styled Images

<img class="image" src="bucky-sleepy.png" width="300" height="300">

<img class="image-circle" src="bucky-sleepy.png" width="300" height="300">

<img class="image-thumbnail" src="bucky-sleepy.png">

<a href="https://corbs.io/about" target="_blank">
  <img class="image-thumbnail-link" src="bucky-sleepy.png">
</a>

<img class="image-responsive" src="bucky-sleepy.png">

<img class="image-center" src="bucky-sleepy.png">

<div class="image-polaroid">
  <img src="bucky-sleepy.png" class="pic">
  <div class="footer">
    <p>Laying on the front porch, <i>"BIG yawn Bucky"</i> gets ready for a nap in Broken Bow Oklahoma.</p>
  </div>
</div>

Laying on the front porch, "BIG yawn Bucky" gets ready for a nap in Broken Bow Oklahoma.

<figure>
    <img class="image" src="bucky-sleepy.png">
    <figcaption>BIG yawn Bucky gets ready for a nap.</figcaption>
</figure>

BIG yawn Bucky gets ready for a nap.

<img class="image-transparent-25" src="bucky-sleepy.png">

<img class="image-transparent-50" src="bucky-sleepy.png">

<img class="image-transparent-75" src="bucky-sleepy.png">

<div class="image-container" data-overlay="fade-text">
  <img src="bucky-sleepy.png" class="image">
  <div class="overlay">
    <div class="text">BIG yawn Bucky!</div>
  </div>
</div>

BIG yawn Bucky!

Markdown Images

The samples below demonstrate using kramdown to render images, kramdown is the default markdown converter for Jekyll.

![BIG yawn Bucky](bucky-sleepy.png "Sleepy Bucky")

![BIG yawn Bucky](bucky-sleepy.png "Sleepy Bucky"){:height="300" width="300"}

![BIG yawn Bucky](bucky-sleepy.png "Sleepy Bucky"){:height="300" width="300" .image-circle}

Top ↑

Image Grid