CodeGym/Kursy/Frontend SELF PL/Tegi do tekstu i kodu

Tegi do tekstu i kodu

Dostępny

2.1 Tag <pre>

Tegi <code> i <pre> są używane w HTML do prezentacji fragmentów kodu i wstępnie sformatowanego tekstu. Pozwalają one poprawić czytelność i zachować formatowanie oryginalnego tekstu, co jest szczególnie przydatne do wyświetlania przykładów kodu i innych materiałów technicznych.

Tag <pre> (skrót od "preformatted text") jest używany do wyświetlania tekstu w HTML w takiej formie, w jakiej jest napisany, zachowując wszystkie spacje, nowa linie i tabulacje. To jest szczególnie przydatne do przedstawiania dużych fragmentów kodu lub innego wstępnie sformatowanego tekstu.

Składnia:

<pre>
  tekst
</pre>

Przykład:

HTML
<pre>
  function sayHello() {
    console.log("Hello, world!");
  }
</pre>

W tym przykładzie tekst wewnątrz tagu <pre> będzie wyświetlany z zachowaniem wszystkich spacji i nowa linie, tak jak jest napisany w kodzie źródłowym.

Cecha tagu <pre>:

  • Tag <pre> zachowuje wszystkie spacje i przeniesienia linii w tekście
  • Wyświetla tekst w czcionce o stałej szerokości
  • Często używany razem z tagiem <code> do wyróżnienia kodu

2.2 Tag <code>

Tag <code> jest używany do oznaczania fragmentów kodu lub innych danych maszynowo czytelnych wewnątrz tekstu. Zwykle stosuje się go do wyróżniania linii kodu, zmiennych, funkcji i innych elementów programowania.

<code>kod</code>

Przykład:

HTML
<p>Aby wyświetlić wiadomość w konsoli, użyj funkcji <code>console.log()</code>.</p>

W tym przykładzie tekst "console.log()" będzie wyróżniony jako kod.

Cecha tagu <code>:

  • Tag <code> wyświetla tekst w czcionce o stałej szerokości (zwykle Courier lub Consolas)
  • Nie zachowuje formatowania, takiego jak przeniesienia linii czy wcięcia
  • Tag <code> często jest używany wewnątrz innych tagów, takich jak <p>, <li> lub <pre>

2.3 Używanie <pre> i <code>

Do wyróżniania i formatowania dużych bloków kodu często używa się tagów <pre> i <code> razem. To pozwala zachować formatowanie i wyróżnić tekst jako kod.

Przykład:

HTML
<pre><code>
function helloWorld() {
  console.log('Hello, world!');
}
      </code></pre>
HTML
<pre>
  <code>
    function helloWorld() {
      console.log('Hello, world!');
    }
  </code>
</pre>

W rezultacie przeglądarka wyświetli tekst z zachowaniem formatowania i wyróżnieniem kodu.

2.4 Podświetlenie składni

Do podświetlania składni można używać zewnętrznych bibliotek, takich jak Prism.js lub Highlight.js, które automatycznie rozpoznają i podświetlają składnię kodu na stronie internetowej.

Przykład użycia Highlight.js:

HTML
<html>
        <head>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
          <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
          <script>hljs.initHighlightingOnLoad();</script>
        </head>
        <body>
          <pre><code>
function helloWorld() {
  console.log('Hello, world!');
}
          </code></pre>
        <body>
      </html>
HTML
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
  </head>
  <body>
    <pre>
      <code>
        function helloWorld() {
          console.log('Hello, world!');
        }
      </code>
    </pre>
  <body>
</html>

W rezultacie blok kodu będzie automatycznie podświetlony zgodnie ze składnią JavaScript.

Tegi <code> i <pre> w HTML to potężne narzędzia do wyświetlania i formatowania kodu i innych tekstów z zachowaniem oryginalnego formatowania. Korzystajcie z przyjemnością.

1
Zadanie
Frontend SELF PL,  poziom 4lekcja 2
Niedostępne
Użycie tagu <pre>
Użycie tagu <pre>
1
Zadanie
Frontend SELF PL,  poziom 4lekcja 2
Niedostępne
Tagi <pre> i <code>
Tagi <pre> i <code>
Komentarze
  • Popularne
  • Najnowsze
  • Najstarsze
Musisz się zalogować, aby dodać komentarz
Ta strona nie ma jeszcze żadnych komentarzy