: The Inline Code element
Элемент HTML отображает его содержимое в стиле, предназначенном для указания на то, что текст является коротким фрагментом компьютерного кода. По умолчанию текст содержимого отображается с использованием шрифта монопространства по умолчанию пользовательского агента.
Источник для этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в интерактивный проект примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и пришлите нам запрос на принятие изменений.
| Content categories | Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | Нет, открывающий и закрывающий теги обязательны. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement (en-US) interface for this element. |
Атрибуты
Этот элемент включает в себя только глобальные атрибуты.
Пример
Текстовый абзац, включающий :
Вывод, генерируемый этим HTML, выглядит так:
Примечания
Для представления нескольких строк кода, оберните элемент в элемент
. Элемент сам по себе представляет только один элемент кода или строку кода.
CSS-правило может быть определено для того, чтобы селектор code переопределил шрифт браузера по умолчанию. Предпочтения, установленные пользователем, могут иметь приоритет над указанными CSS.
Основы HTML
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Вложенные элементы
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент
. Приведённое ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
13 расширений VSCode, которые пригодятся любому веб-разработчику
Подготовили адаптированный перевод материала JavaScript (Medium) о полезных расширениях VSCode.
Рассмотрим 13 расширений Visual Studio Code (VSCode) ― кроссплатформенного редактора скриптов от Microsoft, ― которые помогают отлаживать код, делать его более читабельным и красивым, а также добавляют полезные функции в рабочее пространство разработчика.
Auto Close Tag
Одно из самых важных расширений, которое автоматически добавляет закрывающий тег. Не требует никаких команд для активации. По умолчанию Auto Close Tag доступно в VSCode.
Auto Rename tag
Beautify
Функция расширения — превратить некрасивый файл без пробелов и символов табуляции, где каждый тег идёт сразу после предыдущего, в более читабельный и красивый.
Чтобы использовать это расширение, сначала нужно нажать F1. Затем в строке написать «Beautify» и выбрать его из списка — код автоматически исправится.
Bracket pair colorizer
Это расширение придаёт каждой паре групп свой цвет — можно быстро и легко найти нужную пару.
ESLint
ESLint статически анализирует код для быстрого поиска проблем, которые может автоматически скорректировать.
Когда расширение определяет проблему, она отмечается красным подчёркиванием. И проблему можно легко исправить самостоятельно.
JavaScript (ES6) code snippets
Одно из классных расширений для JavaScript. Когда пишете что-то в своём коде и забываете, как вызывается функция, расширение автоматически предложит её записать — нужно будет просто нажать Enter.
Профессия
Веб-разработчик
с нуля
Kite делает почти то же самое, что и предыдущее расширение JavaScript (ES6) code snippets. Нейронные сети, которые используются в этом расширении, помогают быстрее писать код.
Слева — ввод символов с использованием расширения Kite, справа — без него
Live Server
При написании или коррекции HTML-, CSS- или JavaScript-файла нажатие команды «Go Live» в нижней части окна VSCode позволит автоматически добавить изменения на веб-страницу без перезагрузки и других действий.
Material Icon Theme
Расширение добавляет иконки к файлам и папкам в верхней части окна VSCode, что позволяет легко ориентироваться в них.
One dark pro
Ещё одно расширение, которое сделает рабочее пространство VSCode более удобным и красивым. Оно меняет стандартную тему на новую красивую.
Open In Browser
Это простое расширение, которое позволяет открывать файлы прямо в браузере.
Как выбрать исполнителя для разработки сайта
Почему Java-разработчик — одна из лучших профессий в программировании для новичка
Как найти работу за рубежом и организовать там свою жизнь
Что делает тег code
bbCode — Bulletin Board Code, или язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS) и форумах. Для форматирования текста используются теги, подобные тегам HTML. В отличие от тегов HTML, теги bbCode заключают в квадратные скобки. Перед отображением страницы движок форума производит разбор текста и преобразовывает bbCode в HTML-код.
На многих форумах возможность использования BB-кодов настраивается администратором индивидуально на каждый раздел форума. Поэтому, прежде чем использовать BB-коды в сообщениях, необходимо убедиться, что они разрешены.
Базовые тэги для работы с текстом:
[p] Обычный абзац с отступом. [/p]
[p= стиль ] Абзац, которому можно задавать стиль. [/p]
* Здесь и далее «стиль» — это аналог style в HTML.
[p=стиль]текст[/p] аналогично в HTML
** С тэгами [p] [/p] можно использовать другие тэги, такие как [b], [i], [s] и т.д.
[span= стиль ] Текст, которому с помощью стиля можно менять свойства. [/span]
[div= стиль ] Ограниченная область, которой с помощью стиля можно менять свойства (положение, границы, отступы, свойства содержимого и т.д.). [/div]
* По умолчанию границы областей не видны. На одной странице может быть сразу несколько областей [div].
Форматирование текста:
[b] Важный текст, полужирный [/b]
[i] Важный текст, курсив [/i]
[bold] Просто полужирный [/bold]
[italic] Просто курсив [/italic]
[u] Подчёркнутый текст [/u]
[s] Зачёркнутый текст [/s] — аналогично варианту [strike] [/strike]
[small] Уменьшенный шрифт [/small]
Знак сноски [sup] сверху [/sup] или индекс [sub] снизу [/sub] от текста
[del] Удалённый текст [/del]
Размеры шрифта:
[size=13pt] Шрифт размером 13 пунктов [size]
[size=15pt] Шрифт размером 15 пунктов [size]
[size=9px] Шрифт размером 9 пикселей [size]
[size=12px] Шрифт размером 12 пикселей [size]
[size=15px] Шрифт размером 15 пикселей [size]
[size=0] Размер 0 [size]
[size=+1] Размер +1 [size]
[size=+2] Размер +2 [size]
Возможные варианты размеров шрифтов (визуальная оценка) доступны здесь.
Заголовки:
[h1] Заголовок 1-го уровня [/h1]
[h2] Заголовок 2-го уровня [/h2]
[h3] Заголовок 3-го уровня [/h3]
[h4] Заголовок 4-го уровня [/h4]
[h5] Заголовок 5-го уровня [/h5]
[h6] Заголовок 6-го уровня [/h6]
Оформление текста с помощью шрифтов:
[font= Times New Roman ] Шрифт Comic Sans Ms [/font]
[font= Monotype Corsiva ] Шрифт Monotype Corsiva [/font]
[font= Tahoma ] Шрифт Tahoma [/font]
Возможные варианты типов шрифтов (наименования и визуальная оценка) доступны здесь.
Оформление текста с помощью цвета:
[color= Red ] Красный текст [/color]
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.
[color= #0000ff ] Синий текст [/color]
* Цифра #0000ff означает синий цвет в RGB палитре.
[bg= #eeeeff ] Голубой фон [/bg]
* У фона тоже можно менять цвет.
[color= #0000ff ] [bg= lightgray ] Синий текст, серый фон [/bg] [/color]
Некоторые предопределённые цвета:
Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff
Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего ( RR GG BB ):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF
Возможные варианты палитры цветов и их кодов/наименований доступны здесь.
Выравнивание текста:
[left] Выравнивание текста по левой стороне [/left]
[left стиль ] Выравнивание по левой стороне со стилем [/left]
[pleft] Выравнивание в абзаце влево [/pleft]
[center] Выравнивание текста по центру [/center]
[center стиль ] Выравнивание по центру со стилем [/center]
[pcenter] Выравнивание в абзаце по центру [/pcenter]
[right] Выравнивание текста по правой стороне [/right]
[right стиль ] Выравнивание по правой стороне со стилем [/right]
[pright] Выравнивание в абзаце справа [/pright]
[justify] Выравнивание текста по обеим сторонам [/justify]
[justify стиль ] Выравнивание по обеим сторонам со стилем [/justify]
[pjustify] Выравнивание в абзаце по обеим сторонам [/pjustify]
* Выравнивание текстов по обеим сторонам отображается для текстов, имеющих длину более одной строки.
Оформление сносок (комментариев) с отступом абзаца:
[q свойства ] Цитата в строке со свойствами [/q]
[quote]
Процитированный в отдельном блоке текст, у которого будет
небольшой отступ слева и особое оформление (стиль форума).
[/quote]
Примеры:
[quote]Lorem ipsum dolor sit amet[/quote]
[quote=John Doe]Lorem ipsum dolor sit amet[/quote]
[quote=John Doe;54525188]Lorem ipsum dolor sit amet[/quote] 
Форматирование параграфов и областей:
Используем тэг [ul] или [list] для маркированных списков:
[ul]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ul]
Для пронумерованных списков используем тэг [ol]:
[ol]
[*] Один из пунктов списка [/*]
[*] Другой такой пункт [/*]
[*] Ещё один пункт. [/*]
[/ol]
Закрывающий тэг [/*] не обязателен для использования:
[list]
[*] Один из пунктов списка
[*] Другой такой пункт
[*] Ещё один пункт.
[/list]
Также возможно прямое указания вида списка:
[list=1] — пронумерованный список
[list=a] — алфавитный список
[list=i] — список, пронумерованный римскими цифрами
[img] http://img.cx/img/primer.jpg [/img] — пример вставки картинки.
[imgleft] http://img.cx/img/primer.jpg [/imgleft] — картинка слева.
* Данный код аналогичен коду в HTML:
[imgright] http://img.cx/img/primer.jpg [/imgright] — картинка справа.
* Данный код аналогичен коду в HTML:
[imgcenter] http://img.cx/img/primer.jpg [/imgcenter] — картинка по центру.
* Данный код аналогичен коду в HTML:
Аналогичные тэги с названиями и всплывающими подсказками:
Важно! В названии картинки нельзя использовать кавычки!
[img Название ] http://img.cx/img/primer.jpg [/img] — пример вставки картинки.
[imgleft Название ] http://img.cx/img/primer.jpg [/imgleft] — картинка слева.
[imgright Название ] http://img.cx/img/primer.jpg [/imgright] — картинка справа.
[imgcenter Название ] http://img.cx/img/primer.jpg [/imgcenter] — картинка по центру.
Картинки с указанными размерами:
[img=300×500] http://img.cx/img/primer.jpg [/img] — пример картинки с размером.
* Данный код аналогичен коду в HTML:
[imgleft=300×500] http://img.cx/img/primer.jpg [/imgleft] — картинка слева, с размером.
[imgright=300×500] http://img.cx/img/primer.jpg [/imgright] — картинка справа, с размером.
Вставка больших изображений с полосами прокрутки:
[image] http://www.hdsw.ru/pics/IMG_1734.jpg [/image] — картинка в выделенной области, если она больше доступного размера отображения на форуме.
Миниатюры изображения со ссылкой на оригинал:
[imgmini=_ адрес-mini ] адрес [/imgmini] — открыть изображение в новом окне.
* Данный код аналогичен коду в HTML:
[imgmini= адрес-mini ] адрес [/imgmini] — открыть изображение в том же окне.
* Данный код аналогичен коду в HTML:
[url] http://www.hdsw.ru/ [/url] — обычная ссылка.
* Данный код аналогичен коду в HTML:
http://www.hdsw.ru/
Картинка-ссылка (баннер):
[url= http://www.hdsw.ru/ ] [img] http://img.cx/img/primer.jpg [/img] [/url] 
[email] e-mail@example.com [/email] — почтовый ящик как ссылка.
[email= e-mail@example.com ] текст под ссылкой на e-mail [/email]
[icq] номер ICQ [/icq] — вставка ICQ-номера как ссылки.
[skype] логин в Skype [/skype] — вставка учётной записи Skype как ссылки.
[wmid] номер WMID [/wmid] — вставка WebMoney-идентификатора WMID как ссылки.
[wiki] искомое значение [/wiki] — ссылка на значение в энциклопедии.
[wiki= искомое значение ] отображаемый текст [/wiki] — ссылка в текущем тексте (любом) на нужное значение в энциклопедии.
Ссылки внутри форумов и блогов:
[user] имя_пользователя [/user] — ссылка на профиль пользователя.
[user= ID_пользователя ] имя_пользователя_произвольно [/user] — ссылка на профиль пользователя с произвольным текстом.
[forum= ID_форума ] Описание [/forum] — ссылка на подфорум по его ID.
[blog= ID_блога ] Описание [/blog] — ссылка на блог по его ID.
[thread] ID_темы [/thread] — ссылка на тему по его ID.
[thread= ID_темы ] Описание [/thread]
[topic= ID_темы ] Описание [/topic] — ссылка на тему по его ID.
[post] ID_сообщения [/post] — ссылка на сообщение по его ID.
[post= ID_сообщения ] Описание [/post]
[snapback] ID_сообщения [/snapback] — вставляет маленькую иконку со ссылкой на указанное сообщение по его ID.
[entry= ID_поста ] Описание [/entry] — ссылка на пост в блоге по его ID.
Пример простейшей таблицы:
| Строка 1, колонка 1 | Строка 1, колонка 2 |
| Строка 2, колонка 1 | Строка 2, колонка 2 |
[table]
[tr]
[td] Строка 1, колонка 1 [/td]
[td] Строка 1, колонка 2 [/td]
[/tr]
[tr]
[td] Строка 2, колонка 1 [/td]
[td] Строка 2, колонка 2 [/td]
[/tr]
[/table]
В таблице можно указывать произвольные стили и классы. Примеры:
[table style=»border: 1px solid red»]
[tr rowspan=»2″]
[td style=»font-size: 18pt»]
[br] — тэг переноса строки.
[bs] — вставка неразрывного пробела, преобразуется в
[tab] — вставка отступа на 32 пикселя (4 символа), аналог символа TAB.
[ucase] ТЕКСТ [/ucase] — выделенный текст в верхнем регистре.
[lcase] текст [/lcase] — выделенный текст в нижнем регистре.
[highlight] Этот текст выделен [/highlight] — позволяет выделить ваш текст (цветом/фоном/шрифтом).
[extract] текст [/extract] — позволяет выделить часть поста в блоге, которая будет показана на титульной странице блога и в RSS feed. Остальной текст будет показан только на странице поста.
[noparse] [b]значение[/b] [/noparse] — отменяет распознавание BB-кодов в выделенном тексте.
[noindex] текст [/noindex] — выделенный текст не будет индексироваться поисковыми системами.
[abbr] аббревиатура [/abbr] — указывает, что последовательность символов является аббревиатурой.
[abbr= расшифровка_аббревиатуры ] аббревиатура [/abbr]
[cite] Сноска [/cite] — помечает текст как цитату или сноску на другой материал.
[cite свойства ] Сноска [/cite]
[address] адрес [/address] — тэг предназначен для хранения информации об авторе и может включать в себя любые элементы вроде ссылок, текста, выделений и т.д.
[address свойства ] адрес [/address]
[text-demo] — подключает файл text-demo.txt (можно использовать для проверки стилей шаблона).
[hr] — тэг вставки линии на всю ширину доступной области:
Для работы с терминами используется тройка элементов [dl], [dt], [dd], предназначенных для создания списка определений. Каждый такой список начинается с контейнера [dl], куда входит тег [dt], создающий термин и тег [dd], задающий определение этого термина. Закрывающий тег [/dt] не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
Пример:
[dl]
[dt] Термин 1 [/dt]
[dd] Определение термина 1 [/dd]
[dt] Термин 2 [/dt]
[dd] Определение термина 2 [/dd]
[/dl]
Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и дается его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Тег [dfn] применяется для выделения таких терминов, при их первом появлении в тексте.
[dfn] Новый термин [/dfn]
[dfn свойства ] Новый термин [/dfn]
— универсальный тег.
Тэги под специализированные видеохостинги с использованием идентификатора:
[youtube] идентификатор [/youtube] — вставка видеоролика с YouTube.com
[rutube] идентификатор [/rutube] — вставка видеоролика с RuTube.ru
[googlevideo] идентификатор [/googlevideo] — вставка видеоролика с Google.com
[veoh] идентификатор [/veoh] — вставка видеоролика с Veoh.com
[smotri] идентификатор [/smotri] — вставка видеоролика с Smotri.com. Возможна модификация [smotricomvideo]
Тэги под специализированные видеохостинги с использованием ссылки:
[mailvideo] ссылка [/mailvideo] — вставка видеоролика с Mail.ru
[yandexvideo] ссылка [/yandexvideo] — вставка видеоролика с Yandex.ru
Любые flash-объекты (сторонние видеохостинги, flash-игры, flash-баннеры и т.д.) можно использовать с помощью: [flash= ширина,высота ] адрес_объекта [/flash]
* Размер области определяется в пикселях.
Примеры:
[youtube]9L4YCG7dJeE[/youtube]
[googlevideo]8420876204610684862[/googlevideo]
[veoh]v922088SBwxySaR[/veoh]
[yandexvideo]pugachev-alexander/1rgzbi6w6b.809/[/yandexvideo]
BB-код в том числе предназначен для публикации примеров различных кодов. С помощью специального форматирования код будет только отображаться, но не исполняться. Кроме того, программный код будет отображаться с «цветовой подсветкой» (highlight).
[prog= язык ] текст программы [/prog]
где «язык» может принимать значения: cpp, objectivec, cs, delphi, avrasm, 1c, python, profile, perl, erlang, erlang_repl, apache, nginx, php, xml, html, css, java, javascript, vbscript, sql, lisp, django, scala, ruby, go, lua, vala, rsl, rib, mel, smalltalk, bash, cmake, axapta, vhdl, parser3, tex, haskell, dos, ini, diff, no-highlight.
[code] текст моноширинным шрифтом [/code] — любой код и текст.
[code= php ] текст [/code] — код языка PHP с соответствующей «цветовой подсветкой».
[php] отображаемый HTML-код [/php] — код PHP с «цветовой подсветкой». 
[html] отображаемый HTML-код [/html] — код HTML с «цветовой подсветкой». 
[sql] отображаемый HTML-код [/sql] — SQL-код с «цветовой подсветкой».
| Код | Символ | Для набора на клавиатуре нажмите * |
| « | « | ALT+0171 |
| » | » | ALT+0187 |
| — | — | ALT+0151 |
| © | © | ALT+0169 |
| ® | ® | ALT+0174 |
| ™ | ™ | ALT+0153 |
| / | / | |
| > | ||
| ALT+0160 — неразрывный пробел** |
* — Зажмите кнопку ALT, наберите код, отпустите ALT. Работает в Windows.
** — Вставьте подряд несколько таких пробелов чтобы они не сливались в один:
— теперь слева отступ в шесть пробелов!
Возможные варианты символов, их названий и кодов доступны здесь.
