Подсветка синтаксиса страниц Github - очень плохой контраст
Я использую Github Pages с Jekyll, разветвленным от JekyllNow.
Это то, что у меня есть
Python
```python
for i in Q:
print(i)
while True:
print(i)
```
В предварительном просмотре Github контраст отличный, подсветка синтаксиса очень четкая.
Когда страница фактически развернута, контраст плохой, вероятно, из-за цветов, используемых в сочетании с цветом фона.
Есть ли способ улучшить это? Есть лучшая подсветка синтаксиса на страницах Github?
Мой _config.yml содержит значения по умолчанию.
# Jekyll 3 now only supports Kramdown for Markdown
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
syntax_highlighter_opts:
# Use existing pygments syntax highlighting css
css_class: 'highlight'
Есть ли что-нибудь, что я могу изменить здесь, что даст мне подсветку синтаксиса с лучшим контрастом, как тот, который я вижу в предварительном просмотре.
Ответы 1
Вы можете попробовать создать новый файл CSS, скажем, syntax-highlighting.css, в папке ресурсов вашего сайта. Вставьте CSS темы GitHub Rouge, который вы получили из mzlogin/rouge-themes , см. mazhuang.org/rouge-themes/.
Включите этот файл CSS в основной макет вашего сайта, чтобы он загружался на каждой странице. Вы можете сделать это, добавив строку вроде:
<link rel = "stylesheet" href = "/path/to/syntax-highlighting.css">
Иногда другие стили в CSS вашего сайта могут конфликтовать со стилями Rouge, что приводит к неожиданному появлению. В таких случаях проверьте проблемные элементы с помощью инструментов разработчика вашего браузера и при необходимости переопределите любые стили.
Например, если цвет фона вашего блока кода вызывает плохой контраст, вы можете добавить стиль для явного задания цвета фона:
.highlight {
background-color: #f6f8fa; /* GitHub-like background color */
}
После внесения вышеуказанных изменений вам необходимо перестроить и повторно развернуть свой сайт, чтобы изменения вступили в силу.
Для Python практически каждое слово в коде выделяется записью
.highlight .nx { color: #555 } /* Name.Otherв файлеhighlights.scss. Мне интересно, если это ошибка!
Если правило .highlight .nx { color: #555 } чрезмерно применяется к вашему коду Python, то вполне вероятно, что токен Name.Other (представленный .nx в CSS) чрезмерно используется подсветчиком для Python. Это действительно может быть особенностью или ошибкой используемой вами версии Rouge.
Rouge использует лексеры для разных языков, и вполне возможно, что лексер для Python в версии Rouge, которую Jekyll использует на GitHub Pages, не такой совершенный, как некоторые другие, например, для Ruby. Это может объяснить, почему пометка кода Python как Ruby приводит к лучшему выделению.
В качестве быстрого решения вы можете попробовать изменить цвет .nx на что-то менее отвлекающее:
.highlight .nx {
color: #333; /* or any other color that provides better contrast */
}
Это не идеально, так как фактические токены Name.Other могут стать менее заметными, но на какое-то время код будет выглядеть лучше.
Кроме того, убедитесь, что ваш Gemfile соответствует последней версии rouge (4.1.x), чтобы проверить, сохраняется ли проблема.
gem 'rouge', '~> latest_version'
bundle update rouge
Я использую Jekyllnow - т.е. не устанавливаю ruby и не собираю локально. Я не уверен, где и как я проверяю Gemfile - точно не знаю, где находится Gemfile Jekyllnow. Он находится не в корневом каталоге, как в репозитории Github Pages.
Если вы используете JekyllNow напрямую из GitHub (т. е. вы разветвили репозиторий JekyllNow в свою учетную запись GitHub и вносите там изменения), то вы не имеете прямого контроля над файлом Gemfile. В этом режиме работы GitHub Pages обрабатывает процесс сборки Jekyll, используя набор стандартных и поддерживаемых гемов.
У GitHub Pages есть набор зависимостей, которые он использует для Jekyll, и Rouge — одна из них. GitHub постоянно обновляет эти драгоценные камни, но не всегда до самой последней версии из соображений стабильности и безопасности.
Поскольку вы не можете напрямую изменять драгоценные камни или версии, лучшим немедленным решением будет настроить CSS, как упоминалось ранее. Это позволяет вам контролировать внешний вид, даже если вы не можете изменить способ работы самого лексера.
Более сложным решением было бы вместо того, чтобы позволить GitHub Pages создавать ваш сайт, настроить локальную среду Jekyll или использовать другую платформу CI/CD для создания вашего сайта, а затем развернуть статические файлы на GitHub Pages. Это дало бы вам контроль над Gemfile и, следовательно, над тем, какие версии каждого драгоценного камня, включая Rouge, используются. Но, учитывая, что вы выбрали JekyllNow для простоты, это может быть не ваш предпочтительный маршрут.
Для Python практически каждое слово в коде выделяется записью .highlight .nx { color: #555 } /* Name.Other в файле highlights.scss. Мне интересно, если это ошибка!
Если вместо этого я отмечу код Python как ruby, выделение будет лучше.
@user93353 user93353 Я отредактировал ответ, чтобы ответить на ваш комментарий.
Спасибо. Я использую Jekyllnow, т.е. не устанавливаю ruby и не собираю локально. Я не уверен, где и как я проверяю Gemfile - точно не знаю, где находится Gemfile Jekyllnow. Он находится не в корневом каталоге, как в репозитории Github Pages. github.com/barryclark/jekyll-now
@user93353 user93353 Верно, я пропустил часть Jekyllnow. Я отредактировал ответ, чтобы ответить на ваш последний комментарий.
Я немного поэкспериментировал с существующим
_sass\highlights.scss— кажется, это файл, который используется для выделения. И выделение отлично работает дляruby, но не дляpython.