例への適切なリンクで更新
CSS にバンドルされており、構文の強調表示に Highlight.JS を使用する Hugo テーマを使用しています。私が作成した Web ページでは、コード ブロックにプレーンな「クーリエ」ベースの固定幅フォントが表示されます。私のサイト ページの例については、こちらを参照してください。
ここの Highlight.JS Web ページに示されているように、sans-mono などの別のフォントを使用したいと考えています。
私は Javascript と CSS にあまり詳しくありませんが、それらを使おうとしているだけです。Highlight.JS に特定のフォントを使用するように指示する簡単な方法はありますか? 利用可能なフォントファイルがあると仮定します。
ありがとう
これを CSS に追加します。
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
これにより、ユーザーのシステムで使用可能なリストの最初のフォントが使用されます。フォントによって実際の名前とは間隔が異なる場合があるため、たとえば、"Sans Mono"うまくいかない場合は を試してください"SansMono"。monospaceユーザーがリストされたフォントを持っていない場合に、少なくとも適切なフォントが選択されるように、必ず最後に配置してください。
これが機能しない場合は、セレクターの特異性の問題が原因である可能性があります。これは、highlight.js によって提供されるデフォルトのスタイルが独自のスタイルをオーバーライドしているということです。これを回避するのに役立つのは<link>、CSS ファイルをロードする を、highlight.js CSS ファイルをロードするファイルの後に配置することです。これが機能しない場合は、すべてのページ コンテンツが ID の要素にラップされている場合pre > codeに変更するなど、セレクターをより具体的にする必要があります。#main pre > codemain
CSS を追加する方法がわからない場合、最も簡単な方法は、<style></style>タグで囲まれた HTML テンプレートに挿入することです。CSSファイルに入れて<link rel="stylesheet" href="myStyles.css">.