Lithos is built on Nuxt Content and Docus. Your primary authoring syntax is always Obsidian (see Writing Content). MDC (Markdown Components) syntax is available for features that have no Obsidian equivalent -- interactive tabs, landing page grids, code groups, and other web-specific components.

MDC Syntax Basics

MDC allows you to use Vue components directly in your Markdown.

Attributes and Props

You can pass props to components using {} syntax:

• String: key="value"
• Number: key=123
• Boolean: key (implies true) or :key="false"
• Array/Object: :key="[1, 2]"

::alert{type="info" :dismissible="true"}
This is an info alert.
::

Slots

Components can have named slots invoked with #slot-name.

::card
#title
My Card Title

#default
This is the main content of the card.

#footer
Optional footer content.
::

Built-in Components

Lithos inherits Docus's rich component library.

Alert / Callout

Badge

Code Groups

Display multiple code blocks in a tabbed interface:

npm install lithos

yarn add lithos

Steps

Great for tutorials or workflows:

Layout Slots

You can insert content into specific layout slots using the :: syntax.

Page Hero (::block-hero)

Overrides the header area of the page.

Card Grid (::card-grid)

Creates a responsive grid for keys features or navigation.

Frontmatter

Lithos supports both Obsidian-style YAML frontmatter and Nuxt Content's extended frontmatter.

---
title: My Page
description: Page description
icon: i-lucide-home
navigation:
  title: Sidebar Title
head:
  meta:
    - name: 'keywords'
      content: 'nuxt, obsidian, docs'
---

Mixing with Obsidian

You can use MDC components inside Obsidian callouts, or Obsidian links inside MDC components.