Markdown

Markdown is a markup syntax that uses simple symbols such as #, -, and ** to add structure—including headings, lists, and emphasis—to plain text. It is widely supported because it lets you create content with headings, paragraphs, lists, links, and images without writing complex HTML elements directly.

Essepage provides convenient features that let you use Markdown without JavaScript or additional libraries.

You can use Markdown in three ways:

• Turn a Markdown file into a webpage: Markdown Web Pages
• Write Markdown directly inside HTML: Inline Markdown
• Include a separate Markdown file in an HTML page

For Markdown syntax and more examples, see the CommonMark Markdown Reference.

Creating a Markdown Web Page

Markdown Web Pages are useful for text-focused content such as blog posts and product documentation.

Create the following file under /public:

/public/blog/@title.md

Write the content using Markdown syntax.

# My First Blog Post

This is my first post written in Markdown.

## Introduction

Markdown makes it easy to write content.

- Easy to read
- Easy to write
- Easy to manage

When you publish this file, a webpage is created at the following URL:

/blog/title

The @ at the beginning of the filename and the .md extension do not appear in the URL.

Essepage treats files beginning with @ as a special file type called an Article File.

The contents of the Markdown file are automatically converted to HTML and displayed to visitors.

For example, the following Markdown:

# My First Blog Post

This is my first post written in Markdown.

is converted to the following HTML:

<h1>My First Blog Post</h1>

<p>This is my first post written in Markdown.</p>

You can apply CSS to design the page.

Markdown Web Pages are useful when written content is the focus of the page, such as blog posts, product documentation, and help articles.

Applying a Layout to Markdown Web Pages

If a +layout.essepage file exists in the same folder as a Markdown Web Page or in one of its parent folders, the layout is also applied to the Markdown content.

Let’s create a layout shared by the pages in a blog.

/public
└── blog
    ├── +layout.essepage
    └── @title.md

In /public/blog/+layout.essepage, add the navigation, content area, and footer shared by the blog pages.

<header>
    <a href="/">My Website</a>

    <nav>
        <a href="/">Home</a>
        <a href="/blog/title">Blog</a>
    </nav>
</header>

<main>
    <essepage-slot></essepage-slot>
</main>

<footer>
    <p>© My Website</p>
</footer>

In /public/blog/@title.md, write only the content of the post.

# My First Blog Post

Welcome to my blog.

## About This Blog

I write about web design and development.

The Markdown content is converted to HTML and displayed at the <essepage-slot> position in the layout.

You do not need to repeat the navigation, header, and footer in every Markdown file.

Write content in Markdown and use a layout to apply a shared structure and design to the pages.

By creating multiple Markdown files, you can build a blog or documentation site in which every page uses the same layout.

/public
└── blog
    ├── +layout.essepage
    ├── @first-post.md
    ├── @second-post.md
    └── @third-post.md

Each file is connected to the following URL:

If another layout exists in a parent folder, that layout is applied as well.

For example, if /public/+layout.essepage exists, both the site-wide layout and the blog layout at /public/blog/+layout.essepage are applied.

See Layouts to learn more about layout scope and nesting.

Writing Markdown Inside HTML

When building a page with HTML, you may want to write only a particular section in Markdown.

HTML does not convert Markdown by itself, so this normally requires a JavaScript library or a separate conversion process. Essepage provides Inline Markdown, which lets you write Markdown directly inside HTML.

Write Markdown inside an <essepage-markdown> element.

<header>
    <h1>My Website</h1>
</header>

<main>
    <essepage-markdown>
# About Us

We create tools that help people build websites.

## Our Strengths

- Easy to use
- Works in the browser
- No server setup
    </essepage-markdown>
</main>

The content inside <essepage-markdown> is converted to HTML and displayed on the page.

This method is useful when:

• You want to write only part of an HTML page in Markdown
• You want to build the overall structure in HTML and write the text content in Markdown
• The content is not long enough to require a separate Markdown file

For example, you can build the structure of a card in HTML and write only its description in Markdown.

<section class="card">
    <div>
        <essepage-markdown>
## Browser-Based Editor

Write code, preview your work, and publish your website directly from the browser.
        </essepage-markdown>
    </div>

    <a href="/editor">Learn More</a>
</section>

Moving Markdown into a Separate File

Even if you begin with a short section inside <essepage-markdown>, the page file may become difficult to manage as more content is added.

In that case, move the Markdown into a separate file.

You can use the following file structure:

/
├── content
│   └── introduction.md
└── public
    └── +page.essepage

This Markdown content is a source file included by a page, not a webpage itself, so it can be stored outside /public.

Write the content in /content/introduction.md.

# About Our Service

We provide simple tools for building and publishing websites.

## Main Features

- Browser-based code editor
- Live preview
- Simple publishing workflow
- Built-in website hosting

Include the file in the page using the markdown method.

<header>
    <h1>My Website</h1>
</header>

<main>
    {{+ markdown : /content/introduction.md +}}
</main>

The Markdown file is converted to HTML and displayed inside <main>.

This method is useful when:

• The content inside <essepage-markdown> has become long
• You want to manage the HTML structure and written content in separate files
• You want to use the same Markdown content on multiple pages

You can begin with <essepage-markdown> and move the content into a separate Markdown file when it becomes longer.

If entering the exact path manually is difficult, right-click the Markdown file in the file explorer and select Copy Path. Pasting the copied path helps prevent typing errors.

See Including Files to learn more about including files.

Styling Markdown Content

Markdown converts headings to elements such as <h1> and <h2>, paragraphs to <p>, and lists to <ul> or <ol>.

You can therefore style Markdown content by applying CSS to the generated HTML elements.

Styling with CSS

Assign a markdown-content class to the element that wraps the Markdown content to limit the styles to that content.

When using a layout with a Markdown Web Page, wrap <essepage-slot> in an element with the class.

<article class="markdown-content">
    <essepage-slot></essepage-slot>
</article>

You can use the same class when writing Markdown directly inside HTML.

<article class="markdown-content">
    <essepage-markdown>
# About Us

We create tools that help people build websites.
    </essepage-markdown>
</article>

You can also wrap an included Markdown file in the same way.

<article class="markdown-content">
    {{+ markdown : /content/introduction.md +}}
</article>

Add the following CSS to the page or layout.

<style>
    .markdown-content {
        max-width: 720px;
        margin: 0 auto;
        padding: 40px 20px;
        color: #1f2937;
        line-height: 1.7;
    }

    .markdown-content h1 {
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 2px solid #111827;
        color: #030712;
        font-size: 36px;
        text-align: center;
    }

    .markdown-content h2 {
        margin-top: 48px;
        margin-bottom: 16px;
        color: #111827;
        font-size: 28px;
    }

    .markdown-content p {
        margin: 16px 0;
    }

    .markdown-content ul,
    .markdown-content ol {
        margin: 20px 0;
        padding-left: 24px;
    }

    .markdown-content ul {
        list-style: disc;
    }

    .markdown-content ol {
        list-style: decimal;
    }

    .markdown-content a {
        color: #2563eb;
        text-decoration: underline;
    }

    .markdown-content blockquote {
        margin: 24px 0;
        padding: 4px 0 4px 20px;
        border-left: 4px solid #9ca3af;
        color: #4b5563;
    }

    .markdown-content img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 32px auto;
    }

    .markdown-content pre {
        overflow-x: auto;
        margin: 24px 0;
        padding: 20px;
        border-radius: 8px;
        background: #f3f4f6;
    }
</style>

Styling with Tailwind CSS

If you use Tailwind CSS, you can apply styles to Markdown content with @apply.

First, load the Tailwind CSS Play CDN in <head>.

Write the Markdown styles inside <style type="text/tailwindcss">.

<head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style type="text/tailwindcss">
        .markdown-content {
            @apply max-w-3xl mx-auto px-4 py-5
                text-gray-800 leading-relaxed break-keep;
        }

        .markdown-content h1 {
            @apply mb-8 pb-5
                border-b-2 border-gray-900
                text-center text-2xl font-bold text-gray-950;
        }

        .markdown-content h2 {
            @apply mt-10 mb-4
                text-xl font-bold text-gray-900;
        }

        .markdown-content p {
            @apply my-4;
        }

        .markdown-content ul {
            @apply my-5 list-disc space-y-2 pl-6;
        }

        .markdown-content ol {
            @apply my-5 list-decimal space-y-2 pl-6;
        }

        .markdown-content a {
            @apply text-blue-600 underline underline-offset-4;
        }

        .markdown-content blockquote {
            @apply my-6 py-1 pl-5
                border-l-4 border-gray-400 text-gray-600;
        }

        .markdown-content img {
            @apply block max-w-full h-auto mx-auto my-8;
        }

        .markdown-content pre {
            @apply overflow-x-auto my-6 p-5
                rounded-lg bg-gray-100;
        }

        .markdown-content code {
            @apply font-mono text-sm;
        }
    </style>
</head>

Wrap the Markdown content in an element with the markdown-content class to apply the Tailwind CSS styles defined above.

<article class="markdown-content">
    <essepage-slot></essepage-slot>
</article>

For more information about <style type="text/tailwindcss"> and @apply, see the following official documentation:

• Tailwind CSS Play CDN
• Tailwind CSS Functions and Directives

Publishing a Markdown Web Page

Markdown Web Pages such as @title.md can be published and updated in the same way as regular +page.essepage files.

To publish a Markdown Web Page:

1. Save the Markdown file.
2. Right-click the file.
3. Select Publish.
4. Check the converted page in the preview.
5. Select Open Page to view the published page.

To update a published Markdown Web Page:

1. Edit the Markdown content.
2. Save the file.
3. Check the result in the preview.
4. Select Apply Changes.
5. Check the final result on the published page.

If a Markdown file is used by multiple pages, you can use Apply All to apply the related changes together.

Next Steps

Now that you understand how to use Markdown in Essepage, continue with the following documents:

• Prepare image URLs for Markdown: External Files
• Apply a shared structure and design to Markdown files: Layouts
• Insert a separate Markdown file into a page: Including Files
• Apply CSS to pages and Markdown content: CSS
• Set the title and description of a Markdown Web Page: Metadata and SEO