HTML: Вставка компьютерного кода в HTML
При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:
<p>Здесь видно разметку</p>Для создания блока с кодом используется тег <code>, внутри которого записывается код на любом языке программирования.
// Пример кода на JavaScript
const square = (num) => {
return num * num;
};Тег <code> часто используют вместе с тегом <pre>, что позволяет сохранить форматирование. Если тег <pre> не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег <p>.
Важно, что все теги внутри <code> будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например <span>:
<code>
<<span>p</span>>Вставляем тег p в виде простого текста <<span>/p</span>>
</code>Задание
Добавьте любой текст в тег <code> и вставьте его в редактор. Попробуйте различные варианты текстов
HTML: Вставка компьютерного кода в HTML
При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:
<p>Здесь видно разметку</p>Для создания блока с кодом используется тег <code>, внутри которого записывается код на любом языке программирования.
// Пример кода на JavaScript
const square = (num) => {
return num * num;
};Тег <code> часто используют вместе с тегом <pre>, что позволяет сохранить форматирование. Если тег <pre> не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег <p>.
Важно, что все теги внутри <code> будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например <span>:
<code>
<<span>p</span>>Вставляем тег p в виде простого текста <<span>/p</span>>
</code>Задание
Добавьте любой текст в тег <code> и вставьте его в редактор. Попробуйте различные варианты текстов
Ваше упражнение проверяется по этим тестам
const { test } = require('tests');
test(({ query, expect }) => {
const code = query(document, 'code');
expect(code).to.be.visible;
});Решение учителя откроется через:
20:00
