Один из клиентов Teams просит сделать встроенные блоки кода более заметными. В настоящее время, независимо от того, используется ли тёмный или светлый режим, цвет блока кода не сильно отличается от цвета остального текста. Можем ли мы изменить цвет текста по умолчанию в Discourse, чтобы использовать другой, более заметный цвет, например, красный?
Я знаю, что для большинства клиентов это не является серьёзной проблемой, так как они могут настроить тему и изменить CSS на своём сайте. Однако для версии Discourse для Teams такой уровень кастомизации недоступен. В то же время для команд, обсуждающих код, крайне важно, чтобы он выделялся и был визуально сильно отличен от остального текста.
Спасибо, Тобиас. Для ясности: я являюсь клиентом и хочу подчеркнуть, что речь идёт исключительно о inline blocks. У меня нет никаких замечаний по поводу многострочных элементов.
На всякий случай, если вы, как и я, новичок в HTML (мне пришлось искать это):
Круто! создается с помощью <kbd>Круто!</kbd>
О-о-о! создается с помощью <ins>О-о-о!</ins>
Полезно знать, спасибо @tobiaseigen.
Тем не менее, я всё ещё считаю, что имеет смысл подправить CSS для this. У нас есть несколько технических постов, где очень часто используются обратные кавычки, и использование двух альтернатив определённо менее удобно для пользователя.
О, есть ещё один приятный способ выделения, о котором я постоянно забываю. Он выглядит вот так и реализуется с помощью HTML-разметки <mark>text</mark>. Существует компонент темы, добавленный сообществом (недоступен в Teams), который позволяет использовать синтаксис ==text== вместо этого, что очень удобно. По какой-то причине я не могу найти его прямо сейчас.
В любом случае, я обсуду с коллегами обновление стилей по умолчанию для блоков кода, чтобы они были более заметными. Возможно, достаточно будет просто сделать цвет фона блоков кода более выразительным.
Встроенный код всегда выглядел как обычный код, моноширинным шрифтом. Всё, что действительно ярко и бросается в глаза, сильно зависит от сообщества и определённо не соответствует тому, как я вижу использование кода в большинстве мест в интернете.
Вопрос подсветки синтаксиса — это другое; вам нужно несколько строк кода, чтобы определить, с каким синтаксисом вы имеете дело. Возможно, именно в этом была корень проблемы — если вы хотите подсветку синтаксиса, вам нужен блок кода, например:
var x, y, z; // Declare 3 variables
x = 5; // Assign the value 5 to x
y = 6; // Assign the value 6 to y
z = x + y; // Assign the sum of x and y to z
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
Один элемент code оторван от всего контекста, необходимого для подсветки синтаксиса. Хотя вы можете использовать одну строку JavaScript:
"the value of z is " + z + ".";
Что выглядит так:
``` javascript
"the value of z is " + z + ".";
```
Так что, похоже, речь идёт о блоках кода против одного слова кода.
Кажется, @jordan.vidrine, здесь даны прямые указания. Просто откатить изменения полностью. Возможно, создать компонент темы для «альтернативных стилей кода» — он может полностью имитировать Slack в случае встроенного кода, сделать его красным, будучи отдельным компонентом.
Мне кажется, что здесь речь шла о простом и удобном способе выделения текста в обсуждениях. Многие люди (включая меня) начали использовать обратные кавычки для выделения текста, потому что это очень просто: даже не нужно нажимать Shift, и эта функция легко находится в меню. Однако такой способ не слишком заметен на фоне остального текста в абзаце.
Жирный и курсивный шрифты тоже есть в меню, но они также не сильно выделяются. Другие способы выделения текста в строке требуют больше нажатий клавиш. Кроме того, они не подробно документированы, поэтому для их использования нужны специальные знания.
На данный момент это нужно реализовать в виде плагина, так как вы хотите внедрить это непосредственно в HTML, а не выполнять преобразование только на стороне клиента.
Сегодня случайно наткнулся на плагин, который это делает, просматривая категорию #plugin. Забавно, что в некоторых случаях просто не можешь подобрать правильное ключевое слово для поиска плагина.
Я бы также отметил, что и зелёное подчёркивание, и выделение страдают от ровно противоположной проблемы — излишне высокого контраста, но это уже вопрос вкуса, а не UX.
Как насчёт реализации подхода GitHub с более тёмным серым фоном и некоторыми отступами?
Ситуация усложняется, когда речь заходит о продвижении масштабных изменений на каждом отдельном экземпляре Discourse, многие из которых привыкли к текущему сдержанному стилю. Это очень рискованный ход.
Обходной путь в виде простого добавления CSS уже существует для большинства установок.
