Code
Code displays a code block with optional syntax highlighting and copy functionality
TailwindCSS
fmt.Println("Hello, World!")package showcase
import "github.com/axzilla/templui/pkg/components"
templ Code() {
<div class="w-full max-w-md">
@components.Code(components.CodeProps{
Language: "go",
}) {
{ `fmt.Println("Hello, World!")` }
}
</div>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
templ CodeScript() {
{{ handle := templ.NewOnceHandle() }}
@handle.Once() {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/pojoaque.min.css"/>
<script nonce={ templ.GetNonce(ctx) } src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script nonce={ templ.GetNonce(ctx) }>
document.addEventListener('alpine:init', () => {
// Highlight.js init
hljs.highlightAll();
// Copy functionality
Alpine.data('code', () => ({
isCopied: false,
isNotCopied: true,
copyCode() {
navigator.clipboard.writeText(this.$refs.code.textContent)
this.isCopied = true
this.isNotCopied = false
setTimeout(() => {
this.isCopied = false
this.isNotCopied = true
}, 2000)
}
}))
})
</script>
}
}
// CodeSize represents the available sizes for the Code component
type CodeSize string
const (
CodeSizeDefault CodeSize = "" // ~20 lines (default)
CodeSizeSm CodeSize = "sm" // ~10 lines (for short examples)
CodeSizeLg CodeSize = "lg" // ~40 lines (for long examples)
CodeSizeFull CodeSize = "full" // Full height (no max-height)
)
type CodeProps struct {
Language string // Programming language for syntax highlighting
ShowCopyButton bool // Whether to show the copy button
Size CodeSize // Size of the code block
Class string // Additional classes for the wrapper div
CodeClass string // Additional classes for the code element
}
// Code displays a code block with optional syntax highlighting and copy functionality
templ Code(p CodeProps) {
<div
class={
utils.TwMerge(
"relative",
p.Class,
),
}
x-data="code"
>
<pre class="!overflow-hidden">
<code
x-ref="code"
class={
utils.TwMerge(
"language-"+p.Language,
"!overflow-y-auto rounded-md block text-sm !max-h-[501px]",
utils.TwIf("!max-h-[250px]", p.Size == CodeSizeSm),
utils.TwIf("!max-h-[1000px]", p.Size == CodeSizeLg),
utils.TwIf("!max-h-full", p.Size == CodeSizeFull),
p.CodeClass,
),
}
>
{ children... }
</code>
</pre>
if p.ShowCopyButton {
<button
class="absolute top-2 right-2 hover:bg-gray-500 hover:bg-opacity-30 text-white p-2 rounded"
@click="copyCode"
>
<span x-show="isCopied">
@icons.Check(icons.IconProps{Size: "14"})
</span>
<span x-show="isNotCopied">
@icons.Clipboard(icons.IconProps{Size: "14"})
</span>
</button>
}
</div>
}
Usage
1. Add the script to your page/layout:
// Option A: All components (recommended)
@utils.ComponentScripts()
// Option B: Just Code
@components.CodeScript()2. Use the component:
@components.Code(components.CodeProps{...})Examples
With Copy Button
fmt.Println("Hello, World!")package showcase
import "github.com/axzilla/templui/pkg/components"
templ CodeWithCopyButton() {
<div class="w-full max-w-md">
@components.Code(components.CodeProps{
Language: "go",
ShowCopyButton: true,
}) {
{ `fmt.Println("Hello, World!")` }
}
</div>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
templ CodeScript() {
{{ handle := templ.NewOnceHandle() }}
@handle.Once() {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/pojoaque.min.css"/>
<script nonce={ templ.GetNonce(ctx) } src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script nonce={ templ.GetNonce(ctx) }>
document.addEventListener('alpine:init', () => {
// Highlight.js init
hljs.highlightAll();
// Copy functionality
Alpine.data('code', () => ({
isCopied: false,
isNotCopied: true,
copyCode() {
navigator.clipboard.writeText(this.$refs.code.textContent)
this.isCopied = true
this.isNotCopied = false
setTimeout(() => {
this.isCopied = false
this.isNotCopied = true
}, 2000)
}
}))
})
</script>
}
}
// CodeSize represents the available sizes for the Code component
type CodeSize string
const (
CodeSizeDefault CodeSize = "" // ~20 lines (default)
CodeSizeSm CodeSize = "sm" // ~10 lines (for short examples)
CodeSizeLg CodeSize = "lg" // ~40 lines (for long examples)
CodeSizeFull CodeSize = "full" // Full height (no max-height)
)
type CodeProps struct {
Language string // Programming language for syntax highlighting
ShowCopyButton bool // Whether to show the copy button
Size CodeSize // Size of the code block
Class string // Additional classes for the wrapper div
CodeClass string // Additional classes for the code element
}
// Code displays a code block with optional syntax highlighting and copy functionality
templ Code(p CodeProps) {
<div
class={
utils.TwMerge(
"relative",
p.Class,
),
}
x-data="code"
>
<pre class="!overflow-hidden">
<code
x-ref="code"
class={
utils.TwMerge(
"language-"+p.Language,
"!overflow-y-auto rounded-md block text-sm !max-h-[501px]",
utils.TwIf("!max-h-[250px]", p.Size == CodeSizeSm),
utils.TwIf("!max-h-[1000px]", p.Size == CodeSizeLg),
utils.TwIf("!max-h-full", p.Size == CodeSizeFull),
p.CodeClass,
),
}
>
{ children... }
</code>
</pre>
if p.ShowCopyButton {
<button
class="absolute top-2 right-2 hover:bg-gray-500 hover:bg-opacity-30 text-white p-2 rounded"
@click="copyCode"
>
<span x-show="isCopied">
@icons.Check(icons.IconProps{Size: "14"})
</span>
<span x-show="isNotCopied">
@icons.Clipboard(icons.IconProps{Size: "14"})
</span>
</button>
}
</div>
}
With 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/pkg/components"
templ CodeWithCustomSize() {
<div class="w-full max-w-md">
@components.Code(components.CodeProps{
Language: "go",
ShowCopyButton: true,
Size: components.CodeSizeSm,
}) {
{ `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>
}
package components
import (
"github.com/axzilla/templui/pkg/icons"
"github.com/axzilla/templui/pkg/utils"
)
templ CodeScript() {
{{ handle := templ.NewOnceHandle() }}
@handle.Once() {
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/pojoaque.min.css"/>
<script nonce={ templ.GetNonce(ctx) } src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script nonce={ templ.GetNonce(ctx) }>
document.addEventListener('alpine:init', () => {
// Highlight.js init
hljs.highlightAll();
// Copy functionality
Alpine.data('code', () => ({
isCopied: false,
isNotCopied: true,
copyCode() {
navigator.clipboard.writeText(this.$refs.code.textContent)
this.isCopied = true
this.isNotCopied = false
setTimeout(() => {
this.isCopied = false
this.isNotCopied = true
}, 2000)
}
}))
})
</script>
}
}
// CodeSize represents the available sizes for the Code component
type CodeSize string
const (
CodeSizeDefault CodeSize = "" // ~20 lines (default)
CodeSizeSm CodeSize = "sm" // ~10 lines (for short examples)
CodeSizeLg CodeSize = "lg" // ~40 lines (for long examples)
CodeSizeFull CodeSize = "full" // Full height (no max-height)
)
type CodeProps struct {
Language string // Programming language for syntax highlighting
ShowCopyButton bool // Whether to show the copy button
Size CodeSize // Size of the code block
Class string // Additional classes for the wrapper div
CodeClass string // Additional classes for the code element
}
// Code displays a code block with optional syntax highlighting and copy functionality
templ Code(p CodeProps) {
<div
class={
utils.TwMerge(
"relative",
p.Class,
),
}
x-data="code"
>
<pre class="!overflow-hidden">
<code
x-ref="code"
class={
utils.TwMerge(
"language-"+p.Language,
"!overflow-y-auto rounded-md block text-sm !max-h-[501px]",
utils.TwIf("!max-h-[250px]", p.Size == CodeSizeSm),
utils.TwIf("!max-h-[1000px]", p.Size == CodeSizeLg),
utils.TwIf("!max-h-full", p.Size == CodeSizeFull),
p.CodeClass,
),
}
>
{ children... }
</code>
</pre>
if p.ShowCopyButton {
<button
class="absolute top-2 right-2 hover:bg-gray-500 hover:bg-opacity-30 text-white p-2 rounded"
@click="copyCode"
>
<span x-show="isCopied">
@icons.Check(icons.IconProps{Size: "14"})
</span>
<span x-show="isNotCopied">
@icons.Clipboard(icons.IconProps{Size: "14"})
</span>
</button>
}
</div>
}