Rohit Arora
sample post on liveroot blog
The following describes how to write a post on the blog.
1. The Header:
First step is to add the following header on the top:
---
layout: post
title: [title]
description: [description]
date: yyyy-mm-dd HH:MM:SS
favorite: [true or false]
tags: [tag 1, tag 2]
---
- Set a title at [title].
- Set a description at [description].
- Set a date/time in the format: yyyy-mm-dd HH:MM:SS.
- Mark if the post is a favorite or not.
- Pick a tag from the following section:
Categories / Series:
- literature: books, stories, ideas
- opinion: real_world, new_cool_tech
- introspection: hindsight, future, canvas
- travel: americas, europe, asia, australia, carribean, africa
- learning: android, firmware, wireless, networking, software, sdn
- projects: money, fitness, astro, music, others
- reviews: drinks, shows
- ambition2020: data-structures, system-design, object-oriented-design, coding-patterns, recursion, dynamic-programming, big-o-notation, java-multithreading
- To change the categories, edit _data/categories.yml
- To change the series in a category, edit _data/series.yml
2. The Body:
Next step is to write the conent of the post. Following sections give more details on how to specify links, formatting, add images etc to your post.
Formatting:
A. Bold:
**abc**
shows like: abc
B. Italics:
*abc*
shows like: abc
C. Bullet points:
* abc
shows like:
- abc
D. Heading 1:
# H1
shows like:
H1
E. Heading 2:
## H2
shows like:
H2
F. Heading 3:
### H3
shows like:
H3
G. Heading 4:
#### H4
shows like:
H4
H. Heading 5:
#### H5
shows like:
H5
Blockquotes
Adding Blockquoutes to the post
<blockquote>
ABRACADABRA
</blockquote>
shows like:
ABRACADABRA
Lists
A. Adding Ordered List to the post
<ol>
<li>hello</li>
<li>world</li>
</ol>
shows like:
- hello
- world
B. Adding Unordered List to the post
<ul>
<li>hello</li>
<li>world</li>
</ul>
shows like:
- hello
- world
OR simply
* hello
* world
shows like:
- hello
- world
Tables:
A: Regular Table with header, 2 rows and 2 columns
|Title 1| Title 2 |
|--- |--- |
|Val 1 |Val 2 |
|Val 3 |Val 4 |
shows like:
| Title 1 | Title 2 |
|---|---|
| Val 1 | Val 2 |
| Val 3 | Val 4 |
B: Left Aligned Table with 1 column:
|Left Aligned|
|:--- |
|Val 1 |
|Val 2 |
shows like:
| Left Aligned |
|---|
| Val 1 |
| Val 2 |
C: Right Aligned Table with 1 column:
|Right Aligned|
|---: |
|Val 1 |
|Val 2 |
shows like:
| Right Aligned |
|---|
| Val 1 |
| Val 2 |
D: Center Aligned Table with 1 column:
|Center Aligned|
|:---: |
|Val 1 |
|Val 2 |
shows like:
| Center Aligned |
|---|
| Val 1 |
| Val 2 |
E: Justified Aligned Table with 1 column:
|Justified Aligned|
|--- |
|Val 1 |
|Val 2 |
shows like:
| Justified Aligned |
|---|
| Val 1 |
| Val 2 |
Code:
You may specify Code like follows:
{% highlight c++ (or python) %}
code code code
{% endhighlight %}
shows like:
int main(int argc, char const *argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}Links:
Specify links like this:
| Link Style | Example |
|---|---|
| Direct: | <a href="https://www.google.com">Google</a> |
| In-line Style: | [I'm an inline-style link](https://www.google.com) |
| Reference Style (Numbers): | [Google][1] [1]: http://www.google.com |
| Reference Style (Arbitrary Text): | [Google][Arbitrary Text] [Arbitrary Text]: http://www.google.com |
| Reference Style (Link text): | [www.google.com] [www.google.com]: https://google.com |
| New Tab for Markdown links: | [Google](https://www.google.com){:target="_blank"} |
| New Tab for Direct links: | <a href="https://www.google.com" target="blank">Google</a> |
Images:
You may use one of the following div classes to define a division to hold an image or an image caption:
<div class = "img_row"></div>
<div class = "caption"></div>
Specify span width of an image or a caption div like follows:
<img class="col one" src="/assets/img/backgrounds/11.jpg">
<img class="col two" src="/assets/img/backgrounds/11.jpg">
<img class="col three" src="/assets/img/backgrounds/11.jpg">
---
<div class="col one caption"></div>
<div class="col two caption"></div>
<div class="col three caption"></div>
Full examples:
A. Example 1: Image spanning 3 columns with a caption.
<div class="img_row">
<img class="col three" src="/assets/img/backgrounds/9.jpg">
</div>
<div class="col three caption">
A simple, elegant caption looks good between image rows.
</div>
shows like:
B: Example 2: Adding 2 images, first spanning 2 columns and second spanning 1 column, without a caption.
<div class="img_row">
<img class="col two" src="/assets/img/backgrounds/8.jpg">
<img class="col one" src="/assets/img/backgrounds/10.jpg">
</div>
shows like:
C: Example 3: Adding 3 images, each spanning 1 column, wihout a caption.
<div class="img_row">
<img class="col one" src="/assets/img/backgrounds/11.jpg">
<img class="col one" src="/assets/img/backgrounds/12.jpg">
<img class="col one" src="/assets/img/backgrounds/7.jpg">
</div>
shows like:
D. Example 4: Adding 4 image rows, each with captions
<div class="img_row">
<img class="col two" src="/assets/img/backgrounds/12.jpg">
<img class="col one" src="/assets/img/backgrounds/7.jpg">
</div>
<div class="col three caption">
A simple, elegant caption looks good between image rows.
</div>
<div class="img_row">
<img class="col three" src="/assets/img/backgrounds/11.jpg">
</div>
<div class="col three caption">
A simple, elegant caption looks good between image rows.
</div>
<div class="img_row">
<img class="col two" src="/assets/img/backgrounds/11.jpg">
</div>
<div class="col two caption">
A simple, elegant caption looks good between image rows.
</div>
<div class="img_row">
<img class="col one" src="/assets/img/backgrounds/11.jpg">
</div>
<div class="col one caption">
A simple, elegant caption looks good between image rows.
</div>
shows like: