In general, you will learn some markdown tricks combined with standard HTML tags. In more details what you will learn:
Generally, this tutorial is my personal tips and tricks that I use everyday when writing issue and documentation with markdown.
I want to share it here that I hope it's became usefull. Also, this is my first time trying contributing to utopian community.
feel free to copas some of the tricks in the comment below to test if it works on steemit/busy.org 😊
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
<details>
<summary>title of the content (*not* support **markdown** syntax ~~hmm~~)</summary>
content body (support **markdown** syntax ~~hmm~~)
```json
{
support: "codeblock to"
}
```
</details>
title of the content (not support markdown syntax)
content body (support markdown syntax)
{
support: "codeblock to"
}
This tricks use zero-width-space on child codeblocks ( pair of ``` inside pair of ``` ). Usefull when I'm writing this tutorial.
Some text
```md
some **markdown** content that *need* to be `displayed` in ~~plain text~~
```language
some code or syntax
```
end
```
Some text
some **markdown** content that *need* to be `displayed` in ~~plain text~~
```language
some code or syntax
```
end
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>.
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”*__~~
italic-bold -> “ ssss”
superscript -> StarwarsTM
superscript-italic -> Starwarstm
subscript -> O2
subscript-bold -> Limitmin
italic-bold-strikethrough -> “ ssss”
We can use nested blockquotes >> combined with italic for creating long sentence famous quote.
> **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.”*
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.”
Because markdown don't support aligning image, instead of
you can use <img src="httpLinktoPicture.jpg" alt="example seeing impaired 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">
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:
Instead of animated 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. Also, some website like Github doesn't allow inline SVG (and even uploading SVG image).
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/)
This is what it look like when propeller spinning at
10 000 RPM
11 N
for thrust based on static thrust equation
Embedding website <iframe> or <script>. Not many website support this.
Using `` tag
<script src="https://gist.github.com/DrSensor/2b45a6eb516b6b8084a4866d10699113.js"></script>
---
Using ` tag
<iframe src="https://codesandbox.io/embed/6zk98l6w0k" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
Using <script> tag
Using <iframe> tag
End of Tutorials
This is one-shot tutorial, no curriculum.
https://gist.github.com/DrSensor/b2a674f42933b2ad6db4c6f7934b32a5