Code

Code displays a code block with optional syntax highlighting and copy functionality

Source Tailwind CSS JavaScript

fmt.Println("Hello, World!")

package showcase

import "github.com/templui/templui/internal/components/code"

templ CodeDefault() {
	<div class="w-full max-w-md">
		@code.Code(code.Props{
			Language: "go",
		}) {
			{ `fmt.Println("Hello, World!")` }
		}
	</div>
}

Installation

Install the component
```
templui add code
```
Add the JavaScript to your layout
```
@code.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Copy Button

fmt.Println("Hello, World!")

package showcase

import (
	"github.com/templui/templui/internal/components/code"
	"github.com/templui/templui/internal/components/copybutton"
)

templ CodeCopyButton() {
	<div class="relative w-full max-w-md">
		@code.Code(code.Props{
			ID:       "code-with-copy",
			Language: "go",
		}) {
			{ `fmt.Println("Hello, World!")` }
		}
		@copybutton.CopyButton(copybutton.Props{
			TargetID: "code-with-copy",
			Class:    "absolute top-2 right-2",
		})
	</div>
}

API Reference

Required parameter

Hover for description

Code

API reference for the Code component.

Name	Type	Default
`ID` Unique identifier for the code component	`string`	`code-{randomID}`
`Class` Additional CSS classes to apply to the code container	`string`	`""`
`Attrs` Additional HTML attributes to apply to the code container	`templ.Attributes`	`nil`
`Language` Programming language for syntax highlighting	`string`	`""`
`CodeClass` Additional CSS classes to apply to the code element	`string`	`""`

Menu

Getting Started

Components

Code

Installation

Examples

API Reference

Code