Markdown Toolbox Logo Markdown Toolbox
Home
Blog

Code syntax highlighting in markdown

2024-09-25

Short Version

To use a font with built-in syntax highlighting, follow the setup instructions available on the font's documentation.

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

Long Version

Introduction

Certain fonts come with built-in syntax highlighting that enhances the appearance of code blocks in Markdown documents.

Steps to Use

  1. Select a Font: Choose a font that supports syntax highlighting, such as one available at Glyph Drawing.

  2. Include the Font in Your Document: Add the appropriate link to include the font's stylesheet at the beginning of your HTML document.

<link rel="stylesheet" href="https://example.com/font.css" />
  1. Apply the Font: Use CSS to apply the font to your code elements in Markdown as needed.

Example CSS Usage

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

This way, you can utilize a custom font to enhance the appearance of code snippets within your Markdown, leveraging the built-in syntax highlighting it provides.