2.1 <pre> teqi
<code> və <pre> teqləri HTML-də kod parçalarını və əvvəlcədən formatlaşdırılmış mətni təqdim etmək üçün istifadə olunur. Onlar oxunaqlılığı artırmağa və orijinal mətnin formatını qorumağa imkan verir, bu da xüsusilə kod nümunələrini və digər texniki materialları göstərmək üçün faydalıdır.
<pre> teqi ("preformatted text" ifadəsinin qısaltması) HTML-də mətni yazıldığı formada, bütün boşluqları, sətir keçidlərini və tabulyasiyaları qorumaqla göstərmək üçün istifadə olunur. Bu, böyük kod parçalarını və ya digər əvvəlcədən formatlaşdırılmış mətni təqdim etmək üçün xüsusilə faydalıdır.
Sintaksis:
<pre>
mətn
</pre>
Nümunə:
<pre>
function sayHello() {
console.log("Salam, dünya!");
}
</pre>
Bu nümunədə <pre> teqinin içindəki mətn bütün boşluq və sətir keçidlərini qorumaqla, orijinal kodda yazıldığı kimi göstəriləcək.
<pre> teqinin xüsusiyyətləri:
<pre>teqi mətndəki bütün boşluqları və sətir keçidlərini saxlayır- O, mətni monospace şriftində göstərir
- Çox zaman kodu vurğulamaq üçün
<code>teqi ilə birlikdə istifadə olunur
2.2 <code> Teqi
<code> teqi mətnin daxilində kod parçalarını və ya digər maşın tərəfindən oxuna bilən məlumatları göstərmək üçün istifadə olunur. Bu, adətən kod sətirlərini, dəyişənləri, funksiyaları və proqramlaşdırmanın digər elementlərini seçmək üçün tətbiq edilir.
<code>kod</code>
Nümunə:
<p>Mesajı konsola çıxarmaq üçün <code>console.log()</code> funksiyasından istifadə edin.</p>
Bu nümunədə "console.log()" mətni kod kimi seçiləcək.
<code> teqinin xüsusiyyətləri:
<code>teqi mətnin monospace şriftində (adətən Courier və ya Consolas) göstərilməsini təmin edir- Formatlama, məsələn, sətir keçidləri və ya məsafələr saxlanılmır
<code>teqi tez-tez başqa teqlərin daxilində istifadə olunur, məsələn<p>,<li>və ya<pre>
2.3 <pre> və <code>-dən istifadə
Böyük kod bloklarını vurğulamaq və formatlamaq üçün tez-tez <pre> və <code> teqləri bir yerdə istifadə olunur. Bu, formatlamanı saxlamağa və mətnin kod kimi vurğulanmasına imkan verir.
Nümunə:
<pre><code>
function helloWorld() {
console.log('Salam, dünya!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Salam, dünya!');
}
</code>
</pre>
Nəticədə, brauzer formatlamanı və kodun vurğulanmasını saxlayaraq mətni göstərəcək.
2.4 Sintaksis vurğusu
Sintaksisi vurğulamaq üçün Prism.js və ya Highlight.js kimi xarici kitabxanalardan istifadə etmək olar, bunlar avtomatik olaraq veb səhifədəki kod sintaksisini tanıyır və vurğulayır.
Highlight.js-ın istifadəsinə misal:
<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('Salam, dünya!');
}
</code></pre>
<body>
</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('Salam, dünya!');
}
</code>
</pre>
<body>
</html>
Nəticədə kod bloku JavaScript sintaksisinə uyğun olaraq avtomatik şəkildə vurğulanacaq.
HTML-dəki <code> və <pre> teqləri, kodun və digər yazıların ilkin formatlaşdırmasını qoruyub saxlamaq üçün güclü vasitələrdir. İstifadə edin və zövq alın.
GO TO FULL VERSION