Skip to main content

Search

Code

2 posts

UI Preview

The preview shortcode displays HTML in a tabbed interface with a live preview and the source code. It’s useful for documentation and component showcases. Basic Usage # Use the preview shortcode with raw HTML inside: {{< preview >}} <button class="btn btn-primary">Click me</button> {{< /preview >}} Click me <button class="btn btn-primary">Click me</button> Button Group # {{< preview >}} <div class="flex gap-2"> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> </div> {{< /preview >}} Default Primary Secondary Accent <div class="flex gap-2"> <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> </div> Card Component # {{< preview >}} <div class="card bg-base-200 w-80"> <div class="card-body"> <h2 class="card-title">Card Title</h2> <p>This is a sample card with some content inside.</p> <div class="card-actions justify-end"> <button class="btn btn-primary">Action</button> </div> </div> </div> {{< /preview >}} Card Title This is a sample card with some content inside.

2 min read

Code Blocks

Inline Code # Use backticks for inline code within paragraphs. Fenced Code Blocks # JavaScript # function greet(name) { return `Hello, ${name}!`; } const users = ['Alice', 'Bob', 'Charlie']; users.forEach(user => console.log(greet(user))); TypeScript # interface User { id: number; name: string; email: string; } async function fetchUser(id: number): Promise<User> { const response = await fetch(`/api/users/${id}`); return response.json(); } Go # package main import "fmt" func main() { messages := make(chan string) go func() { messages <- "Hello from goroutine" }() msg := <-messages fmt.Println(msg) } Python # from dataclasses import dataclass from typing import List @dataclass class Article: title: str tags: List[str] published: bool = False def get_published(articles: List[Article]) -> List[Article]: return [a for a in articles if a.published] Rust # use std::collections::HashMap; fn main() { let mut scores: HashMap<String, i32> = HashMap::new(); scores.insert(String::from("Blue"), 10); scores.insert(String::from("Red"), 50); for (key, value) in &scores { println!("{}: {}", key, value); } } YAML # baseURL: https://example.org/ title: My Site theme: shiloh params: enableSearch: true author: name: John Doe HTML # <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <h1>Hello World</h1> </body> </html> CSS # .article-prose { @apply prose prose-lg max-w-none; h2 { @apply text-2xl font-bold mt-8 mb-4; } a { @apply text-primary hover:underline; } } Shell # #!/bin/bash hugo server --buildDrafts --disableFastRender SQL # SELECT u.name, COUNT(p.id) as post_count FROM users u LEFT JOIN posts p ON p.author_id = u.id WHERE u.active = true GROUP BY u.id HAVING COUNT(p.id) > 5 ORDER BY post_count DESC; JSON # { "name": "shiloh", "version": "1.0.0", "dependencies": { "tailwindcss": "^4.0.0", "daisyui": "^5.0.0" } } Plain Code Block # Plain text without syntax highlighting. Useful for output or logs.

2 min read