hugo/layouts/_markup/render-codeblock.html

{{/*
Renders a highlighted code block using the given options and attributes.

In addition to the options available to the transform.Highlight function, you
may also specify the following parameters:

@param {bool} [copy=false] Whether to display a copy-to-clipboard button.
@param {string} [file] The file name to display above the rendered code.
@param {bool} [details=false] Whether to wrap the highlighted code block within a details element.
@param {bool} [open=false] Whether to initially display the content of the details element.
@param {string} [summary=Details] The content of the details summary element rendered from Markdown to HTML.
@param {bool} [trim=true] Whether to trim leading and trailing whitespace from the content of the code block.

@returns {template.HTML}

@examples

	```go
	fmt.Println("Hello world!")
	```

	```go {linenos=true file="layouts/index.html" copy=true}
	fmt.Println("Hello world!")
	```
*/}}

{{- $copy := false }}
{{- $file := or .Attributes.file "" }}
{{- $details := false }}
{{- $open := "" }}
{{- $summary := or .Attributes.summary "Details" | .Page.RenderString }}
{{- $trim := true }}
{{- $ext := strings.TrimPrefix "." (path.Ext $file) }}
{{- $lang := or .Type $ext "text" }}
{{- if in (slice "html" "gotmpl") $lang }}
	{{- $lang = "go-html-template" }}
{{- else if in (slice "bash" "ksh" "sh" "shell" "zsh") $lang }}
	{{- $lang = "text" }}
{{- else if in (slice "md" "mkd") $lang }}
	{{- $lang = "text" }}
{{- else if eq $lang "tree" }}
	{{- $lang = "text" }}
{{- end }}

{{- if collections.IsSet .Attributes "copy" }}
	{{- if in (slice true "true" 1) .Attributes.copy }}
		{{- $copy = true }}
	{{- else if in (slice false "false" 0) .Attributes.copy }}
		{{- $copy = false }}
	{{- end }}
{{- end }}

{{- if collections.IsSet .Attributes "details" }}
	{{- if in (slice true "true" 1) .Attributes.details }}
		{{- $details = true }}
	{{- else if in (slice false "false" 0) .Attributes.details }}
		{{- $details = false }}
	{{- end }}
{{- end }}

{{- if collections.IsSet .Attributes "open" }}
	{{- if in (slice true "true" 1) .Attributes.open }}
		{{- $open = "open" }}
	{{- else if in (slice false "false" 0) .Attributes.open }}
		{{- $open = "" }}
	{{- end }}
{{- end }}

{{- if collections.IsSet .Attributes "trim" }}
	{{- if in (slice true "true" 1) .Attributes.trim }}
		{{- $trim = true }}
	{{- else if in (slice false "false" 0) .Attributes.trim }}
		{{- $trim = false }}
	{{- end }}
{{- end }}

{{- if $details }}
	<details class="cursor-pointer" {{ $open }}>
		<summary>{{ $summary }}</summary>
{{- end }}

<div
	x-data
	class="render-hook-codeblock font-mono not-prose relative mt-6 mb-8 border border-gray-200 dark:border-gray-800 bg-light dark:bg-dark">
	{{- $fileSelectClass := "select-none" }}
	{{- if $copy }}
		{{- $fileSelectClass = "select-text" }}
		<svg
			class="absolute right-4 top-2 z-30 text-blue-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-gray-300 cursor-pointer w-6 h-6"
			@click="$copy($refs.code)">
			<use href="#icon--copy"></use>
		</svg>
	{{- end }}
	{{- with $file }}
		<div
			class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 w-full {{ $fileSelectClass }}
			">
			{{ . }}
		</div>
	{{- end }}

	<div x-ref="code">
		{{- $content := .Inner }}
		{{- if $trim }}
			{{- $content = strings.TrimSpace .Inner }}
		{{- end }}
		{{- transform.Highlight $content $lang .Options }}
	</div>
</div>

{{- if $details }}
	</details>
{{- end }}