Markdown Tricks

align image.md

Aligning Image

Because markdown don't support aligning image, instead of

![example seeing impaired TEXT](httpLinktoPicture.jpg)

you can use <img src="httpLinktoPicture.jpg" alt="example seeing impaired TEXT" />

Actual text

This is the code you need to align images to the left:
<img align="left" width="100" height="100" alt="fidget spinner" src="https://loading.io/spinners/fidget-spinner/lg.fidget-spinner.gif">

---
This is the code you need to align images to the center:
<center>
  <img width="300" alt="fidget spinner" src="https://loading.io/spinners/fidget-spinner/lg.fidget-spinner.gif">
</center>

---
This is the code you need to align images to the right:
<img align="right" width="100" height="100" alt="fidget spinner" src="https://loading.io/spinners/fidget-spinner/lg.fidget-spinner.gif">

Result

This is the code you need to align images to the left:

---

This is the code you need to align images to the center:

---

This is the code you need to align images to the right:

hide show content.md

Hide-show content

Standard HTML <details> can be used to hide-show some content. Beware that I use zero-width-space in the actual text. (copy paste the text will not work, you need to type it manually).

Use <details open> if you want to make it opened/showed by default

Actual text

<details>
<summary>title of the content (*not* support **markdown** syntax ~~hmm~~)</summary>

content body (support **markdown** syntax ~~hmm~~)

```json
{
  support: "codeblock to"
}
​```

</details>

Result

title of the content (*not* support **markdown** ~~syntax~~)

content body (support markdown syntax)

{
  support: "codeblock to"
}

nested blockquote.md

Quote long sentence

We can use nested blockquotes >> combined with italic for creating long sentence famous quote.

Actual text

> **Sir Charles Antony Richard Hoare**
>> *“I call it my billion-dollar mistake.
It was the invention of the null reference in 1965.
At that time, I was designing the first comprehensive type system for references in an object oriented language ([ALGOL W](https://en.wikipedia.org/wiki/ALGOL_W)).
My goal was to ensure that all use of references should be absolutely safe, with checking performed automatically by the compiler.
But I couldn't resist the temptation to put in a null reference, simply because it was so easy to implement. This has led to innumerable errors, vulnerabilities, and system crashes, which have probably caused a billion dollars of pain and damage in the last forty years.”*

Result

Sir Charles Antony Richard Hoare

“I call it my billion-dollar mistake. It was the invention of the null reference in 1965. At that time, I was designing the first comprehensive type system for references in an object oriented language (ALGOL W). My goal was to ensure that all use of references should be absolutely safe, with checking performed automatically by the compiler. But I couldn't resist the temptation to put in a null reference, simply because it was so easy to implement. This has led to innumerable errors, vulnerabilities, and system crashes, which have probably caused a billion dollars of pain and damage in the last forty years.”

nested codeblocks.md

Codeblocks inside codeblocks

This tricks use zero-width-space on child codeblocks ( pair of ``` inside pair of ``` ). Usefull when I'm writing this tutorial.

Actual text

Some text

```md
some **markdown** content that *need* to be `displayed` in ~~plain text~~

```language
some code or syntax
​```

end
​```

Result

Some text

some **markdown** content that *need* to be `displayed` in ~~plain text~~

```language
some code or syntax
​```

end

smil svg.md

Animated Inline SVG

Instead of GIF, you can use animated SVG to draw an ilustration. Beware that this feature not supported in IE, Microsoft Edge, and Android browsers prior to version 4.4.

Actual text

This is what it look like when propeller spinning at
<svg width="120" height="120">
  <g transform="translate(0 30)">
    <rect fill="red" width="120" height="60" rx="60" ry="30" >
          <animateTransform attributeName="transform"
                          type="rotate"
                          from="0 60 30"
                          to="360 60 30"
                          dur="0.0059998800024"
                          repeatCount="indefinite"/>
    </rect>
    <rect fill="blue" width="120" height="60" rx="60" ry="30" >
      <animateTransform attributeName="transform"
                        type="rotate"
                        from="90 60 30"
                        to="450 60 30"
                        dur="0.0059998800024"
                        repeatCount="indefinite"/>
    </rect>
  </g>
  <text x="25%" y="10%">10 000 RPM</text>
  <text x="75%" y="90%">11 N</text>
</svg>
for thrust based on [static thrust equation](https://quadcopterproject.wordpress.com/static-thrust-calculation/)

Result

This is what it look like when propeller spinning at 10 000 RPM 11 N for thrust based on static thrust equation

typography.md

Combining italic, bold, superscript, subscript, and/or strikethrough

Basic markdown typography can also be combined with other markdown typography (italic, etc) and sometimes it can also be combined with HTML tag <sup> and <sub>.

Actual text

italic-bold -> __*“ ssss”*__

superscript -> Starwars<sup>TM</sup>

superscript-italic -> Starwars<sup>*tm*</sup>

subscript -> F<sub>x</sub>

subscript-bold -> Limit<sub>**min**</sub>

italic-bold-strikethrough -> ~~__*“ ssss”*__~~

Result

italic-bold -> “ ssss”

superscript -> Starwars^TM

superscript-italic -> Starwars^tm

subscript -> O₂

subscript-bold -> Limit_min

italic-bold-strikethrough -> “ ssss”