Skip to content

Add Markdoc to the doc tools #11782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 25, 2024
1 change: 1 addition & 0 deletions docs/user/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ Read the Docs: documentation simplified
/intro/doctools
/intro/mkdocs
/intro/sphinx
/intro/markdoc
/intro/add-project
/examples

Expand Down
10 changes: 10 additions & 0 deletions docs/user/intro/doctools.rst
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,13 @@ with more coming soon.
:bdg-success:`rst` :bdg-success:`md`
Written in
:bdg-info:`python`

.. grid-item-card:: Markdoc
:link: markdoc.html

Markdoc is a documentation tool developed by Stripe that allows you to write documentation in a custom Markdown flavor.

Supported formats
:bdg-success:`md`
Written in
:bdg-info:`javascript`
82 changes: 82 additions & 0 deletions docs/user/intro/markdoc.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
Markdoc
=======

.. meta::
:description lang=en: Hosting Markdoc documentation on Read the Docs.

`Markdoc`_ is a powerful documentation framework that allows you to write documentation in a flavor of Markdown.

Minimal configuration is required to build an existing Markdoc project on Read the Docs.

.. code-block:: yaml
:caption: .readthedocs.yaml

version: 2

build:
os: ubuntu-24.04
tools:
nodejs: "22"
commands:
# Install dependencies
- cd docs/ && npm install
# Build the site
- cd docs/ && npm run build
# Copy generated files into Read the Docs directory
- mkdir --parents $READTHEDOCS_OUTPUT/html/
- cp --verbose --recursive docs/out/* $READTHEDOCS_OUTPUT/html/

.. _Markdoc: https://markdoc.io/

Example configuration
---------------------

In order to build a Markdoc project on Read the Docs,
you need to generate static HTML from the Next JS build:

.. code-block:: js
:caption: next.config.js

const withMarkdoc = require('@markdoc/next.js');

const nextConfig = {
// Optional: Export HTML files instead of a Node.js server
output: 'export',

// Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
trailingSlash: true,

// Use the proper base path for prod and PR builds.
basePath: process.env.READTHEDOCS_CANONICAL_URL || '',```
}

module.exports =
withMarkdoc({mode: 'static'})({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdoc'],
...nextConfig,
});

Quick start
-----------

- If you have an existing Markdoc project you want to host on Read the Docs, check out our :doc:`/intro/add-project` guide.

- If you're new to Markdoc, check out the official `Getting started with Markdoc`_ guide.

.. _Getting started with Markdoc: https://markdoc.io/docs/getting-started

Example repository and demo
---------------------------

Example repository
https://github.com/readthedocs/test-builds/tree/markdoc

Demo
https://test-builds.readthedocs.io/en/markdoc/

Further reading
---------------

* `Markdoc documentation`_

.. _Markdoc documentation: https://markdoc.io/docs