wehub-resource-sync
37 lines
1.1 KiB
Markdown
37 lines
1.1 KiB
Markdown
---
|
|
title: Syntax highlighting styles
|
|
description: Highlight code examples using one of these styles.
|
|
categories: []
|
|
keywords: [highlight]
|
|
---
|
|
|
|
## Overview
|
|
|
|
Hugo provides several methods to add syntax highlighting to code examples:
|
|
|
|
- Use the [`transform.Highlight`][] function within your templates
|
|
- Use the [`highlight`][] shortcode with any [content format](g)
|
|
- Use [fenced code blocks][] with the Markdown content format
|
|
|
|
Regardless of method, use any of the syntax highlighting styles below.
|
|
|
|
Set the default syntax highlighting style in your project configuration:
|
|
|
|
{{< code-toggle file=hugo >}}
|
|
[markup.highlight]
|
|
style = 'monokai'
|
|
{{< /code-toggle >}}
|
|
|
|
See [configure Markup][].
|
|
|
|
## Styles
|
|
|
|
This gallery demonstrates the application of each syntax highlighting style with code examples written in different programming languages.
|
|
|
|
{{% syntax-highlighting-styles %}}
|
|
|
|
[`highlight`]: /shortcodes/highlight/
|
|
[`transform.Highlight`]: /functions/transform/highlight/
|
|
[configure Markup]: /configuration/markup/#highlight
|
|
[fenced code blocks]: /content-management/syntax-highlighting/#fenced-code-blocks
|