From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- .../mdn/editor/syntax_highlighting/index.html | 181 +++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 files/ru/orphaned/mdn/editor/syntax_highlighting/index.html (limited to 'files/ru/orphaned/mdn/editor/syntax_highlighting') diff --git a/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html b/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html new file mode 100644 index 0000000000..f959ae7809 --- /dev/null +++ b/files/ru/orphaned/mdn/editor/syntax_highlighting/index.html @@ -0,0 +1,181 @@ +--- +title: Синтаксические выделения +slug: MDN/Editor/Синтаксические_выделения +tags: + - Guide + - Howto + - MDN + - MDN Meta + - Редактор + - Руководство + - выделение +translation_of: MDN/Editor/Syntax_highlighting +--- +
{{MDNSidebar}}
+ +

Синтаксическое выделение кода крайне полезно в статьях. Режим синтаксичесого выделения также используется в нашей системе шаблонов, чтобы определять, как использовать каждый отрывок кода при сборке в готовый экземпляр.

+ +

Поддержка синтаксических выделений

+ +

MDN поддерживает все переодически используемые нами на MDN языки (так же, как и те, что используются лишь иногда):

+ +
+ +
+ +

Синтаксические выделения делают код удобнее в прочтении, особенно когда статья переполнена другими видами текста. Выделения также помогают выделить ошибки в примерах и отрывках кода.

+ +

Добавление выделения

+ +

Как правило, следует выделять любой блок {{HTMLElement("pre")}}, который представляет код, состоящий из более чем одной строчки; выделение однострочного кода будет зависеть от контекста.

+ +

Синтаксические выделения в примерах кода:

+ +
    +
  1. +

    Наберите или вставьте код в статью. Например:

    + +

    void main(int argc, char **argv) {

    + +

    printf("Привет, мир!\n");

    + +

    }

    +
    2. +
  2. +

    Выделите текст и нажмите кнопку PRE в панели инструментов. Результат:

    + + 
    void main(int argc, char **argv) {
+
+printf("Hello world\n");
+
+}
+
    +
    3. +
  3. +

    Нажмите кнопку Syntax Highlighter и выберите название соответстующего коду языка программирования. В нашем примере это C/C++:

    + + 
    void main(int argc, char **argv) {
+
+printf("Hello world\n");
+
+}
    +
    4. +
+ +

Вы можете немного упростить процесс, не нажимая кнопку PRE и сразу выбрав нужный вам язык. Добавление выделения автоматически вставит необходимый блок {{HTMLElement("pre")}}, если он ещё не на месте.

+ +

Далее представлен перевод раздела {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Source_mode", "Выделение строк в режиме источника")}}:

+ +

Выделение линий в примере

+ +

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

+ + + +
"hightlight[" <список-номеров-строк> "]"
+
+Где:
+<список-номеров-строк> = [ <номер-строки> | <диапазон-строк> ]#
+<диапазон-строк> = <номер-строки> - <line-number>
+<номер-строки> = <токен>
+ +

К примеру, если есть тег <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);
+
+ +

Здесь тег {{HTMLElement("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]">

+
+
+ +
+

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

+
+ +

Смотрите также

+ + + +
{{EditorGuideQuicklinks}}
-- cgit v1.2.3-54-g00ecf