Preskoči na sadržaj

Suradnički uređivač teksta HackMD i jezik Markdown

Markdown je jednostavan jezik za pisanje oblikovanog teksta korištenjem čistog teksta. Njegova osnovna karakteristika je jednostavnost i lakoća upotrebe, čineći ga time popularnim alatom za oblikovanje i uređivanje teksta bez potrebe za naprednim tehničkim vještinama. Najčešće se koristi za pisanje znanstvenih članaka, README datoteka i objava na forumima. Više detalja o Markdownu moguće je pronaći na Wikipedijinoj stranici Markdown.

Datoteke napisane u Markdownu obično koriste ekstenzije kao što su .md ili .markdown. Na primjer, primjer.md je naziv tipične datoteke sa sadržajem u obliku Markdown.

Uređivači Markdowna

Offline:

Online:

Mrežni uređivač Markdowna HackMD

Kreiranje računa i prijava

Posjetite web stranicu hackmd.io i registrirajte se putem ekrana za registraciju. Unesite svoju željenu e-mail adresu i slijedite upute za kreiranje novog korisničkog računa.

Možete koristiti i druge servise za prijavu poput Google ili GitHub računa.

Moj radni prostor

Kada se prijavite nalazit ćete se u vlastitom radnom prostoru (engl. My workspace). Po potrebi možete stvarati odvojene timske radne prostore odabirom Create new team.

Novu bilješku možete kreirati klikom na zelenu ikonicu New note.

Sučelje HackMD-a sastoji se od izbornika i traka s alatima, koji služe za:

  • uređivanje,
  • pregled,
  • podjelu ekrana,
  • kreiranje osobne bilješke,
  • pomoć,
  • pretragu bilješki,
  • dijeljenje...

Uređivanje teksta

Naslovi

Naslove označavamo na način da ispred teksta stavimo oznaku #. Jedan znak # ispred naslova je glavni naslov, dva znaka ## je naslov druge razine i tako dalje.

Zadatak

  • Napišite naslov Suradnički uređivač teksta HackMD i jezik Markdown s podnaslovom Moje bilješke s vježbi.
  • Isprobavanjem otkrijte koliko razina poglavlja podržava jezik Markdown.

Jednostavno oblikovanje teksta

Jednostavno oblikovanje teksta poput korištenja kurziva i podebljanih riječi pomaže istaknuti važne koncepte unutar dokumenta i učiniti ga čitljivijim.

Primjer (Markdown kod) Prikaz rezultata Opis
**Bold** Bold Podebljani tekst
*Italic* Italic Ukošeni tekst
***Bold and Italic*** Bold and Italic Istovremeno podebljan i ukošen tekst
Super^script^ Superscript Nadpis ili eksponent
Sub~script~ Subscript Podpis ili indeks
~~Crossed~~ Crossed Precrtani tekst. Znak tilda ~: (AltGr+1)
==Highlight== Highlight Istaknuta slova (Podrška u nekim alatima)

Također možete primijeniti stil s alatne trake na vrhu područja za uređivanje.

Izbjegavajte previše stilova odjednom kako biste održali jednostavnost i čistoću dokumenta.

Zadatak

Koristeći tablicu s primjerima, isprobajte različite načine oblikovanja teksta u jeziku Markdown. Napišite sljedeću rečenicu:

Ovo je primjer gdje ću koristiti podebljan, ukošen, istovremeno podebljan i ukošen te istaknuti tekst.

Komentar

Ukoliko želimo u dokumentu imati komentar koji se neće prikazivati u oblikovanom tekstu, koristimo sljedeću sintaksu:

<!-- komentar -->

<!--
Ovaj tekst se
neće vidjeti u izlazu,
to je moj komentar.
-->

Boja slova

Za promjenu boje slova koristimo HTML tag font color na primjer: <font color="yellow"> Žuti tekst </font>.

Citiranje

Citat se piše tako da se na početak retka stavi znak >.

Zadatak

Napišite sljedeći citat:

Ja ne mogu nikoga ništa naučiti, ja ih samo mogu natjerati da misle.

-- Sokrat

Numerirane i nenumerirane liste

Numeriranu listu dobijemo stavljajući redne brojeve prije svakog retka:

Za napraviti:

1. zaliti cvijeće,
2. nahraniti psa,
3. prošetati se.

Nenumeriranu listu dobijemo stavljajući znakove - ili * prije svakog retka:

Moram kupiti:

- kruh,
- mlijeko,
- novine.

Potvrdni okvir (engl. checkbox) dobijemo stavljajući znak - [ ], odnosno - [x] prije svakog retka:

- [ ] za neoznačeni potvrdni okvir
- [x] za označeni potvrdni okvir

Zadatak

Napravite sljedeću listu:

  • jezik Markdown
    • jednostavan jezik za pisanje teksta
  • najpoznatiji uređivači jezika Markdown
    1. Visual Studio Code
      • popularno razvojno okruženje
    2. HackMD
      • online uređivač
    3. Zettlr
      • offline uređivač

Linkovi

Za umetanje linka koristi se sljedeća sintaksa:[Naziv linka](http://gaseri.org).

Ukoliko ne želimo koristiti posebni tekst kao link onda je dovoljno unijeti adresu web stranice unutar znakova < i >, a Markdown će automatski kreirati link: <http://gaseri.org>.

Umetanje slika

Za umetanje slike s računala dovoljno je kliknuti na Insert image ikonicu na alatnoj traci. Takvo ubacivanje slike u nekim markdown uređivačima napravit će gomilu ružnog koda. Zato se preporučuje korištenje online slika.

Za umetanje online slika, dovoljno je u zagradu staviti link na sliku: ![Naziv slike](https://group.miletic.net/images/gaseri-logo-animated.webp).

Escape znak

Da bi mogli prikazati neku naredbu ili specijalni znak, koristi se escape znak \ ispred rezervirane riječi ili znaka.

Zadatak

Napišite rečenicu koja će u izlazu Markdowna izgledati ovako:

Riječi možemo napisati *ukošeno*, **podebljano** ili ~~precrtano~~.

Dijelove koda pišemo koristeći oznaku ` (AltGr+7) na početku i na kraju citiranog koda. Ako želimo da se prikaže više linija koda, koristiti ćemo tri oznake ``` na početku i na kraju citiranog koda.

Ukoliko želimo da se kod formatira za određeni programski jezik, pored tri oznake na početku koda napisat ćemo skraćenicu programskog jezika, primjerice ``` python. Primjer:

``` python
for i in [1, 2, 3, 4]:
    print("broj", i)
```

Tablice

Tablice se kreiraju korištenjem okomitih crta (AltGr+W). Ispod zaglavlja potrebno je staviti crtice -:

| broj | ime | oznaka |
| ---- | --- | ------ |
| 1 | Ivo | $4A |
| 5 | Eva | $M5 |
| 2 | Ira | $8D |

Za tablice bez zaglavlja ostavljamo prvi redak praznim. Širine ćelija će se automatski prilagođavati širini teksta:

|   |   |   |
| - | - | - |
| 1 | Ivo | $4A |
| 5 | Eva | $M5 |
| 2 | Ira | $8D |

Poravnavanje tablica

Različita poravnanja teksta u tablicama dobivamo dodavanjem znaka ':' u dio tablice sa crticama:

  • :--- lijevo poravnanje (često zadana postavka, ali ne mora biti),
  • :---: centrirano poravnanje i
  • ---: desno poravnanje.

Zadatak

Promijenite tablicu iz primjera tako da:

  • dodate još jedan redak s podacima po vašoj želji,
  • dodate još stupac prezime s pomno odabranim prezimenima s Acta Croatice,
  • prvi stupac poravnate desno,
  • stupce s imenom i prezimenom poravnate centrirano te
  • stupac s oznakom poravnate lijevo.

Matematičke formule

Markdown koristi jezik LaTeX za pisanje matematičkih formula. Da bi napisali matematičku formulu, koristimo znak $ ukoliko je formula u tekstu ili $$ za samostalnu formulu (u svom retku centrirano). Detaljnije o pisanju matematičkih formula imate na Wikibooks stranici LaTeX/Mathematics.

Zadatak

Napišite sljedeće dvije rečenice:

Pitagorin poučak glasi: \(c^2 = a^2 + b^2\).

i

Jednadžba pravca zadana je izrazom:

\[y = ax + b,\]

pri čemu \(a\) predstavlja koeficijent smjera.

Za pisanje kemijskih formula također koristimo jezik LaTeX i pritom koristimo simbole atoma kao \text{}, npr \text{H}.

Zadatak

Napišite sljedeću kemijsku reakciju:

\(\text{H}_2\text{S}\text{O}_4 + 2\text{Na}\text{O}\text{H} \to 2\text{H}_2\text{O} + \text{Na}^+ + \text{S}\text{O}_4^{2-}\).

Za strelicu koristite oznaku \to.

Emoji

Jezik Markdown podržava korištenje emoji simbola, na način da se emoji kod ubaci između znaka :. Popis emoji kodova možete pronaći na GitHubu ikatyang/emoji-cheat-sheet.

Zadatak

Napišite sljedeće:

ℹ Jedna vrlo važna informacija!
Ja jako ❤ učiti Markdown korištenjem materijala s 😎 web stranica.
I zato sam 🤩.

Izrada prezentacije

Slajdovi u prezentaciji odvajaju se s tri crtice ---, ali obavezno mora biti jedan prazan redak prije i nakon njih. Pod Customize slides options unosimo osnovne postavke naše prezentacije u obliku YAML preslikavanja:

theme: solarized
transition: fade

Zadatak

Kreirajte novi dokument s naslovom "Moja prva prezentacija" koristeći .yaml zaglavlje iz prethodnog primjera.

Teme prezentacije

Možemo birati između desetak osnovnih tema (engl. theme):
black Black background, white text, blue links (default)
white White background, black text, blue links
league Gray background, white text, blue links
beige Beige background, dark text, brown links
sky Blue background, thin dark text, blue links
night Black background, thick white text, orange links
serif Cappuccino background, gray text, brown links
simple White background, black text, blue links
solarized Cream-colored background, dark green text, blue links
blood Dark background, thick white text, red links
moon Dark blue background, thick grey text, blue links

Prijelazi između slajdova

Možemo birati između šest osnovnih prijelaza (engl. transition):
none Switch backgrounds instantly
fade Cross fade — default for background transitions
slide Slide between backgrounds — default for slide transitions
convex Slide at a convex angle
concave Slide at a concave angle
zoom Scale the incoming slide up so it grows in from the center of the screen

Kroz prezentaciju se krećemo uobičajeno: strelicama lijevo desno ili razmaknicom, a možemo i mišem na način da kliknemo na strelicu pri dnu slajda.

Podslajd

Za razliku od klasičnih prezentacija, u Markdownu možete imati i podslajdove ili sekcije. Njih u prezentaciji pregledavamo klikom na strelicu dolje. Vrlo je korisno jer dodaje novu dimenziju prezentaciji.

Podslajd kreiramo tako da slajd odvojimo s četiri ---- crtice umjesto tri --- kao do sada.

Zadatak

Napravite prezentaciju s barem 5 slajdova koja sadrži sljedeće elemente: formulu, tablicu, listu, emoji, link do neke web stranice, sliku i podslajd.

Kada smo gotovi s izradom prezentacije možemo ju prikazati klikom na Share pa pod Slide mode odaberemo Preview.

Author: Matea Turalija, Dejan Ljubobratović