Синтаксические выделения

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

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

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

  • Bash shell
  • C/C++

  • CSS

  • HTML
  • XML
  • Java

  • JavaScript

  • JSON

  • PHP

  • Python

  • SQL 

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

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

Как правило, следует выделять любой блок <pre>, который представляет код, состоящий из более чем одной строчки; выделение однострочного кода будет зависеть от контекста.

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

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

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

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

    }

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

    void main(int argc, char **argv) {
    
    printf("Hello world\n");
    
    }
    
  3. Нажмите кнопку Syntax Highlighter и выберите название соответстующего коду языка программирования. В нашем примере это C/C++:

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

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

Далее представлен перевод раздела Выделение строк в режиме источника в Source mode:

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

Блоки примеров кода устанавливаются кнопками 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]">.

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

До выделения С выделением
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]">

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

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