Markdown Syntax

HTML Elements

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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam.

{: .image-right}

This is emphasized. 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.

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.

Blockquotes

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.

List Types

Ordered Lists

1. Item one
   1. sub item one
   2. sub item two
   3. sub item three
2. Item two

Unordered Lists

• Item one
• Item two
• Item three

Tables

Header1	Header2	Header3
cell1	cell2	cell3
cell4	cell5	cell6
----
cell1	cell2	cell3
cell4	cell5	cell6
=====
Foot1	Foot2	Foot3
{: rules="groups"}

Code Snippets

{% highlight css %} #container { float: left; margin: 0 -240px 0 0; width: 100%; } {% endhighlight %}

Buttons

Make any link standout more when applying the .btn class.

{% highlight html %} Success Button {% endhighlight %}

Primary Button

Success Button

Warning Button

Danger Button

Info Button

KBD

You can also use <kbd> tag for keyboard buttons.

{% highlight html %} WASD {% endhighlight %}

Press WASD to move your car. Midtown Maddness!!

Notices

Watch out! You can also add notices by appending {: .notice} to a paragraph. {: .notice}

MathJax

MathJax is a simple way of including Tex/LaTex/MathML based mathematics in HTML webpages. To get up and running you need to include the MathJax script in the header of your github pages page, and then write some maths. For LaTex, there are two delimiters you need to know about, one for block or displayed mathematics \[ ... \], and the other for inline mathematics \( ... \).

Usage

To enable MathJax support be sure Kramdown is your Markdown flavor of choice and MathJax is set to true in your _config.yml file.

markdown: kramdown
mathjax: true

Here is an example MathJax inline rendering \\( 1/x^{2} \\), and here is a block rendering: 
\\[ \frac{1}{n^{2}} \\]

Here is an example MathJax inline rendering \( 1/x^{2} \), and here is a block rendering: \[ \frac{1}{n^{2}} \]

The only thing to look out for is the escaping of the backslash when using markdown, so the delimiters become \\[ ... \\] and \\( ... \\) for inline and block maths respectively.

$$ \begin{align*} & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\ & (x_1, \ldots, x_n) \left( \begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array} \right) \left( \begin{array}{c} y_1 \\ \vdots \\ y_n \end{array} \right) \end{align*} $$

Moon Jekyll Theme

Installation

• Fork the Moon repo
• Edit _config.yml file.
• Remove sample posts from _posts folder and add yours.
• Edit index.md file in about folder.
• Change repo name to YourUserName.github.io

That's all.

Preview

{% capture images %} https://cloud.githubusercontent.com/assets/754514/14509716/61ac6c8e-01d6-11e6-879f-8308883de790.png https://cloud.githubusercontent.com/assets/754514/14509717/61ad05ae-01d6-11e6-85ae-5a817dd8763b.png https://cloud.githubusercontent.com/assets/754514/14509714/61a89708-01d6-11e6-8fcd-74b002a060df.png {% endcapture %} {% include gallery images=images caption="Screenshots of Moon Theme" cols=3 %}

---

{% capture images %} https://cloud.githubusercontent.com/assets/754514/14509718/61b09a20-01d6-11e6-8da1-4202ae4d83cd.png https://cloud.githubusercontent.com/assets/754514/14509715/61aa9d00-01d6-11e6-81a6-c6837edf2e84.png {% endcapture %} {% include gallery images=images caption="Moon Theme on Small Screen Size" cols=2 %}

See a live version of Moon hosted on GitHub.

Site Setup

A quick checklist of the files you’ll want to edit to get up and running.

Site Wide Configuration

_config.yml is your friend. Open it up and personalize it. Most variables are self explanatory but here's an explanation of each if needed:

title

The title of your site... shocker!

Example title: My Awesome Site

bio

The description to show on your homepage.

description

The description to use for meta tags and navigation menu.

url

Used to generate absolute urls in sitemap.xml, feed.xml, and for generating canonical URLs in <head>. When developing locally either comment this out or use something like http://localhost:4000 so all assets load properly. Don't include a trailing /.

Examples:

{% highlight yaml %} url: http://taylantatli.me/Moon url: http://localhost:4000 url: //cooldude.github.io url: {% endhighlight %}

reading_time

Set true to show reading time for posts. And set words_per_minute, default is 200.

logo

Your site's logo. It will show on homepage and navigation menu. Also used for twitter meta tags.

background

Image for background. If you don't set it, color will be used as a background.

Google Analytics and Webmaster Tools

Google Analytics UA and Webmaster Tool verification tags can be entered in _config.yml. For more information on obtaining these meta tags check Google Webmaster Tools and Bing Webmaster Tools support.

MathJax

It's enabled. But if you don't want to use it. Set it false in _config.yml.

Disqus Comments

Set your disqus shortname in _config.yml to use comments.

---

Navigation Links

To set what links appear in the top navigation edit _data/navigation.yml. Use the following format to set the URL and title for as many links as you'd like. External links will open in a new window.

{% highlight yaml %}

• title: Home url: /

• title: Blog url: /blog/

• title: Projects url: /projects/

• title: About url: /about/

• title: Moon url: http://taylantatli.me/Moon {% endhighlight %}

---

Layouts and Content

Moon Theme use Jekyll Compress to compress html output. But it can cause errors if you use "linenos" (line numbers). I suggest don't use line numbers for codes, because it won't look good with this theme, also i didn't give a proper style for them. If you insist to use line numbers, just remove layout: compress string from layouts. It will disable compressing.

Feature Image

You can set feature image per post. Just add feature: some link to your post's front matter.

feature: /assets/img/some-image.png
or
feaure: http://example.com/some-image.png

This also will be used for twitter card:

Comments

To show disqus comments for your post add comments: true to your post's front matter.

---

Questions?

Found a bug or aren't quite sure how something works? By all means file a GitHub Issue. And if you make something cool with this theme feel free to let me know.