Markdown Reference

3 minute read

Color Pallet

HEX : #b51b58
RGB : 181, 27, 88
CMYK : 0, 85, 51, 29

HEX : #1bb578
RGB : 27, 181, 120
CMYK : 85, 0, 34, 29

colorPallete.png

Add Table of contents

  • right side Index bar (on this blog)

    {% include toc title="Index" %}

  • simply add toc: true on the front matter.
    • Has some issues when the page is long
  • Contents {:.no_toc}
    • Will be replaced with the ToC, excluding the “Contents” header {:toc}

Escape Liquid template tags in Jekyll posts

  • Use backtick(`) to display a liquid tag as a span of code .

  • to begin {% raw %} and end with {% endraw %}
  • Another way to escape {{ tag }}

Include gists

Include code as a gist into the Jekyll post. Uses jekyll-gist plugin.

{% gist nitinkc/8a3eb81f7ccf93b013a2fe8455a04703 %}

Hyperlinks

External links

  • Open link in another tab [Try me for another Tab](https://www.google.com/){:target="_blank"}
  • Open link in same tab [Link title](https://www.google.com/)

If you’re building your pages with Markdown, use the following examples to generate internal links.

Image

in a post from specific folder ![Image Text](https://nitinkc.github.io//assets/images/image.png)

Resize an image

  • <img src="assets/images/image.png" width="300" height="200">

    ![platformThreads.png](../../../assets/images/platformThreads.png){:width="70%" height="50%"}

Video

<iframe
src="https://www.youtube.com/embed/1yaUn_PhlM8"
title="git revert - local and remote" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>

using Spaceship jekyll plugin

![](https://www.youtube.com/watch?v=I6jB0nM9SKU)

Insert Table

**Jekyll Spaceship plugin Table ** https://github.com/jeffreytse/jekyll-spaceship?tab=readme-ov-file#1-table-usage

| Left Aligned Header 1  | Center Aligned Header                 | 
|:-----------------------|:-------------------------------------:|      
| ⌘E     	             | Move to the last location you edited. |
| ⌘  + 1  	             | It activates the quick fix.           |

Add Sidebar Navigation

In the header tag add

---
sidebar:
  nav: "algo"
---

Embed pdf document

<object data="https://nitinkc.github.io/assets/media/file.pdf"
type="application/pdf"
width="700px"
height="700px">
<embed src="https://nitinkc.github.io/assets/media/file.pdf">
<p>This browser does not support PDFs. Please download the PDF to view it:
<a href="https://nitinkc.github.io/assets/media/file.pdf">Download PDF</a>.
</p>
</embed>
</object>

DateFormatting with Liquid

Use the **date filter ** to change the display format of dates.

  • {{ '2023-04-06' | date: "%B %d, %Y" }}: Displays the date as “April 06, 2023”
  • {{ customer.date_of_birth | date: '%D' }}: Displays a customer’s date of birth in the format “03/09/80”
  • {{ site.time | date: '%D' }}: Site Build Time to be displayed

Examples

  • {{ 'now' | date: "%Y/%m/%d" }}
    • 2024/11/13
  • {{ 'now' | date_to_rfc822 }}
    • Wed, 13 Nov 2024 22:32:04 -0700
  • {{ 'now' | date: "%C" }}
    • 20 : %C - Year divided by 100 and truncated to integer (00-99)
  • {{ 'now' | date: "%c" }}
    • Wed Nov 13 22:32:04 2024
  • {{ 'now' | date: "%a, %b %-d %Y - %r %Z" }}
    • Wed, Nov 13 2024 - 10:32:04 PM MST

Notices with theme

  • Default {: .notice}
  • Primary {: .notice–primary}
  • Info {: .notice–info}
  • Warning {: .notice–warning}
  • Success {: .notice–success}
  • Danger {: .notice–danger}

Writing Math Equations

Traditional using subscript and super-script

  • log<sub>base</sub>index = power ==> logbaseindex = power
  • base<sup>power</sup> = index ==> basepower = index
  • log<sub>b</sub><sup>x</sup>+log<sub>b</sub><sup>y</sup> ==> log bx+logby

\(\LaTeX\) - Using Lib

- From https://yihui.org/en/2018/07/latex-math-markdown/

https://nitinkc.github.io/developer%20tools/LaTex/

\(\LaTeX\) Summary

Math Expression Rendered Output
log{_a}{n} $ log{_a}{n} $
y = ax^2 + bx + c $ y = ax^2 + bx + c $
\frac{a+b}{2} $ \frac{a+b}{2} $
\sqrt[n]{a^2+b^2} $ \sqrt[n]{a^2+b^2} $
x_1, \ldots, x_n $ x_1, \ldots, x_n $
x_1 + \cdots + x_n $ x_1 + \cdots + x_n $
\left( a + \frac{1}{2} \right)^2 $ \left( a + \frac{1}{2} \right)^2 $
\vec{u} \otimes \vec{v} = \mathbf{M} $ \vec{u} \otimes \vec{v} = \mathbf{M} $
\log \left[1 + \left( \frac{x + \sin y}{z} - \sqrt{a} \right)^b \right] $ \log \left[1 + \left( \frac{x + \sin y}{z} - \sqrt{a} \right)^b \right] $
\frac{\frac12 - 2}{5 + \frac43} $ \frac{\frac12 - 2}{5 + \frac43} $
\frac{\displaystyle \frac12 - 2}{\displaystyle 5 + \frac43} $\frac{\displaystyle \frac12 - 2}{\displaystyle 5 + \frac43} $
\xrightarrow[under]{over} $ \xrightarrow[under]{over} $
24\times 60\times 60 \approx \text{90K secs}, \text{1 Day has 86400 seconds} $ 24\times 60\times 60 \approx \text{90K secs}, \text{1 Day has 86400 seconds} $

Spaceship - LaTex, Table, Media, Math, Plant UML

Jeykll Spaceship

Diagrams

Plant UML Sequence Diagram

Mermaid Diagram

Mermaid Live Editor with gist code load

use the tag mermaid!

You may also enjoy