Jay Chakalasiya

Jay Chakalasiya

A curious soul with love for science and appetite for fun

Front Matter

  layout: single #splash, posts, archive
  classes: #wide
  author_profile: true

  read_time: true
  comments: # true
  share: true
  related: true
  show_date: true

  search: true

  toc:  true
  toc_sticky: true # to make toc move with the scrolling
  toc_label:  "Table of Contents"
  toc_icon: "fas fa-scroll"

  header:
    overlay_image:/assets/images/defaults/default-header.jpg
    caption:  "Photo credits"
    overlay_filter: "0.5" # by default black; can also use colors like: rgba(255, 0, 0, 0.5)
    actions:    # to create a button in the overaly, (may be to point to code repo or reference)
        - label: "More Info"
          url: "https://unsplash.com"
  
  excerpt: "Please Add a Good Excerpt Here"

  title: "An Awesome post title"
  tags:
    - First Tag
  categories:
    - First category

Headings

Test Heading

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Heading has to come in order to make them properly organized in Table Of Contents. Heading 2 is customized for this Jekyll site to be used as headings, It will automatically draw a horizontal ruler to make it look more appealing.

As best practices for the text/paragraph, don't start with tab or spaces. Add a blank line to add a linebreak in the rendered output or end the line with 2 or more spaces.

Text-Formatting

Emphasis Code
Bold **Bold**
Italic _Italic_
Bold & Italic **_Bold & Italic_**
Inline code Inline code

Text-Alignment

Some Text

Some Text
{: style="text-align: left;"}

Some Text
{: style="text-align: center;"}

Some Text
{: style="text-align: right;"}

Some Text
{: style="text-align: justify;"}

Some Text

Some Text

Some Text

Some Text

Some Text

Blockquotes

> This is a Block Quote

This is a Block Quote

Block quotes could be written in multiple paragraphs, by staring all lines with >, There could be Quote inside quote using >>. Quotes can includes all other markdown elements as well.

Lists

Ordered List

1. First Item
    1. First Sub-Item    
       Can add Paragraph inside the listitem
    2. Second Sub-Item
       > can have blockquotes inside as well
2. Second Item
3. Third Item
4. Fourth Item
  1. First Item
    1. First Sub-Item
      Can add Paragraph inside the listitem
    2. Second Sub-Item

      can have blockquotes inside as well

  2. Second Item
  3. Third Item
  4. Fourth Item

Unordered List

- First Item
    - First Sub-Item    
      Can add Paragraph inside the listitem
    - Second Sub-Item
      > can have blockquotes inside as well
- Second Item
+ Third Item
* Fourth Item
  • First Item
    • First Sub-Item
      Can add Paragraph inside the listitem
    • Second Sub-Item

      can have blockquotes inside as well

  • Second Item
  • Third Item
  • Fourth Item

Its best practice to use one delimiter in the unordered list, the example is just to show the possibilities.

Code-Blocks

\```python
    import numpy as np
    print(np.array([1,2,3]))
\```

    import numpy as np
    print(np.array([1,2,3]))

Ignore the \ symbol, Other laguages are also supported like ruby, java, c, markdown, etc.

GitHub Flavored Markdown fenced code blocks are supported. To modify styling and highlight colors edit /_sass/syntax.scss.

GitHub Gist Embed

{% gist jay-chakalasiya/1400a5264cfcc394efae3130542d23dd %}

<script src="https://gist.github.com/jay-chakalasiya/1400a5264cfcc394efae3130542d23dd.js"></script>

Images

![Some Image](/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/sample.jpg)

Some Image

<img src="https://jay-chakalasiya.github.io/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/sample.jpg" alt="">

Image Alignments

![left-aligned-image](/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/small-image.png){: .align-left}    
The written after the image will take up the right space left in the rendering.
or
<img src="/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/small-image.png" class="align-left" alt="">    
The written after the image will take up the right space left in the rendering.

left-aligned-image
The written after the image will take up the right space left in the rendering.

Just make sure that image is squarish & small enough to give some writing space on the right side, else it might take up whole space

Other options

![center-aligned-image](/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/small-image.png){: .align-center}
![right-aligned-image](/assets/images/2020-11-16-How-to-Use-Jekyll-Posts/small-image.png){: .align-right}

Html code can also be used juse replace align-left with align-center & align-right in the provided html code above.

Referencing

Some-text [^1]

[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>

Some-text 1

Horizontal Rules

***
___
____________________________________

You are at [jay-chakalasiya.github.io](https://jay-chakalasiya.github.io).

You are at jay-chakalasiya.github.io.

Or you can do this with adding title

You are at [jay-chakalasiya.github.io](https://jay-chakalasiya.github.io "The best github blog, JK :p").

You are at jay-chakalasiya.github.io.

Internal Content Links

[Random Post][random-post]
[random-post]: {{ base_path }}{% post_url 2020-11-16-How-to-Use-Jekyll-Posts %}

Random Post

URLs & Email Addresses

<https://jay-chakalasiya.github.io>
<sample@gnail.com>

https://jay-chakalasiya.github.io
sample@gmail.com

Tables

| Align Left Column      | Align Center Column    | Align Right Column  |
| ---------------------- | :--------------------: | ------------------: |
| Row1                   | Row1                   | Row1                |
| Row2                   | Row2                   | Row2                |
| Row3                   | Row3                   | Row3                |
| Row4                   | Row4                   | Row4                |
Align Left Column Align Center Column Align Right Column
Row1 Row1 Row1
Row2 Row2 Row2
Row3 Row3 Row3
Row4 Row4 Row4

Buttons

<a href="#" class="btn btn--primary">Primary Button</a>
<a href="#" class="btn btn--success">Success Button</a>
<a href="#" class="btn btn--warning">Warning Button</a>
<a href="#" class="btn btn--danger">Danger Button</a>
<a href="#" class="btn btn--info">Info Button</a>

Primary Button
Success Button
Warning Button
Danger Button
Info Button

[Default Button Text](#link){: .btn}
[Primary Button Text](#link){: .btn .btn--primary}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

Default Button Text
Primary Button Text
Success Button Text
Warning Button Text
Danger Button Text
Info Button Text
Inverse Button
Light Outline Button

[X-Large Button](#link){: .btn .btn--primary .btn--x-large}
[Large Button](#link){: .btn .btn--primary .btn--large}
[Default Button](#link){: .btn .btn--primary }
[Small Button](#link){: .btn .btn--primary .btn--small}

X-Large Button
Large Button
Default Button
Small Button

Notices

**Some Notice:** Notice Paragraph will go here...  
{: .notice}

Some Notice: Notice Paragraph will go here…

Primary

{: .notice--primary}

Some Notice: Notice Paragraph will go here…

Info

{: .notice--info}

Some Notice: Notice Paragraph will go here…

Warning

{: .notice--warning}

Some Notice: Notice Paragraph will go here…

Danger

{: .notice--danger}

Some Notice: Notice Paragraph will go here…

Success

{: .notice--success}

Some Notice: Notice Paragraph will go here…

Longer Notices

Wrap them into capture elemets

{% capture notice-2 %}
#### Some Heading element inside    
* You can have lists as well
{% endcapture %}

<div class="notice">{{ notice-2 | markdownify }}</div>

Some Heading element inside

  • You can have lists as well

File Structrue Tree

    tree /a /f > output.txt

References

All the referecnes attached above will be visible at the end of the document.

  1. http://en.wikipedia.org/wiki/Syntax_highlighting ↩

You may also enjoy