Widgets#
Buttons#
Grid of cards (md_in_html)#
grid-3 (HTML only)#
Card 1
This is the first card's content.
Card 2
This is the second card's content.
Card 3
This is the third card's content.
Card 1
This is the first card's content.
Card 2
This is the second card's content.
Card 3
This is the third card's content.
generic grids#
- Sed sagittis eleifend rutrum
- Donec vitae suscipit est
- Nulla tempor lobortis orci
- Sed sagittis eleifend rutrum
- Donec vitae suscipit est
- Nulla tempor lobortis orci
card grids#
Warning
First div must not be indented
- HTML for content and structure
- JavaScript for interactivity
- CSS for text running out of boxes
- Internet Explorer ... huh?
<div class="grid cards" markdown>
- :fontawesome-brands-html5: __HTML__ for content and structure
- :fontawesome-brands-js: __JavaScript__ for interactivity
- :fontawesome-brands-css3: __CSS__ for text running out of boxes
- :fontawesome-brands-internet-explorer: __Internet Explorer__ ... huh?
</div>
-
Set up in 5 minutes
Install
mkdocs-materialwithpipand get up and running in minutes -
It's just Markdown
Focus on your content and generate a responsive and searchable static site
-
Made to measure
Change the colors, fonts, language, icons, logo and more with a few lines
-
Open Source, MIT
Material for MkDocs is licensed under MIT and available on GitHub
<div class="grid cards" markdown>
- :material-clock-fast:{ .lg .middle } __Set up in 5 minutes__
---
Install [`mkdocs-material`](#) with [`pip`](#) and get up
and running in minutes
[:octicons-arrow-right-24: Getting started](#)
- :fontawesome-brands-markdown:{ .lg .middle } __It's just Markdown__
---
Focus on your content and generate a responsive and searchable static site
[:octicons-arrow-right-24: Reference](#)
- :material-format-font:{ .lg .middle } __Made to measure__
---
Change the colors, fonts, language, icons, logo and more with a few lines
[:octicons-arrow-right-24: Customization](#)
- :material-scale-balance:{ .lg .middle } __Open Source, MIT__
---
Material for MkDocs is licensed under MIT and available on [GitHub]
[:octicons-arrow-right-24: License](#)
</div>
HTML for content and structure
JavaScript for interactivity
CSS for text running out of boxes
Internet Explorer ... huh?
<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>
Content Tabs#
simple#
In a different tab set.
More content.
Linked tabs#
This is the content of my first tab!
Content of second tab
Tab-names must match
New tab set is started with ===!
Tab-names is same as other tab above
admonition#
blocks.adminition#
note: ...
attention ~ note ...
caution ~ note ...
danger ...
error ~ note ...
hint ~ note ...
tip ...
Warning with no Warning title!
warning ...
Warning with Warning title!
# markdown
/// warning | warning ...
Warning with Warning title!
///
# to HTML
<div class="admonition warning">
<p class="admonition-title">warning ...</p>
<p>Warning with Warning title!</p>
</div>
warning ...
Beware the markdown is insert and interpreted before being turned in HTML. So you must use triple ticks to see the content, unless not markdown!
<div class="admonition warning">
<p class="admonition-title">warning ...</p>
<p>Beware the markdown is insert and interpreted before being turned in HTML. So you must use triple ticks to see the content, unless not markdown!
</p><div class="language-text highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a>*[Toc]: Table of Contents
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a>*[TOC]: Table Of Contents
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>*[GFM]: GitHub Flavored Markdown
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a>*[FAQ]: Frequent Asked Questions
</span></code></pre></div>
</div>
Tentative#
/// example | e ///
blocks.details#
note ...
danger ...
tip ...
question ...
/// details | question ...
type: question
///
# HTML rendering
<details class="question">
<summary>question ...</summary>
</details>
warning ...
Rendering of pymdownx.blocks.details is function of type, which is a CSS class!
/// details | warning ...
type: warning
open: True
Rendering of pymdownx.blocks.details is function of type, which is a CSS class!
///
# HTML rendering
<details class="warning" open="open">
<summary>warning ...</summary>
<p>Rendering of pymdownx.blocks.details is function of type, which is a CSS class!</p>
</details>
tip ...
Beware the markdown is insert and interpreted before being turned in HTML. So you must use triple ticks to see the content, unless not markdown!
Tentative#
examplee
Hello!
Custom admonition (old style) + CSS#
Tentative#
!!! 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.
!!! mycustom "Custom Admonition "
This is an example of a custom admonition styled with a unique look.
!!! pied-piper "Pied Piper"
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.