Как сделать правильную раскраску кода на «Хабре» и почему это так сложно

[CryptoPirate]

Может добавите пару примеров? А то статья про то как сделать правильную раскраску кода и ни одного куска кода с раскрасской на всю статью.

[MZinchenko]

Подразумевалось, что примерами будут пара статей, на которые есть ссылка в самом начале.
В общем-то этот пост не столько про конкретную раскраску, сколько про то как её переносить в суровых условиях Хабр-разметки.

[MZinchenko]

interface ChatMessageRepository {
  fun findLast(n: Int): List<ChatMessage>
}
data class FileHeadRemote(
  val id: FileReference,
  val name: String
)
interface FileRemoteApi {
  fun getHeadById(id: FileReference): FileHeadRemote
  fun getHeadsByIds(id: Set<FileReference>): Set<FileHeadRemote>
  fun getHeadsByIds(id: List<FileReference>): List<FileHeadRemote>
  fun getHeadsByChat(): List<FileHeadRemote>
}
data class UserRemote(
  val id: UserReference,
  val name: String
)
interface UserRemoteApi {
  fun getUserById(id: UserReference): UserRemote
  fun getUsersByIds(id: Set<UserReference>): Set<UserRemote>
  fun getUsersByIds(id: List<UserReference>): List<UserRemote>
}

[polRk]

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

[MZinchenko]

Интересно. Что за браузер? У меня такого нет, при достижении правой границы код переносится. Это конечно превращает его в кашу, но тут уж ничего не поделаешь. У меня мобильный хром.

[osmanpasha]

Opera mini, перенос кода есть, скролл вроде и не нужен

Единственное, что бросается в глаза — размер шрифта больше, чем размер текста статьи и комментариев, выше видно. Нельзя сделать тот же размер?

[MZinchenko]

Насколько я вижу, Хабр вставляет мою разметку в статью при рендере практически as is. То есть, размер шрифта определяется не мной и даже не Хабром, а браузером (тем, как он трактует тег code).
Это и преимущество и недостаток схемы, когда у пользователя нет полного доступа к разметке. У меня в мобильном Хроме тоже почему-то шрифт кода больше, чем текста, а на десктопном Хроме они одинаковые.