Выбор темы для Codeblock

[Discourse]

||||
-|-|
| Описание | Codeblock Theme Picker позволит вам легко изменить тему, используемую в блоках кода.
| | Предпросмотр | Предпросмотр на Discourse Theme Creator |
| Ссылка на репозиторий | https://github.com/discourse/hljs-theme-picker
| Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse

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

Поскольку это official тема, поддерживаемая командой Discourse, вопросы Support, отчеты об ошибках Contribute > Bug, предложения по UX Contribute > UX и запросы на новые функции Contribute > Feature можно оставлять в соответствующих категориях здесь, на Meta, и отмечать соответствующим тегом компонента темы. Нажмите на ссылку ниже, чтобы начать обсуждение.

 Поддержка  Ошибка  UX  Функция

Возможности

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

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

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

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

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

Вот так:

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

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

Настройки

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

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

Когда вы решите, какую тему hljs использовать, вы можете найти её в выпадающем списке и сохранить настройку. Вам нужно будет обновить страницу, чтобы все начало работать.

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

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

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

[MuZhou233 (Mosarin)]

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

[neounix (Dark Matter)]

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

[Zup]

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

[Reaxgrim]

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

[SkyLin]

@Johani

Этот компонент включает все 90 опций, представленные в репозитории hljs.

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

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

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

[Johani (Joe)]

@SkyLin

На демо highlight.js представлено 242 темы

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

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

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

Release Version 11 · highlightjs/highlight.js

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

[vincentp (Vincent)]

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

[erisdisqordia (eris)]

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

[pmusaraj (Penar Musaraj)]

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

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

[Dennis_P_Z]

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

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

[JammyDodger]

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

@Jordan Vidrine

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

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

Вот так:

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

[Dennis_P_Z]

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

[jordan-violet]

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

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

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

[hoangphuctran93 (Hoàng Phúc Trần)]

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

[Firepup650 (Firepup Sixfifty)]

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

@jordan-vidrine

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

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

Вот как это должно выглядеть:

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

[hoangphuctran93 (Hoàng Phúc Trần)]

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

[NateDhaliwal]

Примечание:

@Discourse

посетите страницу демонстрации hljs, чтобы

@Discourse

посмотрите здесь We’re not a CDN - highlight.js

Должно быть:

@yanokwa

ссылка должна быть Demo - highlight.js

[cnlanny]

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

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

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