Синтаксические выделения
Синтаксическое выделение кода крайне полезно в статьях. Режим синтаксичесого выделения также используется в нашей системе шаблонов, чтобы определять, как использовать каждый отрывок кода при сборке в готовый экземпляр.
Поддержка синтаксических выделений
MDN поддерживает все переодически используемые нами на MDN языки (так же, как и те, что используются лишь иногда):
- Bash shell
-
C/C++
-
CSS
- HTML
- XML
-
Java
-
JavaScript
-
JSON
-
PHP
-
Python
-
SQL
Синтаксические выделения делают код удобнее в прочтении, особенно когда статья переполнена другими видами текста. Выделения также помогают выделить ошибки в примерах и отрывках кода.
Добавление выделения
Как правило, следует выделять любой блок <pre>
, который представляет код, состоящий из более чем одной строчки; выделение однострочного кода будет зависеть от контекста.
Синтаксические выделения в примерах кода:
-
Наберите или вставьте код в статью. Например:
void main(int argc, char **argv) {
printf("Привет, мир!\n");
}
-
Выделите текст и нажмите кнопку PRE в панели инструментов. Результат:
void main(int argc, char **argv) { printf("Hello world\n"); }
-
Нажмите кнопку Syntax Highlighter и выберите название соответстующего коду языка программирования. В нашем примере это C/C++:
void main(int argc, char **argv) { printf("Hello world\n"); }
Вы можете немного упростить процесс, не нажимая кнопку PRE и сразу выбрав нужный вам язык. Добавление выделения автоматически вставит необходимый блок <pre>
, если он ещё не на месте.
Далее представлен перевод раздела Выделение строк в режиме источника в [Page not yet written]:
Выделение линий в примере
Блоки примеров кода устанавливаются кнопками PRE или Syntax Highlighter в блоках панели инструментов, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <pre>
, содержащий код, и добавить в атрибут class
тега <pre>
компонент highlight
, отформатированный следующим образом:
-
highlight[НомерСтроки1, НомерСтроки2, ..., НомерСтрокиN]
-
highlight[НомерСтрокиНачальной-НомерСтрокиКонечной, ..., НомерСтрокиN]
"hightlight[" <список-номеров-строк> "]" Где: <список-номеров-строк> = [ <номер-строки> | <диапазон-строк> ]# <диапазон-строк> = <номер-строки> - <line-number> <номер-строки> = <токен>
К примеру, если есть тег <pre class="brush: js;">
, и вы хотите выделить строки 4 и 7, то вы меняете тег: <pre class="brush: js; highlight[4, 7]">
.
Давайте взглянем на более полный пример:
До выделения | С выделением |
---|---|
Здесь тег |
А здесь тег |
Выделенные строки не отображаются в редакторе MDN.