Browse these samples to see how Shiloh renders different content types and markdown elements.
The text-rotate shortcode displays text that rotates through a list of words with an infinite loop animation. It’s great for hero sections, taglines, or adding visual interest to your content. Basic Usage # Use the text-rotate shortcode with one word per line: {{< text-rotate >}} ONE TWO THREE {{< /text-rotate >}} ONE TWO THREE Custom Size # The default size is text-xl. Use the size parameter to change it:
The sentence-rotate shortcode displays a sentence with rotating words appended to the end. Each word can have its own color styling. Basic Usage # Use the sentence-rotate shortcode with a sentence parameter and a list of words with optional color classes. Use daisyUI theme colors for consistent styling: {{< sentence-rotate sentence="Providing AI Agents for" >}} Designers | bg-primary text-primary-content Developers | bg-secondary text-secondary-content Managers | bg-accent text-accent-content {{< /sentence-rotate >}} Providing AI Agents for Designers Developers Managers Custom Size # Use the size parameter to change the text size:
The timeline shortcode displays a horizontal timeline of events. Each event consists of a label (left side) and description (right side), connected by visual markers. Basic Usage # Use the timeline shortcode with one event per line in label: description format: {{< timeline >}} 1984: Macintosh PC 1998: iMac 2001: iPod 2007: iPhone 2015: Apple Watch 2024: Vision Pro {{< /timeline >}} 1984 Macintosh PC 1998 iMac 2001 iPod 2007 iPhone 2015 Apple Watch 2024 Vision Pro Using Text Labels # The label doesn’t have to be a year. You can use any text:
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.
Simple Blockquote # The best way to predict the future is to invent it. Multi-paragraph Blockquote # This is the first paragraph of the blockquote. This is the second paragraph. Blockquotes can contain multiple paragraphs and other markdown elements.
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.