1
0
Fork 0
hugo/docs/layouts/shortcodes/syntax-highlighting-styles....

71 lines
1.8 KiB
HTML

{{- /*
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" `
<a href="/about.html">Example</a> <!-- comment -->
`}}
{{- $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") <!-- comment -->
`}}
{{- $examples := $examples | append $example }}
{{- /* Example: toml */}}
{{- $example = dict "lang" "toml" "code" `
[params]
bool = true # comment
string = 'foo'
`}}
{{- $examples := $examples | append $example }}
{{- /* Render */}}
{{- with site.Data.docs.chroma.styles }}
{{- range $style := . }}
### {{ $style }} {class="!mt-7 !mb-6"}{{/* Do not indent. */}}
{{- range $examples }}
{{ .lang }}{{/* Do not indent. */}}
{class="text-sm !-mt-3 !-mb-5"}{{/* Do not indent. */}}
```{{ .lang }} {noClasses=true style="{{ $style }}"}{{/* Do not indent. */}}
{{- .code | safeHTML -}}{{/* Do not indent. */}}
```{{/* Do not indent. */}}
{{- end }}
{{- end }}
{{- end }}