Выбор темы для блока кода

:discourse2: Краткое описание Выбор темы для блоков кода позволит вам легко менять тему, используемую в блоках кода.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/hljs-theme-picker
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Это лишь небольшая часть доступных вариантов. Этот компонент включает все 90 вариантов, предлагаемых в репозитории hljs.

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

Как использовать

Из-за особенностей подключения этого компонента потребуется небольшое изменение в настройках вашего сайта.

  1. Перейдите на your.site.com/admin/site_settings/
  2. Найдите theme_authorized_extensions
  3. Добавьте css в этот список.

Вот так:

:warning: Это необходимо сделать до установки компонента, иначе он не будет работать.

После этого вы можете установить компонент так же, как и любой другой.

Настройки

Название Описание
Тема hljs Выберите тему, которую вы хотите использовать для блоков кода. Вы можете посетить страницу демонстрации hljs, чтобы просмотреть темы
Соответствие темной темы hljs Загружать темную цветовую схему, если она доступна

Если вам нужно посмотреть, как выглядят варианты, зайдите сюда: We're not a CDN - highlight.js

После того как вы определитесь с темой hljs, вы можете найти нужную в выпадающем списке и сохранить настройку. Для начала работы необходимо обновить страницу.

Благодарности

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


:discourse2: Размещено нами? Компоненты тем доступны для использования на наших тарифных планах Standard, Business и Enterprise.

42 лайка

Эта тема очень полезна и работает на моём сайте уже долгое время. Однако я вдруг обнаружил проблему в Firefox. Пользовательский CSS-файл блокируется заголовком X-Content-Type-Options: nosniff. В консоли указано, что MIME-тип CSS-файла — text/html. Неважно, какую тему я выбираю — проблема сохраняется в Firefox, тогда как в Chrome всё работает нормально.

Этот супер-компонент темы был бы ещё лучше, если бы выбранный стиль блока кода можно было установить как предпочтительный для пользователя.

5 лайков

Вторую. Было бы очень круто, если бы была настройка предпочтений пользователя.

Есть способ показать номера строк?

Отличный компонент темы.

Один вопрос: на демо highlight.js доступно 242 темы. Например, «Github Dark Dimmed», как показано на прикреплённом изображении.

Есть ли способ решить эту проблему? Спасибо за совет.

К сожалению, это немного сложновато.

Discourse использует версию 10.6.0 highlight-js. Большинство отсутствующих в данный момент дополнительных тем, например base16, требуют версии 11.0.

Проблема в том, что эта версия вносит некоторые разрушающие изменения и устаревания. Посмотрите здесь:

Таким образом, текущие варианты останутся прежними ещё какое-то время. Сначала необходимо обновить версию highlight-js в tests-passed в Discourse. Затем нам нужно будет дождаться стабильного релиза. Обновление тем (даже текущих) поставит нас в неудобное положение, когда будет невозможно точно сказать, будет ли тема корректно работать на вашем сайте.

4 лайка

Этот компонент, похоже, сломан в последних бета-версиях — выделение больше не работает корректно после его установки. Я удалил компонент из тем, и всё снова заработало — просто теперь я не могу выбрать тему выделения.

2 лайка

Подтверждаю, что подсветка синтаксиса также не работает здесь в последней бета-версии

@Falco только что объединил исправление для этого компонента: DEV: Update highlight.js to version 11 by xfalcox · Pull Request #3 · discourse/hljs-theme-picker · GitHub

Оно включает обновление тем highlight.js версии 11 (ядро также было обновлено до highlight.js версии 11) и исправления для стилей, у которых отсутствовала правильная специфичность.

2 лайка

При попытке установить компонент возникла следующая ошибка:

Ошибка при создании ресурса для загрузки: a11y-dark. Оригинальное имя файла: Извините, загрузка этого файла не разрешена (разрешенные расширения: wasm, jpg, jpeg, png, woff, woff2, svg, eot, ttf, otf, gif, webp, avif, js).

Вы сделали вот это :point_down:

1 лайк

О нет, я собираюсь это сделать :обнимашки:

1 лайк

Только что нашел этот компонент темы — так рад, что он существует! Заметил, что настройка hljs dark match, похоже, не работает.

Например, у нас hljs theme установлен в atom-one-light (к которому также существует atom-one-dark).

После обновления страницы atom-one-light применяется в темном режиме, но блок кода не переключается на темный при смене на темный режим — он остается светлым.


Я получил это сообщение об ошибке при установке компонентов темы. Надеюсь, кто-то сможет помочь сообществу разобраться, как это исправить.

Вы добавили css в список разрешенных расширений тем?

1 лайк

Спасибо, всё работает ^^

1 лайк

Примечание:

Должно быть:

Похоже, что этот компонент темы сломан в последней версии.

Я уже добавил css в настройку theme_authorized_extensions и попытался переустановить компонент, но стили для блоков кода по-прежнему не применяются.

Не могли бы вы это проверить? Спасибо.