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 {
    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);
    }
}

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();
    }
}

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.