Content Creation

Complete Markdown Guide

Master Markdown formatting and HTML styling to create stunning bot descriptions, server information, and content that stands out. Includes Tailwind CSS support for advanced customization.

Important Tips

Best Practices

Use headings to structure your content, keep paragraphs concise, and always preview before publishing.

Security Note

HTML and CSS are sanitized for security. Some attributes like `style` and `onclick` are not allowed.

Tailwind Classes

You can use most Tailwind utility classes. Colors, spacing, flexbox, grid, and typography work great!

Pro Tip

Combine Markdown and HTML for the best of both worlds. Use Markdown for content, HTML for advanced styling.

Text Formatting

Basic Text Styles

Essential text formatting options

Markdown Input

**Bold text** makes important information stand out. *Italic text* adds emphasis to your words. ***Bold and italic*** for maximum impact. ~~Strikethrough~~ for crossed-out text. `Inline code` for technical terms.

Rendered Output

Advanced Text Effects

Mix and match different styles

Markdown Input

You can combine **bold with *italic* text** for variety. Use `code snippets` within **bold text** effectively. Create ~~**bold strikethrough**~~ for complex formatting.

Rendered Output

Headings & Structure

Heading Hierarchy

Organize content with clear hierarchy

Markdown Input

# Main Title (H1) ## Section Header (H2) ### Subsection (H3) #### Details (H4)

Rendered Output

Horizontal Rules

Separate sections visually

Markdown Input

Content above the line. --- Content below the line. *** Another section separator.

Rendered Output

Lists & Organization

Unordered Lists

Bullet points and nested lists

Markdown Input

- Main feature - Another feature - Sub-feature - Another sub-feature - Back to main level * Alternative bullets * Work the same way * With sub-items * And deeper nesting

Rendered Output

Ordered Lists

Numbered lists with nesting

Markdown Input

1. First step 2. Second step 1. Sub-step A 2. Sub-step B 3. Third step 1. Numbers auto-increment 1. Even if you repeat 1. The same number

Rendered Output

Task Lists

Interactive checkboxes

Markdown Input

- [x] Completed task - [x] Another done item - [ ] Pending task - [ ] Future improvement - [x] Sub-task complete - [ ] Sub-task pending

Rendered Output

Tables

Basic Table

Organize data in rows and columns

Markdown Input

| Feature | Status | Notes | |---------|--------|-------| | Commands | ✅ | Fully working | | Music | 🚧 | In development | | Moderation | ✅ | Complete | | Games | ❌ | Coming soon |

Rendered Output

Aligned Tables

Control text alignment in columns

Markdown Input

| Left Aligned | Center Aligned | Right Aligned | |:-------------|:--------------:|--------------:| | Left text | Center text | Right text | | Short | Medium length | Very long text here | | A | B | C |

Rendered Output

Code Blocks

Inline Code

Highlight code within text

Markdown Input

Use `bot.command()` for commands. Install with `npm install discord.js`. The `/help` command shows all options.

Rendered Output

Code Blocks

Multi-line code with syntax highlighting

Markdown Input

```javascript // Bot command example client.on('messageCreate', (message) => { if (message.content === '!ping') { message.reply('Pong!'); } }); ``` ```python # Python bot example @bot.command() async def ping(ctx): await ctx.send('Pong!') ```

Rendered Output

Blockquotes

Simple Quotes

Highlight important information

Markdown Input

> This is a simple blockquote. > It can span multiple lines. > **Important:** Always read the documentation. > > It contains valuable information.

Rendered Output

Nested Quotes

Create quote hierarchies

Markdown Input

> Main quote level > > > Nested quote inside > > > > Another nested line > > Back to main quote level

Rendered Output

HTML & Tailwind CSS

Basic HTML Elements

Combine HTML with Tailwind styling

Markdown Input

<div class="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg"> <strong>Info Box:</strong> You can use HTML with Tailwind classes! </div> <p class="text-center text-lg font-bold text-green-400"> Centered green text </p> <button class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"> Styled Button </button>

Rendered Output

Advanced Layouts

Create complex layouts with grids

Markdown Input

<div class="grid grid-cols-2 gap-4 my-6"> <div class="p-4 bg-gray-800 rounded-lg"> <h3 class="text-xl font-bold text-yellow-400 mb-2">Features</h3> <ul class="text-gray-300"> <li>✨ Cool commands</li> <li>🎵 Music support</li> <li>🛡️ Moderation tools</li> </ul> </div> <div class="p-4 bg-gray-800 rounded-lg"> <h3 class="text-xl font-bold text-green-400 mb-2">Stats</h3> <ul class="text-gray-300"> <li>1000+ servers</li> <li>50k+ users</li> <li>99.9% uptime</li> </ul> </div> </div>

Rendered Output

Interactive Elements

Add interactive and styled elements

Markdown Input

<details class="mb-4"> <summary class="cursor-pointer font-bold text-teal-400 hover:text-teal-300"> Click to expand FAQ </summary> <div class="mt-2 p-4 bg-gray-800/50 rounded"> <p><strong>Q:</strong> How do I invite the bot?</p> <p><strong>A:</strong> Click the invite button above!</p> </div> </details> <div class="flex flex-wrap gap-2 my-4"> <span class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm">Music</span> <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm">Moderation</span> <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-sm">Fun</span> </div>

Rendered Output

Ready to Create Amazing Content?

Now that you know the basics, start creating compelling descriptions for your bots and servers. Use these formatting techniques to make your content stand out!

Need Help?

Having trouble with formatting? Our community and support team are here to help!