Koodilohko

Koodilohko on luotu koodin näyttämiseen. Koodilohko tukee myös rivinumeroita ja kopiointipainiketta. Lisäksi koodilohko tukee useiden kielien syntaksin korostusta, ja voit antaa koodille otsikon. Voit myös merkitä koodin rivejä, jotka haluat korostaa.

```html title="/var/www/html/index.html"
<!DOCTYPE html>
<html>
  <head>
    <title>Esimerkki</title>
  </head>
  <body>
    <h1>Esimerkki</h1>
    <p>Tämä on esimerkki.</p>
  </body>
</html>
```

Koodilohko muotoillaan seuraavanlaiseksi:

/var/www/html/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Esimerkki</title>
  </head>
  <body>
    <h1>Esimerkki</h1>
    <p>Tämä on esimerkki.</p>
  </body>
</html>

Rivien korostaminen

Voit korostaa koodilohkon rivejä tietyillä kommenteilla. Tee kommentti käyttämäsi kielen kommenttityylillä. Esimerkiksi:

Yksi rivi kerrallaan:

```js
function helloWorld() {
  // highlight
  console.log('Hei maailma!');
}
```

function helloWorld() {
  console.log('Hei maailma!');
}

Useampi rivi kerralla:

```js
function helloWorld() {
  // highlight-start
  console.log('Hei maailma!');
  console.log('Mitä kuuluu?');
  console.log('Hyvää päivää!');
  // highlight-end
}
```

function helloWorld() {
  console.log('Hei maailma!');
  console.log('Mitä kuuluu?');
  console.log('Hyvää päivää!');
}

Komentorivin näyttäminen

Voit näyttää koodilohkossa myös komentorivin. Tämä onnistuu lisäämällä komentorivin alkuun terminal:

```sh
// terminal
echo "Hei maailma!"
```

echo "Hei maailma!"

Komentorivityyli löytyy myös MariaDB:lle ja MySQL:lle

```sh
// mariadb
CREATE USER 'wordpress';
```

CREATE USER 'wordpress';

Kommentti koodilohkossa

Jos jokin koodikieli ei tue kommentteja, voit lisätä kommentin koodilohkoon seuraavasti:

```txt
// comment
Tämä on kommentti.
Tämä taas normaalia tekstiä
```


Tämä on kommentti.
Tämä taas normaalia tekstiä

Tuetut kielet

Koodilohko tukee seuraavia kieliä:

txt (oletus, tavallinen teksti)
bash, sh, shell Bash
log Lokitiedostot
diff Diff-tiedostot
ini INI-tiedostot
json JSON-tiedostot
yaml, yml YAML-tiedostot
mermaid Mermaid-kaaviot
nginx NGINX-konfiguraatiot
php PHP-koodi
sql SQL-koodi
markup, html, xml, svg, mathml, ssml, atom, rss Muotoilu
jsx JSX-koodi

tsx TSX-koodi
swift Swift-koodi
kotlin Kotlin-koodi
objectivec, objec Objective-C-koodi
js, javascript, js-extras JavaScript-koodi
reason Reason-koodi
rust Rust-koodi
graphql GraphQL-koodi
go Go-koodi
cpp C++-koodi
markdown Markdown-muotoilu
python, py Python-koodi
java Java-koodi

Jos haluat lisätä tuen uudelle kielelle, voit pyytää sitä GitHubissa tai lisätä sen itse dokumentaation asetuksiin, tiedostoon docusaurus.config.js asetukseen config.themeConfig.prism.additionalLanguages. Koodikielet, jotka eivät ole Prismissä, eivät toimi. Listan tuetuista kielistä löydät Prismin sivuilta.

Monikielinen tuki

Voit halutessasi näyttää useamman kielen tai tavan koodilohkoissa. Tämä onnistuu välilehdillä. Voit luoda välilehdet tabs-komponentilla. Jokaisella välilehdellä on oma koodilohkonsa. Tämä onnistuu esimerkiksi seuraavasti:

<Tabs>
  <TabItem value="js" label="JavaScript">
    ```js
    function helloWorld() {
      console.log('Hei maailma!');
    }
    ```
  </TabItem>
  <TabItem value="py" label="Python">
    ```py
    def hello_world():
      print("Hei maailma!")
    ```
  </TabItem>
  <TabItem value="java" label="Java">
    ```java
    class HelloWorld {
      public static void main(String args[]) {
        System.out.println("Hei maailma!");
      }
    }
    ```
  </TabItem>

Näin saamme koodilohkon kolmelle eri kielelle:

JavaScript
Python
Java

function helloWorld() {
  console.log('Hei maailma!');
}

def hello_world():
  print("Hei maailma!")

class HelloWorld {
  public static void main(String args[]) {
    System.out.println("Hei maailma!");
  }
}

Koodilohko

Rivien korostaminen​

Yksi rivi kerrallaan:​

Useampi rivi kerralla:​

Komentorivin näyttäminen​

Kommentti koodilohkossa​

Tuetut kielet​

Monikielinen tuki​