Code

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

TailwindCSS

Vanilla JS

fmt.Println("Hello, World!")

package showcase

import "github.com/axzilla/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/axzilla/templui/internal/components/code"

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

Custom Size

package main

import (
   "fmt"
   "log"
   "net/http"
)

func main() {
   http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
       fmt.Fprintf(w, "Hello, World!")
   })

   fmt.Println("Server starting on :3000...")
   if err := http.ListenAndServe(":3000", nil); err != nil {
       log.Fatal(err)
   }
}

package showcase

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

templ CodeCustomSize() {
	<div class="w-full max-w-md">
		@code.Code(code.Props{
			Language:       "go",
			ShowCopyButton: true,
			Size:           code.SizeSm,
		}) {
			{ `package main

import (
   "fmt"
   "log"
   "net/http"
)

func main() {
   http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
       fmt.Fprintf(w, "Hello, World!")
   })

   fmt.Println("Server starting on :3000...")
   if err := http.ListenAndServe(":3000", nil); err != nil {
       log.Fatal(err)
   }
}` }
		}
	</div>
}

Getting Started

Components

Code

Installation

Examples