Take the MDN Survey and help us understand what browser vendors can do to make your life better: https://qsurvey.mozilla.com/s3/MDN-browser-compat-survey

Вы на редактируемой версии веб-документации MDN

Посмотреть как пользователь веб-документации MDN: https://developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Source_mode

Режим источника

 В редакторе MDN есть особая кнопка, позволяющая вам включать режим источника. В этом режиме вы можете видеть HTML-код тела статьи, которую вы пишите. Это руководство поможет вам понять, что вы можете делать в режиме источника, что вам следует с ним делать и, самое важное, чего вам делать не следует.

Перед тем как использовать режим источника, примите во внимание, что мы крайне не рекомендуем использовать режим источника. За исключением случаев, когда то, что вы делаете в режиме источника, соответствует нашему руководству по оформлению кода (мы нуждаемся в опциях, которые, к сожалению, пока что не могут быть созданы без режима источника), вам нет необходимости в использовании этого режима. Смотрите Предостережения ниже.

Включение режима источника

Включить режим источника очень легко. В левом верхнем углу нажмите кнопку Источник.

Partial screenshot of the editor toolbar, with the Source mode button highlighted

Предостережения

Как упомянуто ранее, вам редко понадобится режим источника. Немного вы сможете сделать в этом режиме. Со временем мы обновим интерфейс редактора, чтобы настроить это немного для вас.

Всего того, что неявно описано где-то в руководстве по сотрудничеству с MDN, не должно быть в источнике. Это значит, что:

  • Никаких пользовательских шрифтов и стилей
  • Никаких других цветов. Используйте только те цвета, которые являются частью нашего оформления, задаваемого нашими стилями

Работа в режиме источника

В режиме источника вы работаете с HTML-кодом, который составляет контент страницы вики. Если вы не ограничиваетесь обычным редактором, вы должны убедиться в том, что ваша работа соответствует оформлению и что она работает надёжно и безопасно.

К сожалению, клавиша Tab пока что не работает в режиме источника. Используйте два пробела там, где обычно используете Tab.

Элементы и атрибуты, которые MDN не поддерживает, будут удалены после сохранения документа. Вдобавок HTML документа преобразован, чтобы он был более читаемым и совместимым.

Использование режима источника

Здесь описано несколько случаев, когда единственный способ соответствовать оформлению статей MDN — использовать режим источника. Этот раздел описывает эти ситуации и как правильно выполнять данные функции, чтобы не испортить остальное.

Выделение строк в примерах кода

Блоки примеров кода устанавливаются кнопками PRE или Syntax Highlighter в блоках панели инструментов, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <pre>, содержащий код, и добавить в атрибут class тега <pre>  компонент highlight, отформатированный следующим образом:

  • highlight[НомерСтроки1, НомерСтроки2, ..., НомерСтрокиN]
  • highlight[НомерСтрокиНачальной-НомерСтрокиКонечной, ..., НомерСтрокиN]
"hightlight[" <список-номеров-строк> "]"

Где:
<список-номеров-строк> = [ <номер-строки> | <диапазон-строк> ]#
<диапазон-строк> = <номер-строки> - <номер-строки>
<номер-строки> = <число-токен>

Выделенные строки не отображаются в редакторе MDN.

К примеру, если есть тег <pre class="brush: js;">, и вы хотите выделить строки 4 и 7, то вы меняете тег: <pre class="brush: js; highlight[4, 7]">.

Давайте взглянем на более полный пример:

До выделения С выделением
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

Здесь тег <pre> равен: <pre class="brush: js;">

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var path1 = new Path2D();
path1.rect(10, 10, 100, 100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

А здесь тег <pre> изменён на: <pre class="brush: js; highlight[4, 7]">

Стили, которых нет в панели инструментов

У нас есть несколько стилей, которые нельзя применить, не используя режим источника. К счастью, их редко когда используют. Например:

  • Некоторые особые стили, применяемые на специальных страницах, необходимо добавлять с помощью кода, например, секции с группами. Вот почему у нас есть макросы для составления компонентов целевых страниц автоматически.

Метки документа и участники

Внесли вклад в эту страницу: Ivan961
Обновлялась последний раз: Ivan961,