markup jekyll with markdown

26 jul 2014

::: my jekyll markdown cheatsheet* :::

Markdown is a way to write content for the web. It's written in what devs like to call plaintext, which is exactly the sort of text we're used to writing and seeing.

Headers
- Hashtags style code be like:
  # H1 - largest
  ## H2
  ### H3
  #### H4
  ##### H5
  ###### H6 - smallest
- Code renders like:
  H1 - _largest_
  
  H2
  
  H3
  
  H4
  
  H5
  
  H6 - _smallest_

Lists
- Code be like:
  - Ordered
    1. First ordered list item
    2. Another item
    --* Unordered sub-list.
    1. Any number will do
    --1. Ordered sub-list
    4. And another item.
  - Unordered
    * asterisks, - minuses & + pluses
- Looks like:
  1. First ordered list item
  2. Another item
    - Unordered sub-list.
  3. Any number will do
  4. Ordered sub-list
  5. And another item.
  Some text that should be aligned with the above item.
  - Unordered list can use asterisks
  - Or minuses
  - Or pluses

Emphasis
- Emphasis, aka italics: *asterisks* or _underscores_
- Strong emphasis, aka bold: **asterisks** or __underscores__
- Combined emphasis with asterisks and underscores:
  **_asterisks_ and _underscores_**

Links
- an inline-style link
  [an inline-style link](http://sskenner.github.io)
- an inline-style link with title
  [an inline-style link with title](https://www.google.com "Google")
- a reference-style link
  [a reference-style link][Arbitrary case-insensitive reference text]
  [Arbitrary case-insensitive reference text]: https://google.com
- can use numbers for reference-style link definitions
  [can use numbers for reference-style link definitions][1]
- Or leave it empty and use the link text itself
  [link text itself]
  [link text itself]: http://daringfireball.net/
- text to show that the reference links can follow anywhere after reference-style number link
  [1]: http://daringfireball.net/projects/markdown/syntax#link

Images
- inline image: (hover over image to see title text)
  ![an inline images alt text](http://image.URL.com/image-name.jpg)
- reference image:
  ![a reference images alt text][2]
  \n
  [2]: http://image.URL.com/image-name.jpg

Code
- Inline code has back-ticks around it.
  Inline `code` has `back-ticks` around it.

Syntax Highlighting
>> note >> it seems like code snippet hightlighting is platform specific. For Jekyll, as per Dmitri Moore's blog post entitled Improve Code Highlighting in a Jekyll-based Blog Site, an option would be via addition of custom CSS rules using the following steps:
1. Add syntax highlighter CSS file as css/syntax.css to your Jekyll site
2. Load CSS <link href="/css/syntax.css" rel="stylesheet"> inside of the corresponding layout file (e.g. _layouts/default.html) between the <head> tags
3. Wrap code snippets in posts with <left brace>% highlight ruby linenos %<right brace>...<left brace>% endhighlight %<right brace> Liquid tags
  - ```
   1 require 'redcarpet'
   2     
   3 markdown = Redcarpet.new("Hello World!")
   4 puts markdown.to_html
   5 
   6 def show
   7   puts "Outputting a very lo-o-o-o-o-o-o-o-o-o-o-o-ong lo-
   8   o-o-o-o-o-o-o-o-o-o-ong line"
   9   @widget = Widget(params[:id])
  10   respond_to do |format|
  11     format.html # show.html.erb
  12     format.json { render json: @widget }
  13   end
  14 end
```

Tables

Code be like:
- First Header | Second Header
  ------------ | -------------
  Content Cell | Content Cell
  Content Cell | Content Cell
  
  | Tables | Are | Cool |
  | ------------- |:-------------:| -----:|
  | col 3 is | right-aligned | $1600 |
  | col 2 is | centered | $12 |
  | zebra stripes | are neat | $1 |
  
  Markdown | Less | Pretty
  --- | --- | ---
  *Still* | renders | **nicely**
  1 | 2 | 3

Looks like:

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Tables	Are	Cool
col 3 is	right-aligned	stuff
col 2 is	centered	more stuff
col 1 is	left-aligned	less stuff

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

Blockqoutes

Code be like:

1 > Lorizzle stuff fo shizzle sit dang, pot adipiscing fo 
2   shizzle. Fo shizzle sapizzle velit, owned volutpat, 
3   quis, gravida vizzle, arcu. Gangster izzle gangsta.
4 
5   Quote break.
6 
7   > Lorizzle stuff fo shizzle sit dang, pot adipiscing fo.

Code renders like:

Lorizzle stuff fo shizzle sit dang, pot adipiscing fo shizzle. Fo shizzle sapizzle velit, owned volutpat, quis, gravida vizzle, arcu. Gangster izzle gangsta.

Quote break.

Lorizzle stuff fo shizzle sit dang, pot adipiscing fo shizzle.

Horizontal Rule
- Code be like:
  - ```
  1 ---
  2 Hyphens
  3 ***
  4 Asteriks
  5 ___
  6 Undersscores
```
- Code renders like:
  
  Hyphens
  
  Asteriks
  
  Undersscores

Line Breaks

Code be like:

1 This is the first line.  
2 
3 This line is separated from the one above by two newlines, 
4 so it will be a *separate paragraph*.
5 
6 This line is also a separate paragraph, but...
7 This line is only separated by a single newline, so it is 
8 a separate line in the *same paragraph*.

Code renders like:

This is the first line.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but... This line is only separated by a single newline, so it is a separate line in the same paragraph.

Youtube videos
- Code be like:

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

Also, here is a link to a very helpful interactive tutorial regarding: markdown interactive tut

---
*kinda extrapolated from Adam Pritchard's Markdown Cheatsheet

---

markup jekyll with markdown

H1 - _largest_

H2

H3

H4

H5

H6 - _smallest_

related posts