Mkdoc

A clear and concise navigation structure is an important aspect of good project documentation. Material for MkDocs provides a multitude of options to configure the behavior of navigational elements, including tabs and sections, and its flag-ship feature: instant loading. Lets say you mkdoc schema is as following: You can customise your PDF layout design by passing a CSS file location to the parameter design like in the folowing example. The provided file location, must be relative to your MkDocs project folder. External url display.

MkDocs is a Python-based static site generatorthat combines Markdown content with Jinja2 templates toproduce websites. MkDocs can be pronounced 'McDocs' or 'M-K Docs',although the core committers do not have a strong preferenceone way or the other on the name's pronunciation.

Mkdocs Serve

MkDocs'source code is available on GitHubunder theBSD 2-clause license.

What's great about MkDocs?

MkDocs uses a YAML configuration file and can optionally use themes toeasy change the look-and-feel of the documentation output.

In addition to the easy configuration via a YAML file and the drop-inthemes, MkDocs also has a wonderful search feature. Search is often notpossible out of the box in other static site generators. With MkDocs searchcan easily be added without plugins or code changes to the static sitegenerator.

MkDocs is an implementation of the static site generators concept. Learn how the parts fit together in the web development chapter or view all topics.

MkDocs resources

  • The officialGetting Started with MkDocsis likely the best place to go when you are just getting set up with yourfirst site that uses this project.

  • Mkdocs documentation is a quicktutorial to get MkDocs installed and modify the initial mkdocs.yml file.

  • MkDocs making stridesis a post from one of the project's core commiters on some changes thatgreatly improved the project such as site regeneration during developmentwhen a file is modified, search, the command-line client and packageabletheming.

What do you need to learn about static site generators?

I want to learn how to code a Python web application using a framework.

Mkdoc

I've built a Python web app, now how do I deploy it?

A clear and concise navigation structure is an important aspect of good project documentation. Material for MkDocs provides a multitude of options to configure the behavior of navigational elements, including tabs and sections, and its flag-ship feature: instant loading.

Configuration¶

Instant loading¶

Source · Feature flag

When instant loading is enabled, clicks on all internal links will be intercepted and dispatched via XHR without fully reloading the page. Add the following lines to mkdocs.yml:

The resulting page is parsed and injected and all event handlers and components are rebound automatically. This means that Material for MkDocs behaves like a Single Page Application, which is especially useful for large documentation sites that come with a massive search index, as the search index will now remain intact in-between document switches.

Material for MkDocs is the only MkDocs theme offering this feature.

Anchor tracking¶

Source · Feature flag · Insiders only

When anchor tracking is enabled, the URL in the address bar is automatically updated with the active anchor as highlighted in the table of contents. Add the following lines to mkdocs.yml:

Navigation tabs¶

Source · Feature flag

When tabs are enabled, top-level sections are rendered in a menu layer below the header for viewports above 1220px, but remain as-is on mobile.1 Add the following lines to mkdocs.yml:

Sticky navigation tabs¶

Source · Feature flag · Experimental · Insiders only

When sticky tabs are enabled, navigation tabs will lock below the header and always remain visible when scrolling down. Just add the following two feature flags to mkdocs.yml:

Navigation sections¶

Source · Feature flag

When sections are enabled, top-level sections are rendered as groups in the sidebar for viewports above 1220px, but remain as-is on mobile. Add the following lines to mkdocs.yml:

Both feature flags, tabs and sections, can be combined with each other. If both feature flags are enabled, sections are rendered for level 2 navigation items.

Navigation expansion¶

Source · Feature flag

When expansion is enabled, the left sidebar will expand all collapsible subsections by default, so the user doesn't have to open subsections manually. Add the following lines to mkdocs.yml:

Section index pages¶

Source · Feature flag · Experimental · Insiders only

When section index pages are enabled, documents can be directly attached to sections, which is particularly useful for providing overview pages. Add the following lines to mkdocs.yml:

In order to link a page to a section, create a new document with the name index.md in the respective folder, and add it to the beginning of your navigation section:

This feature flag can be combined with all other feature flags, e.g. tabs and sections, except for table of contents navigation integration. Note that it doesn't rely on third-party plugins2.

Back-to-top button¶

Source · Feature flag

A back-to-top button can be shown when the user, after scrolling down, starts to scroll up again. It's rendered in the lower right corner of the viewport. Add the following lines to mkdocs.yml:

Table of contents¶

Source · Extension

Mkdocs material

The Table of contents extension, which is part of the standard Markdown library, provides some options that are supported by Material for MkDocs to customize its appearance:

permalink

Default: false – This option adds an anchor link containing the paragraph symbol or another custom symbol at the end of each headline, exactly like on the page you're currently viewing, which Material for MkDocs will make appear on hover:

slugify

Default: headerid.slugify – This option allows for customization of the slug function. For some languages, the default may not produce good and readable identifiers – consider using another slug function like for example those from Python Markdown Extensions:

Mkdocs Plugins

toc_depth

Default: 6 – Define the range of levels to be included in the table of contents. This may be useful for project documentation with deeply structured headings to decrease the length of the table of contents, or to remove the table of contents altogether:

Material for MkDocs doesn't provide official support for the other options of this extension, so they may be supported but might yield unexpected results. Use them at your own risk.

Navigation integration¶

Source · Feature flag

Alternative

When integration is enabled, the table of contents is rendered as part of the navigation for viewports above 1220px, but remains as-is on mobile. Add the following lines to mkdocs.yml:

The content section will now always stretch to the right side, resulting in more space for your content. This feature flag can be combined with all other feature flags, e.g. tabs and sections.

Hide the sidebars¶

Source · Metadata

Sometimes it's desirable to hide the navigation and/or table of contents sidebar, especially when there's a single navigation item. This can be done for any page using the Metadata extension:

Mkdocs Yml

Customization¶

Mkdocs

Keyboard shortcuts¶

Source · Difficulty: easy

Material for MkDocs includes several keyboard shortcuts that make it possible to navigate your project documentation via keyboard. There're two modes:

search

This mode is active when the search is focused. It provides several key bindings to make search accessible and navigable via keyboard:

  • Down , Up : select next / previous result
  • Esc , Tab : close search dialog
  • Enter : follow selected result
global

This mode is active when search is not focussed and when there's no other focussed element that is susceptible to keyboard input. The following keys are bound:

  • F , S , / : open search dialog
  • P , , : go to previous page
  • N , . : go to next page

Let's say you want to bind some action to the X key. By using additional JavaScript, you can subscribe to the keyboard$ observable and attach your custom event listener:

The call to key.claim() will essentially execute preventDefault() on the underlying event, so the keypress will not propagate further and touch other event listeners.

Content area width¶

Source · Difficulty: easy

The width of the content area is set so the length of each line doesn't exceed 80-100 characters, depending on the width of the characters. While this is a reasonable default, as longer lines tend to be harder to read, it may be desirable to increase the overall width of the content area, or even make it stretch to the entire available space.

This can easily be achieved with an additional stylesheet and a few lines of CSS:

Mkdocs Alternative

Mkdoc

MkPDFs For MkDocs - GitHub Pages

  1. Prior to version 6.2, navigation tabs had a slightly different behavior. All top-level pages (i.e. all top-level entries that directly refer to an *.md file) defined inside the nav entry of mkdocs.yml were grouped under the first tab which received the title of the first page. This made it impossible to include a top-level page (or external link) as a tab item, as was reported in #1884 and #2072. From version 6.2 on, navigation tabs include all top-level pages and sections. ↩

  2. If you don't want to use the native integration, the mkdocs-section-index plugin might be an alternative. However, note that this plugin may not be compatible with all navigation-related features offered by Material for MkDocs. ↩