Prosty sposób na piękne teksty – Kurs Markdown 4

Posted on by BartoszB
kurs-markdown

Kurs Markdown – Lekcja 4: Tabela i kilka ciekawostek.

W ostatniej części kursu omówię tabele i klika nietypowych rozwiązań i ułatwień.

Spis treści:

  1. Tabele
  2. Lista zadań
  3. Emoji
  4. Komentarz
  5. Tekst zwinięty
  6. Kotwica

Tabele

Aby stworzyć tabelę, używamy pionowych kresek | do oddzielania kolumn oraz myślników – do tworzenia wiersza nagłówkowego:

    | Kolumna 1 | Kolumna 2 | Kolumna 3 |
    |-----------|-----------|-----------|
    | Wartość 1 | Wartość 2 | Wartość 3 |
    | Wartość 4 | Wartość 5 | Wartość 6 |

Efekt:

Kolumna 1 Kolumna 2 Kolumna 3
Wartość 1 Wartość 2 Wartość 3
Wartość 4 Wartość 5 Wartość 6

Możemy ustawić wyrównanie tekstu w tabeli poprzez dodanie 'dwukropka’:

  • Do lewej: :—
  • Do środka: :—:
  • Do prawej: —:
| Lewa kolumna | Środkowa kolumna | Prawa kolumna |
|:-------------|:----------------:|--------------:|
| Tekst        | Tekst            | Tekst         |

Efekt:

Lewa kolumna Środkowa kolumna Prawa kolumna
Tekst Tekst Tekst

Lista zadań

Markdown obsługuje również listy zadań, które można tworzyć za pomocą - [ ] dla zadań do wykonania i - [x] dla zadań ukończonych.

- [ ] Zadanie 1
- [x] Zadanie 2
  • Zadanie 1
  • Zadanie 2

Emoji w Markdown

Emoji stały się integralną częścią komunikacji online, dodając emocje, kontekst i wizualne elementy do tekstu. W Markdown, niektóre platformy obsługują emoji, co pozwala na ich łatwe wstawianie w dokumentach. Użycie emoji może wzbogacić treść, sprawiając, że jest bardziej przyjazna i angażująca. Jak wstawiać emoji w Markdown

W Markdown, aby wstawić emoji, używa się składni :nazwa_emoji:. Na przykład, aby wstawić uśmiechniętą buźkę, użyjesz:

:smile:

Efekt: 😄

Tych emoji jest od groma i jeszcze więcej, w planach miałem zrobić osobny wpis, ale jest tego za dużo. Postanowiłem podrzucić choć jedną stronę, która posiada taki spis. dev.to. Nie ukrywam że ja miałem problem by wyświetlić, użyłem „Unicode”.

Oto jak różne platformy radzą sobie z emoji:

  1. GitHub ✅
  • GitHub obsługuje zarówno emoji w formacie Unicode, jak i shortcode’y.
  • Przykład shortcode’a: :smile: → 😊
  • Możesz używać emoji w plikach README, komentarzach i issue’ach.
  1. GitLab ✅
  • GitLab również obsługuje emoji w formacie Unicode i shortcode’y.
  • Shortcode’y działają podobnie jak na GitHubie.
  1. Reddit 🟡
  • Reddit obsługuje emoji w formacie Unicode, ale nie obsługuje shortcode’ów .
  • Jeśli chcesz użyć emoji, musisz wkleić je bezpośrednio (np. 😊).
  1. WordPress 🟡
  • WordPress obsługuje emoji w formacie Unicode, ale obsługa zależy od motywu i wtyczek.
  • Jeśli emoji nie są wyświetlane, upewnij się, że Twoja baza danych używa kodowania utf8mb4.
  1. Slack/Discord ✅
  • Slack i Discord mają bardzo dobrą obsługę emoji, zarówno w formacie Unicode, jak i za pomocą shortcode’ów.
  • Możesz również dodawać własne niestandardowe emoji.
  1. Notatniki i edytory tekstu 🟡
  • Notatniki (np. Notepad) i niektóre edytory tekstu mogą nie wyświetlać emoji poprawnie, jeśli nie obsługują czcionek Unicode.
  • Nowoczesne edytory (np. VS Code, Typora) radzą sobie z emoji bez problemu.
  1. E-maile 🟡
  • Obsługa emoji w wiadomościach e-mail zależy od klienta pocztowego.
  • Niektóre starsze klienci mogą nie wyświetlać emoji poprawnie.

Komentarze

Teraz coś bardziej nietypowego, bo nie da się tego pokazać. Komentarz ma to postać: 

    [comment]: <> (To jest komentarz, który nie będzie widoczny)
    [//]: # (To jest komentarz, który nie będzie widoczny)

Powyżse komentarze są często stotowane w plikach „README” czy na platformie „GitHub”. Lepiej jest użyć „komentarza HTML”, jezeli wykorzystujemy markdowna do publikacji w internecie. Dla przypomnienia:

    <!-- To jest komentarz w Markdown -->

Tekst zwinięty

Element 'details’ w połączeniu z 'summary’ to jedna z bardziej interesujących i przydatnych funkcji HTML, która może być wykorzystana w Markdown (o ile platforma obsługuje wbudowanie HTML). Pozwala ona na tworzenie zwijanych/sekcyjnych bloków tekstu , które są idealne do organizowania treści w bardziej interaktywny sposób. Prosty przykład:


<details>

<summary>Rozwiń . . .</summary>
        To jest ukryty tekst, który pojawi się po kliknięciu.
    </details>

Efekt:

Rozwiń . . . To jest ukryty tekst, który pojawi się po kliknięciu.

’details markdown=”1″’: Sugeruje, że zawartość w tym elemencie powinna być traktowana jako tekst w formacie Markdown. To może być użyteczne w kontekście systemów, które wspierają Markdown (np. niektóre generatory stron, platformy blogowe). Przykład:

    <details markdown="1">
        <summary markdown="span">Rozwiń przykład tabeli</summary>

    | Kolumna 1 | Kolumna 2 |
    |-----------|-----------|
    | Wiersz 1  | Dane 1    |
    | Wiersz 2  | Dane 2    |
</details>

Efekt:

Rozwiń przykład tabeli
Kolumna 1 Kolumna 2
Wiersz 1 Dane 1
Wiersz 2 Dane 2

Wielopoziomowe zwijanie. Możesz zagnieżdżać wiele bloków 'details’ w sobie, aby stworzyć hierarchiczne menu lub listę. 


<details>

<summary>Pierwszy poziom</summary>

<p>To jest pierwszy poziom zawartości.</p>

<details>

<summary>Drugi poziom</summary>

<p>To jest drugi poziom zawartości.</p>
        </details>
    </details>

Efekt:

Pierwszy poziom

To jest pierwszy poziom zawartości.

Drugi poziom

To jest drugi poziom zawartości.

Nie wszystkie platformy obsługujące Markdown pozwalają na użycie elementów HTML, takich jak 'details’ i 'summary’. Oto kilka przykładów:

  • GitHub : ✅ Obsługuje 'details’ i 'summary’, co jest często używane w plikach README.
  • GitLab : ✅ Również obsługuje te elementy.
  • Reddit : ❌ Nie obsługuje tych elementów.
  • WordPress : 🟡 Może wymagać włączenia wsparcia dla HTML w ustawieniach motywu lub wtyczki.

Kotwica

I na sam koniec elementy ankerów (inaczej: zakotwiczeń) są bardzo przydatne w Markdown i HTML, gdy chcesz umożliwić użytkownikom szybkie nawigowanie między różnymi częściami dokumentu. Dzięki temu możesz tworzyć odnośniki, które przenoszą czytelnika do konkretnego miejsca na stronie.

Aby utworzyć odnośnik do konkretnego miejsca w dokumencie, musisz:

  1. Zdefiniować kotwicę (miejsce docelowe): 
    <span id="Name"></span>

id=”Name” to unikalny identyfikator, który oznacza miejsce w dokumencie. Możesz użyć dowolnej nazwy zamiast Name, np. sekcja1, wprowadzenie, itp.

  1. Utworzyć odnośnik prowadzący do tej kotwicy: 

    [Idź do...](#Name)
    1. #Name wskazuje na identyfikator zdefiniowany wcześniej.
    2. Tekst [Idź do…] to widoczny link, który użytkownik może kliknąć.

Najlepszym przykładem jest spis treści tego posta. Efekt działania jest na górze, a po niżej przedstawiam jak to wygląda: „spis treści”. 

    **Spis treści:**
    1.  [Tabele](#Tabele)
    2. [Lista zadań](#Lista)
    3. [Emoji](#Emoji)
    4. [Komentarz](#Komentarz)
    5. [Tekst zwinięty](#Tekst)
    6. [Kotwica](#Kotwica)

A tak wygląda miejsce docelowe:

    <span id="Kotwica">
    #### Kotwica
    </span>

Większość platform obsługujących Markdown obsługuje kotwice, ale mogą występować różnice w składni:

  • GitHub : ✅ Obsługuje zarówno 'span id=”…”’, jak i {#…} w nagłówkach.
  • GitLab : ✅ Również obsługuje te elementy.
  • Reddit : ❌ Nie obsługuje kotwic.
  • WordPress : 🟡 Może wymagać dodatkowej konfiguracji (np. wtyczki). Osobiście nie mam żadnych problemów.

Podsumowanie

To już koniec kursu. Myślałem ze ten ostatni wpis będzie krótki, a okazał się chyba najdłuższym wpisem. W kursie nie zawarłem wszystkiego, bo sam nie wszystko umiem. A teraz takie faktycznie podsymowanie samego kursu :) Markdown to potężne narzędzie do formatowania tekstu, które jest łatwe w użyciu i szeroko stosowane. Zachęcam do dalszego eksplorowania jego możliwości i wykorzystywania go w swoich projektach.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *