Logo
Книга для начинающих
ВходРегистрация
/
Веб-разработка
/
Курс HTML Верстка
/

Вставка компьютерного кода в HTML

HTML: Вставка компьютерного кода в HTML

При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:

<p>Здесь видно разметку</p>

Для создания блока с кодом используется тег <code>, внутри которого записывается код на любом языке программирования.

// Пример кода на JavaScript
const square = (num) => {
  return num * num;
};

Тег <code> часто используют вместе с тегом <pre>, что позволяет сохранить форматирование. Если тег <pre> не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег <p>.

Важно, что все теги внутри <code> будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например <span>:

<code>
  &lt;<span>p</span>&gt;Вставляем тег p в виде простого текста &lt;<span>/p</span>&gt;
</code>

Задание

Добавьте любой текст в тег <code> и вставьте его в редактор. Попробуйте различные варианты текстов

Коммерческий опыт и Трудоустройство

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
/
Веб-разработка
/
Курс HTML Верстка
/

Вставка компьютерного кода в HTML

HTML: Вставка компьютерного кода в HTML

При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:

<p>Здесь видно разметку</p>

Для создания блока с кодом используется тег <code>, внутри которого записывается код на любом языке программирования.

// Пример кода на JavaScript
const square = (num) => {
  return num * num;
};

Тег <code> часто используют вместе с тегом <pre>, что позволяет сохранить форматирование. Если тег <pre> не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег <p>.

Важно, что все теги внутри <code> будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например <span>:

<code>
  &lt;<span>p</span>&gt;Вставляем тег p в виде простого текста &lt;<span>/p</span>&gt;
</code>

Задание

Добавьте любой текст в тег <code> и вставьте его в редактор. Попробуйте различные варианты текстов

Коммерческий опыт и Трудоустройство

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
← ПредыдущийСледующий →
← ПредыдущийСледующий →
← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, expect }) => {

  const code = query(document, 'code');
  expect(code).to.be.visible;

});
← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

waiting_clock
← ПредыдущийСледующий →