Школа
Веб-разработка

Как лучше всего сверстать листинг на текстовой странице? Код — это иллюстрация или текст? Обязательно ли использовать моноширинный шрифт в коде, который не зависит от расстановки пробелов?

Алексей
8 сен 2022
👁 3919  
Веб-разработка

Как лучше всего сверстать листинг на текстовой странице? Код — это иллюстрация или текст? Обязательно ли использовать моноширинный шрифт в коде, который не зависит от расстановки пробелов?

Алексей
8 сен 2022
👁 3919  
Василий Половнёв
Технический директор бюро
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Алексей!

В бюро мы относимся к коду двояко. Иногда как к иллюстрациям, и тогда выносим листинг отдельно или на половину разворота. Иногда как к примерам в тексте, и тогда оставляем их в текстовой полосе, как в Мильчине или книгах Максима Ильяхова. В таком же промежуточном статусе и таблицы — иногда они заслуживают вынесенного положения иллюстрации, иногда скромно стоят в текстовой полосе, как внутритекстовые примеры.

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

Технически листинг лучше заворачивать в <pre> и <code>: <pre> (от preformatted text) сохранит отступы, пробелы и переводы строк в изначальном виде, <code> подскажет браузеру, что внутри код.

<pre>
  <code>
    function hello() {
      console.log('Hello, world!')
    }            
  </code>
</pre>
function hello() {
  console.log('Hello, world!')
}

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

С Гельветикой
class CommentsChannel < ApplicationCable::Channel
  def self.broadcast_comment(comment)
    broadcast_to comment.message,
      comment: CommentsController.render(
        partial: 'comments/comment',
        locals: { comment: comment }
      )
  end

  def follow(data)
    stop_all_streams
    stream_for current_user
      .account
      .messages
      .find(data['message_id'])
  rescue ActiveRecord::RecordNotFound
    reject
  end

  def unfollow
    stop_all_streams
  end
end
С моноширинным шрифтом
class CommentsChannel < ApplicationCable::Channel
  def self.broadcast_comment(comment)
    broadcast_to comment.message,
      comment: CommentsController.render(
        partial: 'comments/comment',
        locals: { comment: comment }
      )
  end

  def follow(data)
    stop_all_streams
    stream_for current_user
      .account
      .messages
      .find(data['message_id'])
  rescue ActiveRecord::RecordNotFound
    reject
  end

  def unfollow
    stop_all_streams
  end
end
С подсветкой
class CommentsChannel < ApplicationCable::Channel
  def self.broadcast_comment(comment)
    broadcast_to comment.message,
      comment: CommentsController.render(
        partial: 'comments/comment',
        locals: { comment: comment }
      )
  end

  def follow(data)
    stop_all_streams
    stream_for current_user
      .account
      .messages
      .find(data['message_id'])
  rescue ActiveRecord::RecordNotFound
    reject
  end

  def unfollow
    stop_all_streams
  end
end

Веб‑разработка
Полезно
 7
7
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы