11

Часто видел, что код в вопросах по web-дизайну оформлен в виде отдельного блока с кнопкой запуска. Что это и как сделать такое у себя?

P. S.: В вопросе «Как делать спойлер?» речь идёт о вставке свёрнутого сниппета. Здесь же спрашивается о том, что это вообще такое.

4
  • Возможный дубликат вопроса: Как делать спойлер?
    – Grundy Мод
    Commented 24 янв. 2017 в 10:30
  • 3
    @Grundy причем тут спойлер?
    – αλεχολυτ Мод
    Commented 24 янв. 2017 в 11:14
  • @alexolut, при том, что в том вопросе имелся ввиду сниппет, скрытый по умолчанию :-)
    – Grundy Мод
    Commented 24 янв. 2017 в 11:15
  • 2
    @Grundy речь об этом вопросе, а не о том :)
    – αλεχολυτ Мод
    Commented 24 янв. 2017 в 11:16

1 ответ 1

11

Обычно код форматируют с помощью четырёх пробелов в начале каждой строки кода:

<html>
    <head></head>
    <body></body>
</html>

Однако, если код написан на языках HTML, CSS и JavaScript, имеется возможность воспользоваться расширенным форматированием с помощью так называемого сниппета:

Да, ниже картинка. Сниппеты на Мете не работают, поэтому пришлось пойти на маленькую хитрость.

Образец сниппета

Сниппет обладает следующим преимуществом над обычным, блочным форматированием кода: он позволяет объединять HTML, CSS и JS код воедино, давая возможность «живого», интерактивного предпросмотра получившегося результата:

Образец предпросмотра сниппета

Для того, чтобы получить этот блок, необходимо воспользоваться следующим кодом:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

Код на JavaScript

<!-- language: lang-css -->

Стили на CSS

<!-- language: lang-html -->

Код на HTML

<!-- end snippet -->

Особенности:

  • В HTML-коде допускается опускание следующих тегов:

    • <html>, если у него отсутствуют атрибуты или тег <head>,
    • <html> и <body>, если у <body> тоже отсутствуют атрибуты.
  • Также допускается опускание и целых блоков language.

То есть подобная конструкция тоже допустима:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

<p>Привет, мир!</p>

<!-- end snippet -->

И ещё. Заметили маленькую ссылку «редактировать пример кода» под сниппетом? При нажатии на неё открывается панель один-в-один как на JSFiddle:

введите сюда описание изображения

8
  • Только добавлю, что тег body в разметку писать не надо - он там уже есть.
    – Qwertiy Мод
    Commented 25 янв. 2017 в 9:28
  • 1
    а блок с кодом вставляется перед закрытием тега body, поэтому нет нужды в onload
    – Grundy Мод
    Commented 29 янв. 2017 в 9:12
  • @Grundy, onload как раз таки имеет место быть (т.к. могут подгружаться сторонние ресурсы вроде картинок), а вот какой-нибудь document.addEventListener('DOMContentLoaded') действительно не нужен.
    – Petr Flaks
    Commented 29 янв. 2017 в 16:56
  • Сниппеты уже включили, можно убрать маленькую хитрость
    – Grundy Мод
    Commented 19 мая 2017 в 9:04
  • @Grundy, включение сниппетов поломало форматирование блоков сырого кода (пример: «необходимо воспользоваться следующим кодом...»). Commented 19 мая 2017 в 12:40
  • @Arhad, что-то не то
    – Grundy Мод
    Commented 19 мая 2017 в 13:32
  • @Grundy, именно. Раньше это был блок кода с тегами <!-- language: lang-js -->, которые выводились как есть. А после включения поддержки сниппетов этот тег стал интерпретироваться вне зависимости от наличия четырёх пробелов перед ним. Commented 19 мая 2017 в 16:47
  • @Arhad, поправил
    – Grundy Мод
    Commented 19 мая 2017 в 16:54

Войдите, чтобы ответить на этот вопрос.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .