Awesome Tips about Markdown

Table of Contents

• Syntax
  • Links
  • Images
  • Table without header
  • Alignment Table Columns
  • Formatting Text in Tables
  • List
  • Special Characters
  • Backslash Escape
  • Line breaks in markdown
  • Supported Languages
  • Footnotes
  • Open link in a new window
  • Emoji
  • Collapsible Markdown?
  • Add CSS Style to Markdown
  • Basic Syntax
  • Pandoc Markdown Syntax
  • Advanced Markdown Syntax
• Slides Syntax
  • Gotcha
  • Tips
• Writing in Atom with Markdown
  • Markdown and Mind Map
  • Other Markdown Tools
  • Troubleshooting
  • More Elements to Use
  • Related Posts

---

Series: Awesome Tips about Markdown

Syntax

• Strikethrough: ~~your text~~
  • your text
• Inline code: surround your text with backtick symbols `
  • you code

Links

• Inline Link
• Reference links
• Automatic links
  • Link without text ```markdown an inline-style link a reference-style link lifelongprogrammer

http://example.com/ address@example.com #### Named anchor - [Pandoc: https://pandoc.org/MANUAL.html#heading-identifiers](https://pandoc.org/MANUAL.html#heading-identifiers) - `{#identifier .class .class key=value key=value}` - This approach is easier to use. - we can use html in markdownhtml - Reference the anchormarkdown Mail’s Shortcuts ```

Images

• A link immediately preceded by a ! will be treated as an image.
• Prefer []() over img tag
  • The raw HTML is passed through unchanged in HTML, S5, Slidy, Slideous, DZSlides, EPUB, Markdown, and Textile output, and suppressed in other formats.
• Center image
  1. html: p align

  <p align="center">
    <img src="https://media.giphy.com/media/e1BxgoFxAOmbK/giphy.gif" alt="Wonder Woman Happy Dance"/>
  </p>

  

  2. center css

  <style>
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  </style>
  ![](https://media.giphy.com/media/l0Iy8OYsxXo4PlCIU/giphy.gif){.center}

  
• side by side images

![alt text](the_image "Logo Title Text 1")

<!-- Side by Side Images -->
Header Left |  Header Right
:--------:|:-------:
![](image_link)  |  ![](image_link)

• Change image destination
  • wrap the image in another link

[![Build Status](https://travis-ci.org/philc/vimium.svg?branch=master)]
(https://travis-ci.org/philc/vimium)

Table without header

• pipe_tables

| | |
|-|-|
Normal Key|Value1øøøøø

Alignment Table Columns

• align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row

| Left Align |   Center   | Right Align |
|:---------- |:----------:| -----------:|
| Left Align | Center `|` | Right Align |

Formatting Text in Tables

• We can use markdown syntax for link, inline code block, bold, emphasis etc in table content.

Misc

• Escape the pipe | using inline code block |

List

• by default, it creates a compact list.
• put spaces or comments between the items to create a loose list
• subsequent paragraphs and code block must be indented.
• Nested list

- Item 1
    - Item 1a

automatically numbered list

1. test 1
1. test 2

Checklist or task list

- [] item incomplete
- [x] item done

• [] item incomplete
• [x] item done

Definition Lists

• Markdown’s syntax for HTML Definition Lists: dl, dt

The Term
: This is the definition of the the term.

The Term

This is the definition of the the term.

Special Characters

• @
  • [@TODO title](link) this will not work, we need either escape the @ or remove it

\  backslash
`  backtick
*  asterisk
_  underscore
{} curly braces
[] square brackets
() parentheses
#  hash mark
>  greater than
+  plus sign
-  minus sign (hyphen)
.  dot
!  exclamation mark

Backslash Escape

[\@com.carrotsearch.randomizedtesting.annotations.Repeat(iterations = 5)]
(https://github.com/randomizedtesting/randomizedtesting/wiki)

Line breaks in markdown

<br/>
\
<!-- Two or more spaces at the end of the line -->
  (<-- two spaces)

Supported Languages

• markdown, java, json,html, javascript, shell, yaml, xml etc

Footnotes

• Inline Notes

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

Here is an inline note.^[Inlines notes...]
[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.
^[Inlines notes are easier to write, since you don't have to pick an
identifier and move down to type the note.](the_url)

Open link in a new window

• ex: How to Improve Problem Solving Skills: the Developer Guide
• use “blank” instead of _blank due to the bug at atom: Wrong syntax highlighting when one line contains a single * or _

[How to Improve Problem Solving Skills: the Developer Guide](https://lifelongprogrammer.blogspot.com/2019/06/how-to-improve-problem-solving-skills-developer-guide.html){target="blank"}

Emoji

• Check emoji-cheat-sheet to search or check a full list of available emojis.
• -f markdown+emoji when use Pandoc

:cat:  :smile: :bear:

🐱 😄 🐻

Collapsible Markdown?

<details><summary>CLICK ME</summary>
hidden by default
</details>

CLICK ME

hidden by default

---

Add CSS Style to Markdown

---

Basic Syntax

Header 1
========

Header 2
--------

~~crossed out~~
_italic_
__bold__
_You **can** combine them_

# kbd tag
<kbd>Ctrl</kbd>

> This is a blockquote
// horizontal rule tag (<hr />)
---
// Code span - use `and`
Type `echo 'Hello World'`

Pandoc Markdown Syntax

• Check here for more awesome tips about Pandoc
• fenced_code_attributes

~~~~ {#mycode .haskell .numberLines startFrom="100"}

• line_blocks: beginning with a vertical bar (|) followed by a space
  • useful for verse, addresses, resume
• pandoc_title_block
• yaml_metadata_block
  • when use --- as line break, better put a new line after it, otherwise it may be confused with yaml_metadata_block
• attributes
  • inline_code_attributes
  • {.smallcaps}
  • raw_attribute: {=html}
• tex_math_dollars

Advanced Markdown Syntax

### My Great Heading {#custom-id}
[Heading IDs](#heading-ids)

Slides Syntax

• Pandoc Syntax

Gotcha

• Space matters:
  • for link, no space between [] and (), for header, need space between ### and the words
  • check the colors in atom
• Empty line matters
  • when not sure, add empty line
• It doesn’t wrap in code block

Tips

• Add html(javascript, css) directly in Markdown.
• Embed tweet, facebook, youtube videos by directly copying the embed html code.

Writing in Atom with Markdown

• Check here for must-have atom editor packages
• Writing Blog with Markdown, Atom Editor, Pandoc and Github
• building presentations with reveal.js, markdown and github pages

Markdown and Mind Map

• MarkRemap
• Atom Markdown Mindmap

Other Markdown Tools

• Online markdown editor: StackEdit
  • Functions: export as html, save to google drive, blogger, github, dropbox etc
  • alternatives: https://dillinger.io/
• Share markdown with socrates
• Mac Apps:
  • Atom Editor
  • Typora
• Visual Studio Code with Markdown Preview Enhanced
• Use Wordpress Markdown Editor
• Write posts in Markdown and post there in dev.to
  • Add Canonical URL to refer to your original post.

Markdown for Email

• Use Markdown to write email.
  • Write Markdown directly in Chrome by using Markdown Here
• Use Markdown Preview to read long email (that roughly )
• Not used syntax: self anchor link, summary, detail.

Troubleshooting

• When the output is not same as expected, start from the first place and fix it.
• Usually we can fix it by add new line, or put the text in `the_text`.
• check broken headers by searching ## or ```

More Elements to Use

• quote >
• It will start a new list each time a different type of list marker is used

---