Markdown and Mkdocs-material memo¶

Setup and configuration¶

Markdown Extention in Mkdocs-Material¶

Enable markdown_extentions in mkdocs.yml. For example:

markdown_extensions:
  - admonition
  - def_list
  - attr_list
  - footnotes

Change the theme color¶

Ref.Mkdocs-material Setup changing the color

Cheatsheet¶

Definition¶

mkdocs.yml

1 2	`markdown_extensions: - def_list`

xxxx.md

`Definition Term`
:    description. 記述。설명．Описание．apibūdinimas．描述
description. 記述。설명．Описание．apibūdinimas．描述
description. 記述。설명．Описание．apibūdinimas．描述

Definition Term: description. 記述。설명．Описание．apibūdinimas．描述 description. 記述。설명．Описание．apibūdinimas．描述 description. 記述。설명．Описание．apibūdinimas．描述

Code Block¶

mkdocs.yml

markdown_extensions:
  - pymdownx.highlight:
      linenums: true
      linenums_style: pymdownx.inline
  - pymdownx.superfences

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js
  - javascripts/config.js

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css

xxxx.md

  ``` md linenums="1"
  aaa
    - list1
    - list2
  ```

Ref

Admonition¶

mkdocs.yml

1 2	`markdown_extensions: - admonition`

xxxx.md

!!! Note
    This is a note

!!! Tip
    This is a tip

!!! Warning
    Warning is here

!!! Danger
    hey it's danger

!!! Success
    successul!

!!! Failure
    it's a failure

!!! Bug
    omg it's a bug!

!!! summary
    This is a summary

Note

This is a note

Tip

This is a tip

Warning

Warning is here

Danger

hey it’s danger

Success

successul!

Failure

it’s a failure

Bug

omg it’s a bug!

Summary

This is a summary

footnote¶

mkdocs.yml

1 2	`markdown_extensions: - footnotes`

xxxx.md

I went to Fablab Kannai[^1] for local session[^2] . 

[^1]:Fablab Kannai is a community space offering digital fabrication experience. Fablab Kannai is located in bay city area in very good access from Yokohama, Japan. 
[^2]:
    Local session for FabAcademy is organized by local instructors every week through the course of FabAcademy2021.

I went to Fablab Kannai¹ for local session² .

Ref.Mkdocs-material reference

Install lightbox2¶

Download a zip from Github releases pages or install using npm.

1 2	`$ cd ~ $ npm install lingtbox2 --save`

Configuration with Mkdocs¶

Then copy lightbox-plus-jquery.min.js and lightbox.min.css file under docs/ in your Mkdocs project. Following example is for location installed by npm.

1
2
3

$ cp -p ~/node_modules/lightbox2/dist/js/lightbox-plus-jquery.min.js ~/repo/fabcloud/fabacademy/docs/lightbox2/javascripts/
$ cp -p ~/node_modules/lightbox2/dist/css/lightbox.min.css ~/repo/fabcloud/fabacademy/docs/lightbox2/css/
$ cp -p ~/node_modules/lightbox2/dist/images/* ~/repo/fabcloud/fabacademy/docs/lightbox2/images/

Add definition for js and css to mkdocs.yml.

extra_javascript:
  - lightbox2/javascripts/lightbox-plus-jquery.min.js 

extra_css:
  -  lightbox2/css/lightbox.min.css

Single Image¶

Add a data-lightbox attribute to image links to enable Lightbox using a unique name for the value of attribute. Below is two individual images:

<a href="../../../images/lasercut/heatpress/HeatPressT_1.jpg" data-lightbox="preparation" data-title="Preparation">
    <img src="../../../images/lasercut/heatpress/HeatPressT_1.jpg" width="200px"> 
</a>
<a href="../../../images/lasercut/heatpress/HeatPressT_8.jpg" data-lightbox="result" data-title="Result">
    <img src="../../../images/lasercut/heatpress/HeatPressT_8.jpg" width="200px"> 
</a>

Tip

Relative path for HTML tag in Mkdocs document is “one deeper” than usual way. In this case,

docs/image : image directory
docs/tips/content/markdown.md : this document

For usual way, “image” directory is referred by “../../image” at markdown.md. However, for HTML tag in Mkdocs, “image” directory is referred by ”../../../image” .

Image sets¶

Naming the same value for data-lightbox attribute, you have a group of related image as a gallery view.

<a href="../../../images/lasercut/heatpress/HeatPressT_2.jpg" data-lightbox="heatpress" data-title="Put cover sheet">
    <img src="../../../images/lasercut/heatpress/HeatPressT_2.jpg" width="150px"> 
</a>
<a href="../../../images/lasercut/heatpress/HeatPressT_5.jpg" data-lightbox="heatpress" data-title="Start from big sized parts in this case">
    <img src="../../../images/lasercut/heatpress/HeatPressT_5.jpg" width="150px"> 
</a> 
<a href="../../../images/lasercut/heatpress/HeatPressT_3.jpg" data-lightbox="heatpress" data-title="Press it">
    <img src="../../../images/lasercut/heatpress/HeatPressT_3.jpg" width="150px"> 
</a> 
<a href="../../../images/lasercut/heatpress/HeatPressT_4.jpg" data-lightbox="heatpress" data-title="Check alignment in positioning between parts">
    <img src="../../../images/lasercut/heatpress/HeatPressT_4.jpg" width="150px">
</a>

References¶

Examples from FabAcademy student template¶

Ref. FabAcademy student template

Research¶

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

2D and 3D Modeling¶

Add here your modeling and design.

Some other section¶

This is an updated text.

Materials¶

Qty	Description	Price	Link	Notes
1	Material one	22.00 $	http://amazon.com/test	Order many
1	Material two	22.00 $	http://amazon.com/test
1	Material three	22.00 $	http://amazon.com/test
1	Material five	22.00 $	http://amazon.com/test
1	Material eight	22.00 $	http://amazon.com/test
1	Material twelve	22.00 $	http://amazon.com/test
1	Material eleven	22.00 $	http://amazon.com/test

Useful links¶

Code Example¶

Use the three backticks to separate code.

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

Gallery¶

Video¶

From Vimeo¶

Sound Waves from George Gally (Radarboy) on Vimeo.

From Youtube¶

3D Models¶

Dita's Gown by Francis Bitonti Studio on Sketchfab

Fablab Kannai is a community space offering digital fabrication experience. Fablab Kannai is located in bay city area in very good access from Yokohama, Japan. ↩
Local session for FabAcademy is organized by local instructors every week through the course of FabAcademy2021. ↩

Last update: February 18, 2021

Markdown and Mkdocs-material memo¶

Setup and configuration¶

Markdown Extention in Mkdocs-Material¶

Change the theme color¶

Cheatsheet¶

Definition¶

Code Block¶

Admonition¶

footnote¶

lightbox¶

Install lightbox2¶

Configuration with Mkdocs¶

Single Image¶

Image sets¶

References¶

Examples from FabAcademy student template¶

Research¶

2D and 3D Modeling¶

Some other section¶

Materials¶

Useful links¶

Code Example¶

Gallery¶

Video¶

From Vimeo¶

From Youtube¶

3D Models¶