Markdown Toolbox Logo Markdown Toolbox
ブログ

Markdownにおけるコードシンタックスハイライト

2024-09-25

短縮版

内蔵された構文ハイライトを使用するフォントを利用するには、フォントのドキュメントに記載のセットアップ手順に従ってください。

<link rel="stylesheet" href="https://example.com/font.css">

長文版

導入

特定のフォントには、Markdown文書内のコードブロックの外観を向上させる内蔵構文ハイライトが付いています。

使用手順

  1. フォントを選択: Glyph Drawingで入手可能な構文ハイライトをサポートするフォントを選択してください。

  2. 文書にフォントを含める: HTML文書の冒頭にフォントのスタイルシートを含めるための適切なリンクを追加します。

<link rel="stylesheet" href="https://example.com/font.css" />
  1. フォントを適用: 必要に応じてCSSを使用して、Markdownのコード要素にフォントを適用します。

CSS使用例

code,
pre {
    font-family: 'Your Font Name';
}

このようにして、内蔵された構文ハイライトを活用しながら、Markdown内のコードスニペットの外観を向上させるカスタムフォントを利用できます。