diff options
Diffstat (limited to 'files/ru/mdn/editor/синтаксические_выделения/index.html')
| -rw-r--r-- | files/ru/mdn/editor/синтаксические_выделения/index.html | 181 |
1 files changed, 0 insertions, 181 deletions
diff --git a/files/ru/mdn/editor/синтаксические_выделения/index.html b/files/ru/mdn/editor/синтаксические_выделения/index.html deleted file mode 100644 index f959ae7809..0000000000 --- a/files/ru/mdn/editor/синтаксические_выделения/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Синтаксические выделения -slug: MDN/Editor/Синтаксические_выделения -tags: - - Guide - - Howto - - MDN - - MDN Meta - - Редактор - - Руководство - - выделение -translation_of: MDN/Editor/Syntax_highlighting ---- -<div>{{MDNSidebar}}</div> - -<p class="summary"><span class="seoSummary">Синтаксическое выделение кода крайне полезно в статьях. Режим синтаксичесого выделения также используется в нашей системе шаблонов, чтобы определять, как использовать каждый отрывок кода при сборке в готовый экземпляр.</span></p> - -<h2 id="Поддержка_синтаксических_выделений">Поддержка синтаксических выделений</h2> - -<p>MDN поддерживает все переодически используемые нами на MDN языки (так же, как и те, что используются лишь иногда):</p> - -<div class="threecolumns"> -<ul> - <li>Bash shell</li> - <li> - <p>C/C++</p> - </li> - <li> - <p>CSS</p> - </li> - <li>HTML</li> - <li>XML</li> - <li> - <p>Java</p> - </li> - <li> - <p>JavaScript</p> - </li> - <li> - <p>JSON</p> - </li> - <li> - <p>PHP</p> - </li> - <li> - <p>Python</p> - </li> - <li> - <p>SQL </p> - </li> -</ul> -</div> - -<p>Синтаксические выделения делают код удобнее в прочтении, особенно когда статья переполнена другими видами текста. Выделения также помогают выделить ошибки в примерах и отрывках кода.</p> - -<h2 id="Добавление_выделения">Добавление выделения</h2> - -<p>Как правило, следует выделять любой блок {{HTMLElement("pre")}}, который представляет код, состоящий из более чем одной строчки; выделение однострочного кода будет зависеть от контекста.</p> - -<p>Синтаксические выделения в примерах кода:</p> - -<ol> - <li> - <p>Наберите или вставьте код в статью. Например:</p> - - <p>void main(int argc, char **argv) {</p> - - <p>printf("Привет, мир!\n");</p> - - <p>}</p> - </li> - <li> - <p>Выделите текст и нажмите кнопку <strong>PRE</strong> в панели инструментов. Результат:</p> - - <pre class="notranslate">void main(int argc, char **argv) { - -printf("Hello world\n"); - -} -</pre> - </li> - <li> - <p class="brush: cpp">Нажмите кнопку <strong>Syntax Highlighter</strong> и выберите название соответстующего коду языка программирования. В нашем примере это C/C++:</p> - - <pre class="brush: cpp; notranslate">void main(int argc, char **argv) { - -printf("Hello world\n"); - -}</pre> - </li> -</ol> - -<p>Вы можете немного упростить процесс, не нажимая кнопку <strong>PRE</strong> и сразу выбрав нужный вам язык. Добавление выделения автоматически вставит необходимый блок {{HTMLElement("pre")}}, если он ещё не на месте.</p> - -<p>Далее представлен перевод раздела {{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Source_mode", "Выделение строк в режиме источника")}}:</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">блоках панели инструментов</a>, но вы, возможно, захотите обратить внимание читателей на определённые строки кода. Единственный способ сделать это — открыть режим источника, найти там блок <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" title="The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file."><code><pre></code></a>, содержащий код, и добавить в атрибут <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a></code> тега <code><pre></code> компонент <code>highlight</code>, отформатированный следующим образом:</p> - -<ul> - <li> - <p><code>highlight[<em>НомерСтроки1</em>, <em>НомерСтроки2</em>, ..., <em>НомерСтрокиN</em>]</code></p> - </li> - <li> - <p><code>highlight[<em>НомерСтрокиНачальной</em>-<em>НомерСтрокиКонечной</em>, ..., <em>НомерСтрокиN</em>]</code></p> - </li> -</ul> - -<pre class="notranslate">"hightlight[" <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number-list"><список-номеров-строк></a> "]" - -<strong>Где:</strong> -<a id="highlight-line-number-list" name="highlight-line-number-list"><список-номеров-строк></a> = <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">[</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><номер-строки></a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Single_bar">|</a> <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-range"><диапазон-строк></a> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Brackets">]</a><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark">#</a> -<a id="highlight-line-range" name="highlight-line-range"><диапазон-строк></a> = <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><номер-строки></a> - <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Source_mode#highlight-line-number"><line-number></a> -<a id="highlight-line-number" name="highlight-line-number"><номер-строки></a> = <токен></pre> - -<p>К примеру, если есть тег <code><pre class="brush: js;"></code>, и вы хотите выделить строки 4 и 7, то вы меняете тег: <code><pre class="brush: js; highlight[4, 7]"></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><pre class="brush: js;"></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><pre></code> был изменён на: <code><pre class="brush: js; highlight[4, 7]"></code></p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="blockIndicator note"> -<p>Выделенные строки не отображаются в редакторе MDN.</p> -</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li><a href="/ru/docs/MDN/Contribute/Structures/Live_samples">Шаблоны</a></li> - <li><a href="/ru/docs/MDN/Contribute/Editor">Руководство по MDN редактору</a></li> - <li><a href="/ru/docs/MDN/Getting_started">Mozilla - Быстрый старт!</a></li> -</ul> - -<div>{{EditorGuideQuicklinks}}</div> |