Markdown - podstawowa składnia
Opublikowano pon 23 marca 2020 w markdown • 3 min read
Markdown jest lekkim językiem znaczników (Lightweight markup language - LML) służącym do formatowanie tekstu (za: Wikipedia oraz Ang. - Wikipedia). Wprowadzono go po raz pierwszy w 2004 i celem autorów było stworzenie języka, który jest prosty do pisania oraz czytania, a przy okazji miał być prosty w konwersji to języka XHTML lub HTML.
Szybkie wprowadzenie do języka Markdown
Nagłówki/Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6
Nagłówek1
Nagłówek2
Nagłówek3
Nagłówek4
Nagłówek5
Nagłówek6
Style liniowe/inlinowe
**bold**
~~crossed~~
---strikethrough text---
*italics*
pogrubiony
~~przekreślony~~ (tu się nie sprawdza)
---wykreślony tekst--- (również się nie sprawdza :( )
italik
Obrazy
można również:
Obraz jako link
schemat
[](/sciezka/odsylajaca.html)
Centrowanie wybranego! obrazu wobec rodzica
markdown nie ma opcji pozwalającej na centrowanie/pozycjonowanie elementów stąd należy zrobić to albo z pozycji html i inlinowego css albo wykorzystać css i odpowiednio otagować obraz (jestem zwolennikiem tej drugiej opcji ponieważ wprowadza mniej ingerencji w sam markdown) dodając na końcu odnośnika hasztag z nazwą atrybutu np. center
Schemat
W CSS należy dodać deklaracje
img[src*='#center'] {
display: block;
margin: auto;
}
Zmiana wielkości obrazu
{ width="50%" }
{:height="40px" width="40px"}
Wideo
<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>
Linki
Zewnętrzne
[nazwa obiektu/strony](http://przykladowy.link.com)
[Notatki z frontu](https://kostyrko.github.io/zfrontu/)
można również:
https://kostyrko.github.io/zfrontu/
https://kostyrko.github.io/zfrontu/
:::tu akurat nie działa za to np. w VSC się sprawdza :::
Wewnętrzne
link działający w ramach strony
[Strony warte odwiedzenia](#strony)
gdzie nagłówek do którego jest odwołanie:
### Strony warte odwiedzenia {#strony}
lub (pewniejsza opcja, ale wykorzystująca HTML)
[Strony warte odwiedzenia](#strony)
gdzie:
<a name="strony">
### Strony warte odwiedzenia
</a>
kolejna możliwość
[sprawdź również tą część tekstu](#strony)
gdzie:
#### Strony warte odwiedzenia
::: ta opcja u mnie na blogu się nie sprawdziła :::
Wstawianie kodu
Kod w lini tekstu
`back quote`
odwrotny apostrof - na lewo od 1 (tam gdzie lambda)
Kod blokowy
Potrójny zwrotny apostrof
```
no = "Python syntax highlighting"
print s
```
no = "Python syntax highlighting"
print s
Ze wskazaniem języka :)
```python
yes = "Python syntax highlighting"
print s
nice for <bold>html</bold>
```
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
```html
nice for <bold>html</bold>
```
s = "Python syntax highlighting"
print s
var s = "JavaScript syntax highlighting";
alert(s);
nice for <bold>html</bold>
Blokowe cytaty
> Blokowe cytowanie wybranego fragmentu tekstu
Blokowe cytowanie wybranego fragmentu tekstu
Tabela
| Kolumna 1 | Kolumna 2 |
|---|---|
| Wartość 1 | Wartość 2 |
| Wartość 3 | Wartość 4 |
| Wartość 5 | Wartość 6 |
| Kolumna 1 | Kolumna 2 | Kolumna 3
|---|---|---| /* wszystkie linie powinny być pionowe */
| Wartość 1 | Wartość 2 | Wartość 3 |
| Wartość 4 | Wartość 5 | Wartość 6 |
| Wartość 7 | Wartość 8 | Wartość 9 |
| Kolumna 1 | Kolumna 2 | Kolumna 3 |
|---|---|---|
| Wartość 1 | Wartość 2 | Wartość 3 |
| Wartość 4 | Wartość 5 | Wartość 6 |
| Wartość 7 | Wartość 8 | Wartość 9 |
| Kolumna 1 | Kolumna 2 |
|---|---|
| Wartość 1 | Wartość 2 |
| Wartość 3 | Wartość 4 |
| Wartość 5 | Wartość 6 |
Tworzenie list
Uporządkowana lista
1. Obiekt 1
1. Obiekt 2
1. Obiekt 3
1. Obiekt 3a
1. Obiekt 3b
- Obiekt 1
- Obiekt 2
- Obiekt 3
- Obiekt 3a
- Obiekt 3b
Nieuporządkowana:
* Obiekt 1
* Obiekt 2
* Obiekt 3
* obiekt 3.1
* obiekt 3.2
- Obiekt 1
- Obiekt 2
- Obiekt 3
- obiekt 3.1
- obiekt 3.2
Styl mieszany:
1. Obiekt1
2. Obiekt2
* Obiekt3
- Obiekt1
- Obiekt2
- Obiekt3
Tworzenie linii
Dwa z możliwych sposobów (potrójne znaki):
___ (podkreślnik)
--- (łącznik)
Emotki
:smile:
:::nie działa :( :::
Strony warte odwiedzenia
-
www.markdownguide.org - nauka języka, wersja podstawowa jak i rozszerzona oraz Cheat Sheet
-
Dillinger - onlinowy edytor języka Markdown - w jednym oknie się wpisuje w kolejnym widać tego efekty
-
www.markdowntutorial.com/ - interaktywna nauka języka Markdown online