Something something 10 things to do in Colombo

Here’s a complete Markdown example demonstrating every major element your Directus editor supports — text styles, links, lists, code, images, quotes, and horizontal rules.

A Complete Markdown Example

Welcome to the Directus Blog Demo Post.
This sample shows every content type you might use when writing a blog.

1. Text Styles

Bold text emphasizes importance.
Italic text adds subtle stress.
Bold and italic can combine.
~~Strikethrough~~ marks removed ideas.
Normal text continues as usual.

2. Headings

H1 — Main Title

H2 — Section

H3 — Subsection

H4 — Minor Section

3. Paragraphs and Line Breaks

A paragraph ends with a blank line.
You can break a line
without starting a new paragraph
by ending a line with two spaces.

4. Lists

Unordered

Beaches
Mountains
- Forests inside them
- Rivers crossing through
Cities

Ordered

Wake up early
Brew some coffee
Watch the sunrise

5. Blockquote

“Travel makes one modest. You see what a tiny place you occupy in the world.”
— Gustave Flaubert

Nested quote:

Inspiration

Comes from everywhere.

6. Links

Inline link: Visit Sri Lanka
Reference link: Read more

7. Code

Inline code looks like console.log("Hello world").

Code Block

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Traveler"));

HTML Block

<section>
  <h2>Example Section</h2>
  <p>This is an HTML snippet inside markdown.</p>
</section>

8. Horizontal Rule

9. Images

Palm trees in Trincomalee

10. Tables

Place	Highlight	Rating
Trincomalee	Beaches	⭐⭐⭐⭐
Kandy	Temples	⭐⭐⭐⭐
Ella	Mountains	⭐⭐⭐⭐⭐

11. Inline HTML (if allowed)

<div style="background:#f9f9f9; padding:10px; border-left:3px solid #ccc;"> This block mixes HTML with Markdown. </div>

12. Divider with Text

Final Thoughts

Markdown keeps your content portable and simple. You can write once and render anywhere — whether as HTML in Directus or as React components in Next.js.


This covers **every element** your Directus editor toolbar supports:  
- bold, italic, headings, lists, quote, code, link, image  
- plus extras like tables and HTML for completeness.  

Do you want me to show how to **render all of these safely** in your Next.js blog (with syntax highlighting, images, etc.)?