Skip to content

Adding a print button

You might want to customize your site to include a 'print' button on every page that will lead to the print page. See the example in the top right corner of this page 👆.

MkDocs supports theme extension, an easy way to override parts of a theme. That will allow you to add a button to the top of every page.

This plugin adds to the context a page.url_to_print_page which contains the relative link from a page to the print page. You can use page.url_to_print_page when customizing a theme:

Adding a print button to mkdocs-material theme

In the mkdocs-material theme you can create an override for main.html (see customization).

Example:

theme:
name: material
custom_dir: docs/overrides

plugins:
    - print-site
{% extends "base.html" %}

{% block content %}

{% if page.url_to_print_page %}
    <a href="{{ page.url_to_print_page }}" title="Print Site" class="md-content__button md-icon">
        {% include ".icons/material/printer.svg" %}
    </a>
{% endif %}

{{ super() }}
{% endblock content %}

Adding a print button to mkdocs theme

You can also customize the base mkdocs theme, by overriding main.html.

Example:

theme:
    name: mkdocs
    custom_dir: docs/overrides

plugins:
    - print-site
{% extends "base.html" %}

{% block repo %}
    {% if page.url_to_print_page %}
        <li class="nav-item">
            <a href="{{ page.url_to_print_page }}" title="Print Site" class="nav-link">
                <i class="fa fa-print"></i> Print
            </a>
        </li>
    {% endif %}

{{ super() }}
{% endblock repo %}