Как использовать определенный шрифт с highlight.js

Обновлено с правильной ссылкой на пример

Я использую тему Hugo, которая поставляется в комплекте с CSS и использует Highlight.JS для подсветки синтаксиса. Веб-страницы, которые я создал, показывают простой «курьерский» шрифт фиксированной ширины в блоках кода см. здесь например страница моего сайта

Я хотел бы использовать другой шрифт, например, sans-mono или что-то более аккуратное, как показано на веб-странице Highlight.JS здесь

Я не очень хорошо знаком с Javascript и CSS, просто пытаюсь их использовать. Есть ли более простой способ указать Highlight.JS использовать определенный шрифт? Предполагая, что у меня есть файлы шрифтов.

Спасибо, Зикей.


javascript css highlight.js hugo
person Zee Kay    schedule 25.05.2016    source источник
comment
Вы дали ссылку на свой локальный хост... очевидно, он недоступен.   -  person Matt Komarnicki    schedule 25.05.2016
comment
Спасибо, что поймали. Я обновил соответствующую ссылку.   -  person Zee Kay    schedule 26.05.2016

Ответы (1)


arrow_upward
6
arrow_downward

Добавьте это в свой CSS:

pre > code {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
}

При этом будет использоваться первый шрифт в этом списке, доступный в системе пользователя. Иногда шрифты имеют другой интервал, чем их настоящие имена, поэтому, например, если "Sans Mono" не работает, попробуйте "SansMono". Не забудьте поставить monospace последним, чтобы был выбран хотя бы какой-то подходящий шрифт, если у пользователя нет ни одного из перечисленных шрифтов.

Если это не работает, возможно, это связано с проблемой специфичности селектора, когда стили по умолчанию, предоставляемые highlight.js, переопределяют ваши собственные стили. Что-то, что поможет избежать этого, поместит <link>, который загружает ваш файл CSS, после того, чтобы загрузить файл CSS highlight.js. Если это не сработает, вам придется сделать селектор pre > code более конкретным, например, изменить его на #main pre > code, если все содержимое страницы заключено в элемент с идентификатором main.

Если вы не знаете, как добавить CSS, проще всего поместить его в HTML-шаблон, окруженный тегами <style></style>. Хотя лучше поместить его в файл CSS и сослаться на него с помощью <link rel="stylesheet" href="myStyles.css">.

person Rory O'Kane    schedule 25.05.2016
comment
Спасибо @rory-okane за подсказку. В итоге я изменил строку шрифта на: font-family: "Monaco", "Consolas", "Ubuntu Mono", "Courier New", monospace; вместо того, чтобы отобразить лучший монофонический шрифт. Но возникает вопрос, что эта строка загружает шрифт, установленный локально на моем компьютере, а не веб-шрифты, которые я поставил на свой сайт. Как заставить здесь использовать веб-шрифты? Это важно, так как мне нужно, чтобы он был согласован на разных платформах. Спасибо еще раз! - person Zee Kay; 29.05.2016
comment
@ZeeKay После загрузки веб-шрифта на сайт на него можно ссылаться в font-family по имени, указанному в веб-шрифте. Проверьте документацию, откуда вы взяли веб-шрифт — вы часто можете ссылаться на шрифт с очевидным именем "Sans Mono", но некоторые источники требуют вместо этого называть шрифт чем-то вроде "Sans+Mono" или "SansMono_400". Вы все равно должны указать локально доступные резервные шрифты позже в списке — они будут использоваться во время загрузки веб-шрифта. - person Rory O'Kane; 31.05.2016