Как вставить код на сайт

Вы хотите выложить на сайте код с каким то решением или инструкцией, но у вас возникают с этим проблемы? Узнайте как сделать всё правильно и вывести код так как он отображается в редакторе кода.

Казалось бы не сложная задача - вставить код, но могут появиться трудности если не знать про некоторые правила о которых и будет речь.

 

Вставить код как код

Чтобы вставить код на сайт, его оборачивают в теги <pre> и <code>. Получается следующая конструкция:

<pre><code>Тут код</code></pre>

Если объяснять коротко и по делу, то в данной конструкции тег code сообщает браузеру что внутри него находится программный код, а тег pre сохраняет переносы строк, табуляцию (отступы) строк и пробелы.

 

Вроде бы всё понятно и нет ничего сложного, но проблема заключается в том, что если вы захотите вставить код html или код содержащий символы <, >, &, ", `, то могут возникнуть проблемы - браузер обработает ваш код как хтмл. Например, если вы в коде захотите показать код формы с кнопкой, полями ввода и т.п., браузер выведит именно форму, а не её код.

 

Экранирование кода

Чтобы этого не произошло, делают так называемое экранирование кода - это когда упомянутые выше символы замеяют на их UTF-коды.

Схема замены символов на utf-коды

Ниже показаны символы и коды которые их заменяют:

< → &lt;

> → &gt;

& → &amp;

" → &quot;

` → &#x60;

В ручную конечно же заменой символов никто не занимается - это делается програмно. Самым доступным для этого инструментом является онлайн экранирование кода, где за мгновение все символы будут заменены, а код сохранит все пробелы и переносы и будет полностью готов к вставке в конструкцию тегов <pre><code></code></pre>

В результате после экранирования можно вставлять любой фрагмент кода. Пример такой вставки после экранирования кода вы можете увидеть ниже:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Заголовок</title>
</head>
<body>
    
    
</body>
</html>

 

Как задать кодировку внутри файла css
Как задать кодировку внутри файла css Как правильно задать кодировку utf-8 внутри css-файла. В случаях когда внутри css файлов со стилями применяется вывод текста кириллическими буквами через css-свойство content, чтобы не было багов в виде кракозяб и прочих непонятностей, задают кодировку...
Комментарии 0

*** чтобы писать комментарии.