Тег code html пример
Тег (от англ. code — код) предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
Сюда относятся имена переменных, ключевые слова, тексты функции и т. д. Браузеры обычно отображают содержимое контейнера как моноширинный текст уменьшенного размера.
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
Для этого элемента доступны универсальные атрибуты.
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
html> head> meta charset="utf-8" /> title>CODEtitle> head> body> p>Код программыp> pre> code> function checkParent (src, dest) < while (src != null) < if (src.tagName == dest) return src src = src.parentElement >return null > code> pre> body> html>
Тег code html пример
Тег для оформления программного кода.
Время чтения: меньше 5 мин
Обновлено 7 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег используется для вывода фрагментов программного кода.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
const element = document.getElementById('#some-id');
code> const element = document.getElementById('#some-id'); code>
Как понять
Скопировать ссылку «Как понять» Скопировано
используется для вывода любой информации, которая может быть обработана компьютером как программный код. Помимо непосредственно кода, сюда также относятся названия файлов, конфигурационные файлы, XML-элементы и т. д.
Тег по умолчанию строчный и браузеры не применяют к тексту внутри него никакого форматирования, кроме font — family : monospace; , и не подсвечивают синтаксис. Они не анализируют содержимое и не делают никаких предположений, на каком языке программирования написан вставленный код.
Изначально предназначен для вывода информации во фразовом контексте. Например, мы можем вставить код в середину предложения.
Пожалуй,
i
— самое часто встречающееся имя переменной.p>Пожалуй, code>icode> — самое часто встречающееся имя переменной.p>
Если мы хотим вывести блок кода, то нужно дополнительно использовать тег для вывода кода с сохранением форматирования.
for(let i = 0; i < 10; i++) console.log(i) >
pre>code> for(let i = 0; i < 10; i++)< console.log(i) >code>pre>
Подсветка синтаксиса
Скопировать ссылку «Подсветка синтаксиса» Скопировано
Если мы хотим красивого форматирования и подсветки синтаксиса, мы должны использовать сторонние инструменты и дополнительно пометить код, например, при помощи атрибута class . Для этого обычно используются библиотеки, такие как highlight.js и prism.js.
Например, они генерируют HTML приблизительно такого вида:
const element = document . getElementById ( '#some-id' )
pre class="block-code font-theme font-theme--code" data-lang="html"> code class="block-code__highlight"> span class="token keyword">constspan> element span class="token operator">=span> span class="token dom variable">documentspan> span class="token punctuation">.span> span class="token method function property-access">getElementByIdspan> span class="token punctuation">(span> span class="token string">'#some-id'span> span class="token punctuation">)span> code> pre>
А пользователи его увидят вот так:
const element = document.getElementById('#some-id')
const element = document.getElementById('#some-id')
HTML Программный код
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов , и . Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.
Тег
Тег — cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом , то можно сохранить исходное форматирование кода.
Тег служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.
Внимание: В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.
Пример: использования элементов и
Внутри элемента браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
if (document.getElementsByClassName) < x = document.getElementsByClassName("pagination") if ( x.length>y)Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.
if (document.getElementsByClassName) < x = document.getElementsByClassName("pagination") if ( x.length>y)
Теги иТег отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как , , .Пример: элементы и
Текст, который пользователь должен ввести с клавиатуры поместите
в элемент-контейнер «kbd».Введите текст: Это — текст, вводимый с клавиатуры
Это — текст, который помещен в контейнер «samp»
Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».Введите текст: Это — текст, вводимый с клавиатуры
Это — текст, который помещен в контейнер «samp»
Тег
Тег используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.
Пример: элементы
Кинетическая энергия тела:
Тег code html пример
Тег используется для выделения фрагмента кода, который должен отображаться моноширинным шрифтом и сохранять пробельные символы и переносы строк.
const greeting = 'Привет, мир!';
Примеры использования
Приведём фрагмент кода:
function sum(a, b)
Вы можете объявить переменные с помощью ключевых слов
var
,let
илиconst
.
Используйте
<br>
тег, чтобы добавить перенос строки.
Нажмите
Ctrl+C
, чтобы скопировать.
Используйте
<code>
тег, чтобы отобразить код.
Зайдите на сайт
https://example.com
.Для чего использовать тег
- Отобразить фрагменты кода на веб-странице.
- Отформатировать код моноширинным шрифтом с сохранением пробелов и переносов строк.
- Выделить код. Используйте тег с библиотекой подсветки синтаксиса, чтобы показать цветную кодировку синтаксиса.
- Отобразить сочетания клавиш или комбинаций.
- Показать имена переменных, функции или методы.
- Выделить URL-адрес или фрагменты кода, содержащие URL-адреса.
Глобальные атрибуты
Ограничения
Элемент не следует использовать для форматирования текста типографским способом. Тег предназначен для отображения компьютерного кода, а не для обычного текста. Кроме того, не нужно использовать для синтаксиса разметки — вместо него следует использовать элемент .
Нюансы
- Если содержит HTML-элементы < , >или & , то их нужно экранировать с помощью < , > или & .
- Если тег используется для отображения кода с отступом, то пробелы или табуляции, используемые для отступа, могут привести к тому, что код переместится на следующую строку (если элемент контейнера недостаточно широк).
Чем заменить тег
Чтобы отобразить программный код, используйте тег . Однако, если вам нужно отобразить синтаксис разметки или текст, который должен отображаться с форматированием фиксированной ширины, используйте тег .
🔡 Другие теги для изменения текста
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.