Documentation Editors Guide

This guide showcases all available formatting options and components for our documentation. Use this as a reference when writing new docs.

Basic Formatting

Text Styles

We support standard markdown formatting:

• Bold text for emphasis
• Italic text for subtle emphasis
• Inline code for technical terms
• Strikethrough for deprecated content

Blockquotes

PRO TIP: Blockquotes are great for calling out specific advice or quotes. They are styled with a left border.

Tables

Tables are automatically styled and responsive.

Special Components

Callouts

Use different types of callouts to communicate context.

Badges

Use badges to display status, labels, or categories.

Cards

Use Cards to link to other sections visually.

Steps

Use Steps for tutorials or guides.

cp eternalcore.jar /path/to/server/plugins/

Code Tabs

Organize code examples by language or platform.

public class Example {
    public static void main(String[] args) {
        System.out.println("Hello World!");
    }
}

Commands

Display CLI commands with copy functionality.

Before & After Comparison

Compare code implementations with an interactive slider. Drag the line or use arrow keys to reveal before/after code side-by-side.

public class MessageSender {
    private final NoticeService noticeService;
    
    public void sendMessage(Player player, String message) {
        // Simple, clean API
        noticeService.create()
            .notice(message)
            .player(player.getUniqueId())
            .send();
    }
}

public class MessageSender {
    public void sendMessage(Player player, String message) {
        // Manual color code translation
        String formatted = message
            .replace("&0", "§0")
            .replace("&1", "§1")
            .replace("&2", "§2")
            .replace("&3", "§3")
            .replace("&4", "§4")
            .replace("&5", "§5")
            .replace("&6", "§6")
            .replace("&7", "§7")
            .replace("&8", "§8")
            .replace("&9", "§9")
            .replace("&a", "§a")
            .replace("&b", "§b")
            .replace("&c", "§c")
            .replace("&d", "§d")
            .replace("&e", "§e")
            .replace("&f", "§f");
        
        player.sendMessage(formatted);
    }
}

Code Blocks

Code blocks feature syntax highlighting and a copy button that appears on hover!

// Example TypeScript code
interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: "EternalCode",
};

File Tree

Display project structure or file hierarchies.

Link Previews

Create rich link previews for external resources or related documentation.

Dividers

Use dividers to separate content sections.

Component Usage Examples

Using Badges in Tables

Best Practices

1. Use Callouts for important information that needs to stand out
2. Use Steps for sequential instructions or tutorials
3. Use Badges for status indicators and labels
4. Use Commands for CLI instructions that users need to copy
5. Use File Trees to show project structure or file locations
6. Use Link Previews for important external or internal links
7. Use Code Tabs to organize code examples by language or platform

Accessibility

All components are built with accessibility in mind:

• Keyboard navigation support
• ARIA labels and roles
• Screen reader compatibility
• Respects prefers-reduced-motion settings
• Focus management
• Semantic HTML

Need Help?

If you have questions about using these components or need to add new ones, please reach out to the documentation team or open an issue on GitHub.