Home

First Thing First - Learn Markdown

January 25, 2019

I have so many github repos and none of them had proper README.md in it because I thought markdown is yet another markup language which requires learning.

Before bringing this blog up I learnt markdown and documented it as public gist. Here I’m sharing the same gist - thanks to people at gatsby-remark-embed-gist for developing gatsby plugin which allows embedding gist directly into markdown.

Below are the original markdown markup

Inline Link

[Search for it.](www.google.com)    ->    Search for it.

Divider

---

Blockquote

> "Her eyes had called him and his soul had leaped at the call. To live, to err, to fall, to triumph, to recreate life out of life!"

"Her eyes had called him and his soul had leaped at the call. To live, to err, to fall, to triumph, to recreate life out of life!"

Lists

  - List 1
  - List 2
    - Sub List 21


  * List A
    * Sub List AA
      * Sub Sub List AAA
  • List 1
  • List 2
    • Sub List 21
  • List A
    • Sub List AA
      • Sub Sub List AAA

Paragraph - soft break has 2 spaces in end

We pictured the meek mild creatures where
They dwelt in their strawy pen,
Nor did it occur to one of us there
To doubt they were kneeling then.

Paragraph - 4 spaces turns it into code

.my-link {
    text-decoration: underline;
}

Code

can use programming language the code block is written in
```sh
$ NODE_ENV=production node app
```

$ NODE_ENV=production node app

Table

| Plugin | README |
| ------ | ------ |
| Dropbox | [alt text][db] |
| Github | [alt text][gh] |
| Google Drive | [alt text][gd] |
| OneDrive | [alt text][od] |
| Medium | [alt text][m] |
| Google Analytics | [alt text][ga] |
Plugin README
Dropbox alt text
Github alt text
Google Drive alt text
OneDrive alt text
Medium alt text
Google Analytics alt text

Inline code

`${some code}`    ->    ${some code}

Inline Image - Alt Text is optional

![Alt Text](http://octodex.github.com/images/octdrey-catburn.jpg)    ->    Alt Text

Reference-style:

alt text

![alt text][logo]

Youtube

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

Italic

_Writing in Markdown is not that hard!_    ->    Writing in Markdown is not that hard!

Emphasize

*Writing in Markdown is not that hard!*    ->    Writing in Markdown is not that hard!

Bold

**Writing in Markdown is not that hard!**    ->    Writing in Markdown is not that hard!

Strike Through

~~Don't Follow This~~    ->    Don't Follow This

Header

# Header one
## Header two
### Header three
#### Header four
##### Header five
###### Header six

Reference Links - ignored by md processor

[db]: <https://gist.github.com/vinkrish>
[gh]: <https://gist.github.com/vinkrish>
[gd]: <https://gist.github.com/vinkrish>
[od]: <https://gist.github.com/vinkrish>
[m]: <https://gist.github.com/vinkrish>
[ga]: <https://gist.github.com/vinkrish>
view raw markdown.md hosted with ❤ by GitHub

If you are want to build static website from CMS or markdown files I would recommend Gatsby which can use abundant React component available at your disposal along with GraphQL and there are simple ones requiring no knowledge on specific language: Jekyll & Blot

Before taking things live you can view how markdown actually looks after it is processed or even live edit here - Dillinger and then copy the content to your markdown.


Hi, I'm Vinay - a Programmer who "Read-Evaluate-Loop". You can find me on GitHub LinkedIn Twitter


© 2024, Built with Gatsby