budgit/internal/ui/components/code/code.templ
2026-01-18 22:23:21 +00:00

56 lines
1.3 KiB
Text

// templui component code - version: v1.2.0 installed by templui v1.2.0
// 📚 Documentation: https://templui.io/docs/components/code
package code
import "git.juancwu.dev/juancwu/budgit/internal/utils"
type Props struct {
ID string
Class string
Attrs templ.Attributes
Language string
CodeClass string
}
templ Code(props ...Props) {
// Highlight.js with theme switching
<link
id="highlight-theme"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
{{ var p Props }}
if len(props) > 0 {
{{ p = props[0] }}
}
if p.ID == "" {
{{ p.ID = "code-" + utils.RandomID() }}
}
<div
id={ p.ID }
class={ utils.TwMerge("relative code-component", p.Class) }
data-tui-code-component
{ p.Attrs... }
>
<pre class="overflow-hidden!">
<code
data-tui-code-block
class={
utils.TwMerge(
"language-"+p.Language,
"overflow-y-auto! rounded-md block text-sm max-h-[500px]",
"hljs-target",
p.CodeClass,
),
}
>
{ children... }
</code>
</pre>
</div>
}
templ Script() {
<script defer nonce={ templ.GetNonce(ctx) } src={ utils.ScriptURL("/assets/js/code.min.js") }></script>
}