What is MkDocs ?

MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.

Mkdocs Catalog

A list of awesome MkDocs projects and plugins: mkdocs/catalog

Mkdocs Material

Material for MkDocs is a powerful documentation framework on top of MkDocs, a static site generator for project documentation.
If you're familiar with Python, you can install Material for MkDocs with pip , the Python package manager. If not, we recommend using docker.

1. Getting started

2. Setup

3. Plugins

4. Reference

5. Insiders

6. Community

Getting Statrted

Installation

Material for MkDocs is a powerful documentation framework on top of MkDocs, a static site generator for project documentation.1 If you're familiar with Python, you can install Material for MkDocs with pip, the Python package manager. If not, we recommend using docker

with pip

pip install mkdocs-material

with docker

docker pull squidfunk/mkdocs-material

with git

git clone https://github.com/squidfunk/mkdocs-material.git

Creating your site

After you've installed Material for MkDocs, you can bootstrap your project documentation using the mkdocs executable. Go to the directory where you want your project to be located and enter:

mkdocs new .

Minimal configuration

site_name: My site
site_url: https://mydomain.org/mysite
theme:
  name: material

Previewing as you write

mkdocs serve

Publishing your site

https://squidfunk.github.io/mkdocs-material/publishing-your-site/

Customization

https://squidfunk.github.io/mkdocs-material/customization/

Cheatsheet

Admonitions

Admonition

!!! note

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

Changing the title

!!! note "Phasellus posuere in sem ut cursus"

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

Removing the title

!!! note ""

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

Collapsible blocks

??? note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.

??? note

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

Admonition, collapsible and initially expanded

Adding a + after the ??? token renders the block expanded:

???+ note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
massa, nec semper lorem quam in massa.

???+ note

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod
    nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor
    massa, nec semper lorem quam in massa.

Inline blocks

!!! info inline end "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Nulla et euismod nulla.
    Curabitur feugiat, tortor non consequat
    finibus, justo purus auctor massa, nec
    semper lorem quam in massa.

Inline

!!! info inline "Lorem ipsum"

    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Nulla et euismod nulla.
    Curabitur feugiat, tortor non consequat
    finibus, justo purus auctor massa, nec
    semper lorem quam in massa.

Important: admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there's insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

Supported types

note
abstract
info
tip
success
question
warning
failure
danger
bug
example
quote

Using card grids

List syntax

<div class="grid cards" markdown>

- [Linux vs Windows Commands](https://weblog.mrbarua.com/blog/linux-vs-windows-commands/)
- [Linux vs Windows Commands](https://weblog.mrbarua.com/blog/linux-vs-windows-commands/)
- [Linux vs Windows Commands](https://weblog.mrbarua.com/blog/linux-vs-windows-commands/)
- [Linux vs Windows Commands](https://weblog.mrbarua.com/blog/linux-vs-windows-commands/)

</div>

Block syntax

<div class="grid" markdown>

:fontawesome-brands-html5: __HTML__ for content and structure
{ .card }

:fontawesome-brands-js: __JavaScript__ for interactivity
{ .card }

:fontawesome-brands-css3: __CSS__ for text running out of boxes
{ .card }

> :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?

</div>

External Resources

https://www.mkdocs.org/

https://www.mkdocs.org/getting-started/

https://www.mkdocs.org/user-guide/

https://www.mkdocs.org/dev-guide/

https://github.com/mkdocs

https://github.com/mkdocs/catalog

https://www.convertsimple.com/