Typography

Headings

Attegi supports six levels of headings with beautiful typography optimized for readability.

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Heading 5 (H5)

Heading 6 (H6)

Best practice: Use only one H1 per page (your post title). H2-H6 automatically appear in the Table of Contents.

Text Formatting

You can format text in multiple ways:

• Bold text for emphasis and key terms
• Italic text for subtle emphasis or book titles
• Strikethrough for corrections or deprecated information
• Inline code for variable names, commands, or file names
• Links styled with accent color

You can also combine formatting: bold and italic, bold with code, and more.

Paragraphs

This is a standard paragraph. Attegi optimizes paragraph spacing and line height for maximum readability. The theme uses optimal line length (60-80 characters) and comfortable line height (1.6-1.8) to reduce eye strain.

Keep paragraphs concise (3-5 sentences) and use blank lines between them for better readability. Break up long text with headings, images, and other visual elements.

Lists

Unordered Lists

Use bullet points for unordered information:

• First item in the list
• Second item with more details
• Third item
  • Nested item level 1
  • Another nested item
    • Nested item level 2
• Back to main level

Ordered Lists

Use numbered lists for sequential information:

1. First step in the process
2. Second step with instructions
3. Third step
   1. Sub-step A
   2. Sub-step B
4. Final step

Task Lists

Create interactive checklists (requires Markdown mode):

•  Completed task
•  Another completed task
•  Incomplete task
•  Another incomplete task

Blockquotes

This is a standard blockquote. Use it for pull quotes, citations, or to emphasize important information.

Blockquotes can span multiple paragraphs and will be styled beautifully with a left border in your accent color.

Tip: You can include formatting inside blockquotes, like bold text, italics, and even code.

Quote with Attribution

Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.

— Robert Frost, The Road Not Taken

Highlighting

Highlighting text draws attention to key points or important information within your content. To create a highlight, simply put = = before and after your text, likethis highlighted example.

Divider

Separate your content into distinct groups by inserting line breaks, using the Divider card. Quickly add a divider by typing –--.

Buttons

Buttons provide clear calls to action for readers. Use buttons to encourage engagement, drive conversions, and guide users to key pages or resources.

Code

Display code snippets for technical content. Use inline code for short commands or code blocks for longer examples.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Attegi'));

Bookmarks

Bookmarks help readers navigate long content by providing links to specific sections or points of interest. Use bookmark cards to create attractive preview cards for external links, making them more engaging than plain text links.

You can learn more about code block usage at:

Now Show the Code Block!

Just a simple place to experiment with formatting, display snippets, and see how everything looks inside your theme. Say Hi to the world! print(“Hello, World!”) #include <stdio.h> int main() { printf(“Hello, World!”); return 0; } public class Main { public static void main(String[] args) { System.out.println(“Hello, World!”); } } console.log(</stdio>

AttegiBunizao

Poem Cards

Unique to Attegi: Display beautiful poetry with elegant formatting.

Standard Poem

[!poem] The Road Not Taken
Two roads diverged in a yellow wood,
And sorry I could not travel both And be one traveler,
long I stood And looked down one as far as I could To where it bent in the undergrowth;

— Robert Frost

Centered Poem

[!poem] Haiku [center]

An old silent pond A frog jumps into the pond— Splash! Silence again.

— Matsuo Bashō

Plain Text Poem

[!poem] Modern Verse [plain]

This poem uses plain text Without italic styling For a contemporary look

— Anonymous

Tables

Create data tables with Markdown syntax:

Aligned Columns

Callouts

Callouts draw attention to important messages, alerts, or notes within your content. Use callouts to emphasize warnings, tips, or critical information.

Images

Images enhance visual appeal and user engagement on your blog. Use different image widths to create dynamic layouts and maintain reader interest.

Image Widths

• Normal Width: Best for inline images within content

• Wide Width: Great for featured images and screenshots

• Full Width: Perfect for hero images and dramatic visuals

Gallery

Galleries showcase multiple images or media files in a visually appealing layout. Use galleries to create collections, showcase portfolios, or present multiple perspectives of a subject.

Audio & Video

Audio

Audio files enrich your content by providing an auditory experience for readers. Use audio embeds to share podcasts, music, interviews, or sound effects that complement your written content.

Videos

Videos engage readers with dynamic visual content. Use video embeds to share tutorials, vlogs, interviews, or promotional videos that enhance your blog posts.

Files

File downloads offer additional resources or content for readers to access. Provide downloadable files such as PDFs, documents, or resources to add value to your blog posts.

Example: Use the /file command or click the + button to upload documents, PDFs, or other downloadable resources for your readers.

Embeds

Embeds allow you to incorporate external content like videos, social media posts, or interactive elements directly into your blog. Popular embeds include YouTube videos, X (Twitter) posts, Instagram photos, and more.

Bookmarks

Bookmarks help readers navigate long content by providing links to specific sections or points of interest. Use bookmark cards to create attractive preview cards for external links, making them more engaging than plain text links.

Customization Guide

This guide shows you how to customize Attegi’s appearance and behavior to match your brand and preferences.

AttegiBunizao

Toggles

Toggles allow you to hide or reveal additional information, making your content more interactive and organized. Perfect for FAQs, detailed explanations, or optional content that readers can expand when needed.

Footnotes

This is a statement^[1] that needs citation.

1. Source: Example Book, Page 123 ↩︎

Special HTML Elements

Keyboard Shortcuts

Press Ctrl + C to copy, Ctrl + V to paste.

Use Cmd + Shift + P to open the command palette.

Abbreviations

The HTML specification is maintained by the W3C.

Subscript and Superscript

• Water formula: H₂O
• Einstein's equation: E=mc²
• Footnote reference¹

More

Attegi. (2026). Getting Started with Attegi. https://attegi.tutuis.me/getting-started/.

A term can be defined, a variable like x, and sample output OK.
Inserted text, deleted text, struck text, and underlined text.
Date: Jan 2, 2026

Content Best Practices

Writing Tips

1. Start strong: Hook readers with a compelling introduction
2. Use headings: Break content into scannable sections
3. Add visuals: Include images every 300-500 words
4. Keep paragraphs short: 3-5 sentences maximum
5. Use lists: Make content scannable
6. Include examples: Show, don't just tell
7. End with action: Clear call-to-action or conclusion

SEO Tips

• Use descriptive headings with keywords
• Add alt text to all images
• Write compelling meta descriptions
• Use internal links to related content
• Keep URLs short and descriptive
• Optimize images before upload (max 1920px width)

Accessibility Tips

• Ensure sufficient color contrast (4.5:1 minimum)
• Use proper heading hierarchy (don't skip levels)
• Add alt text to images
• Write descriptive link text (not "click here")
• Test with keyboard navigation
• Verify screen reader compatibility