aboutsummaryrefslogtreecommitdiff
path: root/files/ru/orphaned/mdn/editor/source_mode/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
commitc058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch)
treedf20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/orphaned/mdn/editor/source_mode/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip
unslug ru: move
Diffstat (limited to 'files/ru/orphaned/mdn/editor/source_mode/index.html')
-rw-r--r--files/ru/orphaned/mdn/editor/source_mode/index.html128
1 files changed, 128 insertions, 0 deletions
diff --git a/files/ru/orphaned/mdn/editor/source_mode/index.html b/files/ru/orphaned/mdn/editor/source_mode/index.html
new file mode 100644
index 0000000000..af5d7b5535
--- /dev/null
+++ b/files/ru/orphaned/mdn/editor/source_mode/index.html
@@ -0,0 +1,128 @@
+---
+title: Режим источника
+slug: MDN/Editor/Source_mode
+tags:
+ - Guide
+ - MDN Meta
+ - NeedsContent
+ - editor
+ - Редактор MDN
+ - Руководство
+translation_of: MDN/Editor/Source_mode
+---
+<div>{{MDNSidebar}}</div>
+
+<p class="summary"> В редакторе MDN есть особая кнопка, позволяющая вам включать режим источника. В этом режиме вы можете видеть HTML-код тела статьи, которую вы пишите. <span class="seoSummary">Это руководство поможет вам понять, что вы <strong>можете</strong> делать в режиме источника, что вам <strong>следует</strong> с ним делать и, самое важное, чего вам делать <strong>не следует</strong>.</span></p>
+
+<div class="blockIndicator warning">
+<p>Перед тем как использовать режим источника, примите во внимание, что мы <em>крайне</em> <strong>не</strong> рекомендуем использовать режим источника. За исключением случаев, когда то, что вы делаете в режиме источника, соответствует нашему руководству по оформлению кода (мы нуждаемся в опциях, которые, к сожалению, пока что не могут быть созданы без режима источника), вам нет необходимости в использовании этого режима. Смотрите {{anch("Предостережения")}} ниже.</p>
+</div>
+
+<h2 id="Включение_режима_источника">Включение режима источника</h2>
+
+<p>Включить режим источника очень легко. В левом верхнем углу нажмите кнопку <strong>Источник</strong>.</p>
+
+<p><img alt="Partial screenshot of the editor toolbar, with the Source mode button highlighted" src="https://mdn.mozillademos.org/files/15295/Source%20mode%20button.png" style="height: 98px; width: 267px;"></p>
+
+<h2 id="Предостережения">Предостережения</h2>
+
+<p>Как упомянуто ранее, вам редко понадобится режим источника. Немного вы сможете сделать в этом режиме. Со временем мы обновим интерфейс редактора, чтобы настроить это <em>немного</em> для вас.</p>
+
+<p>Всего того, что неявно описано где-то в <a href="https://developer.mozilla.org/ru/docs/MDN/Contribute">руководстве по сотрудничеству с MDN</a>, <strong>не</strong> должно быть в источнике. Это значит, что:</p>
+
+<ul>
+ <li>Никаких пользовательских шрифтов и стилей</li>
+ <li>Никаких других цветов. Используйте только те цвета, которые являются частью нашего оформления, задаваемого нашими стилями</li>
+</ul>
+
+<h2 id="Работа_в_режиме_источника">Работа в режиме источника</h2>
+
+<p>В режиме источника вы работаете с HTML-кодом, который составляет контент страницы вики. Если вы не ограничиваетесь обычным редактором, вы должны убедиться в том, что ваша работа соответствует <a href="https://developer.mozilla.org//en-US/docs/MDN/Contribute/Guidelines/CSS_style_guide">оформлению</a> и что она работает надёжно и безопасно.</p>
+
+<p>К сожалению, клавиша <kbd>Tab</kbd> пока что не работает в режиме источника. Используйте два пробела там, где обычно используете <kbd>Tab</kbd>.</p>
+
+<p>Элементы и атрибуты, которые MDN не поддерживает, будут удалены после сохранения документа. Вдобавок HTML документа преобразован, чтобы он был более читаемым и совместимым.</p>
+
+<h2 id="Использование_режима_источника">Использование режима источника</h2>
+
+<p>Здесь описано несколько случаев, когда единственный способ соответствовать оформлению статей MDN — использовать режим источника. Этот раздел описывает эти ситуации и как правильно выполнять данные функции, чтобы не испортить остальное.</p>
+
+<h3 id="Выделение_строк_в_примерах_кода">Выделение строк в примерах кода</h3>
+
+<p>Блоки примеров кода устанавливаются кнопками <strong>PRE</strong> или <strong>Syntax Highlighter</strong> в <a href="https://wiki.developer.mozilla.org/ru/docs/MDN/Contribute/Editor/Basics/Toolbar#%D0%91%D0%BB%D0%BE%D0%BA%D0%B8" rel="noopener">блоках панели инструментов</a>, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" rel="noopener" title="The HTML &lt;pre> element represents preformatted text which is to be presented exactly as written in the HTML file."><code>&lt;pre&gt;</code></a>, содержащий код, и добавить в атрибут <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class" rel="noopener">class</a></code> тега <code>&lt;pre&gt;</code>  компонент <code>highlight</code>, отформатированный следующим образом:</p>
+
+<ul>
+ <li><code>highlight[<em>НомерСтроки1</em>, <em>НомерСтроки2</em>, ..., <em>НомерСтрокиN</em>]</code></li>
+ <li><code>highlight[<em>НомерСтрокиНачальной</em>-<em>НомерСтрокиКонечной</em>, ..., <em>НомерСтрокиN</em>]</code></li>
+</ul>
+
+<pre class="syntaxbox notranslate">"hightlight[" <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number-list">&lt;список-номеров-строк&gt;</a> "]"
+
+<strong>Где:</strong>
+<a id="highlight-line-number-list" name="highlight-line-number-list">&lt;список-номеров-строк&gt;</a> = <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">[</a> <a href="#highlight-line-number">&lt;номер-строки&gt;</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#highlight-line-range">&lt;диапазон-строк&gt;</a> <a href="/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark">#</a>
+<a id="highlight-line-range" name="highlight-line-range">&lt;диапазон-строк&gt;</a> = <a href="#highlight-line-number">&lt;номер-строки&gt;</a> - <a href="#highlight-line-number">&lt;номер-строки&gt;</a>
+<a id="highlight-line-number" name="highlight-line-number">&lt;номер-строки&gt;</a> = &lt;число-токен&gt;</pre>
+
+<div class="blockIndicator note">
+<p>Выделенные строки не отображаются в редакторе MDN.</p>
+</div>
+
+<p>К примеру, если есть тег <code>&lt;pre class="brush: js;"&gt;</code>, и вы хотите выделить строки 4 и 7, то вы меняете тег: <code>&lt;pre class="brush: js; highlight[4, 7]"&gt;</code>.</p>
+
+<p>Давайте взглянем на более полный пример:</p>
+
+<div style="overflow: auto;">
+<table class="fullwidth-table">
+ <thead>
+ <tr>
+ <th scope="col">До выделения</th>
+ <th scope="col">С выделением</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <pre class="brush: js; notranslate">
+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>
+
+ <p>Здесь тег {{HTMLElement("pre")}} равен: <code>&lt;pre class="brush: js;"&gt;</code></p>
+ </td>
+ <td>
+ <pre class="brush: js; highlight[4, 7] notranslate">
+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>
+
+ <p>А здесь тег <code>&lt;pre&gt;</code> изменён на: <code>&lt;pre class="brush: js; highlight[4, 7]"&gt;</code></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Стили_которых_нет_в_панели_инструментов">Стили, которых нет в панели инструментов</h3>
+
+<p>У нас есть несколько стилей, которые нельзя применить, не используя режим источника. К счастью, их редко когда используют. Например:</p>
+
+<ul>
+ <li>Некоторые особые стили, применяемые на специальных страницах, необходимо добавлять с помощью кода, например, секции с группами. Вот почему у нас есть макросы для составления компонентов целевых страниц автоматически.</li>
+</ul>