Core Plugins Markdown
Core Plugins

Markdown

Populate HTML from markdown content.

Overview

The markdown plugin uses marked.js, which is automatically loaded from its CDN when an x-markdown directive is encountered in the current view. Parsed markdown content is cached to avoid re-processing if unchanged.

All headings generated from markdown content (<h1> to <h6>elements) will have IDs automatically generated for anchor linking.

Setup

Markdown is included in manifest.js with all core plugins, or can be selectively loaded.

<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>

Inline Content

Markdown can be written directly inside elements using the x-markdown directive, with content wrapped in apostrophes.

<div x-markdown="'This is **bold** and *italic* text with a [link](/).'"></div>

Dynamic Content

Markdown content can use Alpine expressions for dynamic updates, including template literals with variables.

<div x-data="{ title: 'Your Bank Account', count: 0 }">
    <div x-markdown="`# ${title}
      Your balance is $**${count}**.`"
    ></div>
    <button @click="count++">Print Money</button>
</div>

File Content

Load markdown content from external .md files by providing a file path like x-markdown="/assets/menu.md".

<div x-markdown="'/assets/menu.md'"></div>

From Data Source

The markdown file's path can also be populated from a data source.

<h3 x-text="$x.blog.title"></h3>
<small>By <span>x-text="$x.blog.author"</span></small>
<div class="prose" x-markdown="$x.blog.article"></div>

This approach is ideal for blogs, articles, or any content managed through data sources that can leverage markdown files rather than large text blocks. It's also possible to make loading contingent on a URL route (e.g. .../blog/burn-book), use the $route() function:

<div class="prose" x-show="$x.blog.$route('path')" x-markdown="$x.blog.$route('path').article"></div>

The $route('path') function searches the data source for an item where an arbitrary property like path matches any segment of the current URL. When found, it returns that item, allowing access to its other properties like article. This enables route-specific content loading without manual URL parsing, and is how this very Markdown article is rendered.

Markdown Syntax

See this Markdown Guide for supported syntax in addition to HTML. Manifest also provides additional support for components, callouts, previews, and code blocks.

Components

A component tag placed in a markdown file will render the component in position.

Kaffee: I WANT THE TRUTH!
Col. Jessup: YOU CAN'T HANDLE THE TRUTH!

<x-disclaimer></x-disclaimer>

Callouts

Callouts highlight specific text in a long form article. They require utility styles and a parent element with the prose class applied.

Use ::: markers to open and close the callout. Text added to the opening marker's line are treated as CSS classes, useful for adding styles like Manifest utility colors. A leading icon can also be added with icon="..." anywhere in the same line.

:::
Default callout
:::

Callouts are <aside> elements within a prose parent. Modify their appearance with custom CSS:

.prose aside {
background: yellow;
border-radius: 0
}

Frames

A callout can also be a visual frame when fashioned as ::: frame.

::: frame
<img src="/assets/examples/poochie.webp">
:::

If a ::: frame callout is directly followed by a code block or group, they are styled to appear flush as a connected block. This is useful when previewing a rendered code example, like the ones seen throughout these Manifest articles.

<!-- A frame followed by a code block will be flush, just like this box you're looking at -->
::: frame
  [content]
:::

```html
  [content]
```

The frame class provides frame styles, which can be modified with custom CSS:

.prose aside.frame {
background: var(--bg-surface-2);
border-radius: 0;
}

Code Blocks

If the project includes code block support, markdown automatically converts ``` markers to Manifest <x-code> elements, with syntax highlighting support.

```javascript "Example"
function greet(name) {
    return `Hello, ${name}!`;
}
```

For a group of code blocks that can be tabbed through, wrap the blocks in <x-code-group> tags in the markdown file, with blank lines between the tags and each block.

Attributes

Code blocks support useful attributes in the opening marker's line:

  • Code language - A supported lowercase language name directly after the backticks (e.g. ```css) enables syntax highlighting.
  • Title - A block title (or title tab in code groups) can be added in quotes (e.g. "example.json").
  • Numbers - Add numbers for line numbers.
  • Copy button - Add copy for a button that copies the block's contents.
```javascript "My Script" numbers copy
console.log('Hello World');
```

Tab indents are typically preserved. If the language is HTML, HTML tags will be preserved as strings and don't require escape characters.

Powered by Manifest