Syntax Highlighting Styles

{{- /* Renders a gallery a Chroma syntax highlighting styles. @example {{% syntax-highlighting-styles %}} */ -}} {{- $examples := slice }} {{- /* Example: css */}} {{- $example := dict "lang" "css" "code" body { font-size: 16px; /* comment */ }}} {{- $examples = $examples | append $example }} {{- /* Example: html */}} {{- $example = dict "lang" "html" "code" [Example](/about.html)}} {{- $examples = $examples | append $example }} {{- /* Example: go-html-template /}} {{- $example = dict "lang" "go-html-template" "code" {{ with $.Page.Params.content }} {{ . | $.Page.RenderString }} {{/\* comment \*/}} {{ end }}}} {{- $examples = $examples | append $example }} {{- / Example: javascript /}} {{- $example = dict "lang" "javascript" "code" if ([1,"one",2,"two"].includes(value)){ console.log("Number is either 1 or 2."); // comment }}} {{- $examples := $examples | append $example }} {{- / Example: markdown /}} {{- $example = dict "lang" "markdown" "code" {{\< figure src="kitten.jpg" \>}} [example](https://example.org "An example")}} {{- $examples := $examples | append $example }} {{- / Example: toml /}} {{- $example = dict "lang" "toml" "code" [params] bool = true # comment string = 'foo'}} {{- $examples := $examples | append $example }} {{- / Render */}} {{- with hugo.Data.docs.chroma.styles }} {{- range $style := . }} ### {{ $style }} {class="!mt-7 !mb-6"}{} {{- range $examples }} {{ .lang }}{} {class="text-sm !-mt-3 !-mb-5"}{} {{ .lang }} {noClasses=true style="{{ $style }}"}{{/\* Do not indent. \*/}} {{- .code | safeHTML -}}{{/\* Do not indent. \*/}} {{/* Do not indent. */}} {{- end }} {{- end }} {{- end }}