3.Mkdocs

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.

Writing your docs¶

(How to layout and write your Markdown source files.)

Your documentation source should be written as regular Markdown files (see Writing with Markdown below), and placed in the documentation directory. By default, this directory will be named docs and will exist at the top level of your project, alongside the mkdocs.yml configuration file.

The simplest project you can create will look something like this:

mkdocs.yml
docs/
    index.md

By convention your project homepage should always be named index. Any of the following extensions may be used for your Markdown source files: markdown, mdown, mkdn, mkd, md. All Markdown files included in your documentation directory will be rendered in the built site regardless of any settings.

[Read More...](https://www.mkdocs.org/user-guide/writing-your-docs/)

CSS¶

Image hover on mouse¶

howto hover an image:

Image met Kop

en wat text eronder! Kan ook een hele lap zijn. Best wel mooi. Maar dan moet het wel een beter image zijn dan dat ding dat we nu hebben. En kan die ook hoveren? Ik betwijvel het…

img {
    max-width: 70%;
    display: block;
}

.thumbnail {
        position: absolute;
    top: 50%;
    left: 50%;

    width: 320px;
    height: 240px;

    -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
    -moz-transform: translate(-50%,-50%); /* Firefox */
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -o-transform: translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
}
.image {
    width: 100%;
    height: 100%;
}
.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
        -moz-transition: all 1s ease; /* Firefox */
        -o-transition: all 1s ease; /* IE 9 */
        -ms-transition: all 1s ease; /* Opera */
        transition: all 1s ease;
}
.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

markdown=”1”¶

There is no concept of a <div> in Markdown syntax (or most other structural HTML elements), except that Markdown supports HTML so you can just use a <div> if you want to. But as soon as you do, nothing nested inside of it can be Markdown.

Except it can! In many (most?) varietals of Markdown, you can put <div markdown="1"> on the element and it will allow Markdown inside of it.

<div class="image" markdown="1">
![](./images/img-css_hover.jpg)
</div>

Markdown Tables¶

As the official Markdown documentation states, Markdown does not provide any special syntax for tables. Instead it uses HTML <table> syntax. But there exist Markdown syntax extensions which provide additional syntax for creating simple tables.

Markdown Tables Generator

Admonition blocks …¶

…follow a simple syntax: every block is started with !!!, followed by a single keyword which is used as the type qualifier of the block. The content of the block then follows on the next line, indented by four spaces.

See: https://squidfunk.github.io/mkdocs-material/extensions/admonition/#installation

Note