javascript - How to use specific font with highlight.js -


updated proper link example

i using hugo theme comes bundled css , uses highlight.js syntax highlighting. web pages have created show plain "courier" based fixed width font in code blocks see here example of site page

i use font, sans-mono or more neat looking, shows on highlight.js web page here

i'm not super familiar javascript , css, trying use them. there easier way tell highlight.js use specific font? assuming have font files available.

thanks zeekay

add css:

pre > code {     font-family: "sans mono", "consolas", "courier", monospace; } 

this use first font in list available on user’s system. fonts have different spacing real names, example if "sans mono" doesn’t work, try "sansmono". make sure put monospace last @ least suitable font chosen if user doesn’t have of listed fonts.

if doesn’t work, maybe it’s due selector specificity problem, default styles provided highlight.js overriding own styles. avoid putting <link> loads css file after 1 load highlight.js css file. if doesn’t work, have make pre > code selector more specific, such changing #main pre > code if page content wrapped in element id main.

if you’re not sure how add css, easiest way put in html template surrounded <style></style> tags. though it’s better put in css file , reference <link rel="stylesheet" href="mystyles.css">.


Comments

Popular posts from this blog

PySide and Qt Properties: Connecting signals from Python to QML -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

scala - 'wrong top statement declaration' when using slick in IntelliJ -