Markdown Tech Support¶

Images (sizing, alignment, etc)¶

Place an Image with rounded corners¶

To add an image with rounded corners, use the line of html below, you can paste thsi directly into your markdown file, adjust the border-radius styling to change the amount of rounding.

<img src="path/to/your/imgage.jpg" alt="img description here" style="border-radius: 5px;">

multiple images in a grid¶

If you want to display multiple images on your page underneath eachother you can try putting them into a grid using html.

Info

Right now this will display the images in a grid on both desktop and mobile viewers, so even on a phone it’ll still appear as a grid, I’m working on adding mobile responsiveness to the code so that the images display underneath eachother when viewed on a mobile display.

<div class="image-grid">
  <img src="path/to/your/imgage.jpg" class="grid-item" alt="insert img description here">
  <img src="path/to/your/imgage.jpg" class="grid-item" alt="insert img description here">
  <img src="path/to/your/imgage.jpg" class="portrait-image" alt="insert img description here">
  <img src="path/to/your/imgage.jpg" class="grid-item" alt="insert img description here">
  <img src="path/to/your/imgage.jpg" class="grid-item" alt="insert img description here">
  <img src="path/to/your/imgage.jpg" class="grid-item" alt="insert img description here">
  <!-- Add more images as needed -->
</div>

<!-- CSS Styles -->
<style>
  /* Styles for the image grid container */
  .image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    /*grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));*/ /*use this line of code to create a responsive grid that will place all images in one continuous row - each image will shrink accordignly*/
    grid-gap: 10px;
    /* Additional grid container styles can be added here */
  }

  /* Styles for individual grid items (images) */
  .grid-item {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px; /* Add rounded corners to images */
    /* Additional styles for grid items can be added here */
  }
  /* Styles for portrait images */ /*apply this class to any portrait photo in a grid to crop it to landscape: class="grid-item portrait-image" */
  .portrait-image {
    object-position: center middle; /* Adjust this property to control the cropping of portrait images */
  }
</style>

e.g.

You can paste the accompanying CSS here straight into your css file of your website, that way you just have to use the image container class when placing the images. This means to just use the html at the start of this code.

Text (alignment, font size, etc)¶

Create a callout box:¶

In Markdown, you can create a callout box or highlight within a text paragraph using different techniques, depending on the features supported by the Markdown processor or the specific flavor of Markdown you are using. Here are a few common methods to create callout boxes or highlights:

1. Using Blockquotes:¶

You can use blockquotes (>) to create callout boxes. Most Markdown processors support blockquotes, and they are a standard feature in Markdown. Here’s an example:

> This is a callout box or highlight.
> It can span multiple lines.

This is a callout box or highlight. It can span multiple lines.

This makes something more similar to a quote box/bubble instead of specifically a callout box

2. Using Markdown Extensions:¶

Some Markdown processors support extensions that provide additional features, including callout boxes. For example, the “Admonition” extension adds support for custom callout boxes:

!!! info
    This is an info callout box.

Info

This is an info callout box.

👍 Success

Vitae reprehenderit at aliquid error voluptates eum dignissimos.

custom title for callout box¶

Phasellus posuere in sem ut cursus

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.

Admonition, collapsible¶

??? 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.

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.

Admonition, collapsible and initially expanded¶

???+ 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.

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.

Use these commands to change the colour of each of the callout boxes as well as their icons¶

note

abstract

info

tip

success

question

warning

failure

danger

bug

example

quote

Note that the availability of certain features depends on the Markdown processor you are using and whether it supports specific extensions or custom HTML/CSS. Always refer to the documentation of the Markdown processor or the platform where you are rendering the Markdown for specific features and syntax supported.

Round the corners of a callout box¶

To round the edges of a callout box or any other HTML element, you can use the border-radius CSS property. This property defines the radius of the element’s corners. Here’s how you can modify the previous examples to create a callout box with rounded edges:

Using HTML `<div>` Elements:¶

<div style="background-color: #FFFFE0; padding: 10px; border: 1px solid #E6DB55; border-radius: 10px;">
This is a custom callout box or highlight with rounded edges using HTML and CSS.
</div>

This is a custom callout box or highlight with rounded edges using HTML and CSS.

In this example, the border-radius property is set to 10px, which rounds the corners of the callout box.

Using Inline HTML with Styling:¶

<span style="background-color: #FFFFE0; padding: 10px; border: 1px solid #E6DB55; border-radius: 10px;">
This is an inline callout box or highlight with rounded edges.
</span>

This is an inline callout box or highlight with rounded edges.

Again, the border-radius property is set to 10px in this example to round the corners of the inline callout box.

You can adjust the value of border-radius to control how much rounding you want for the corners. A higher value will result in more rounded corners, while a lower value will result in less rounding. Feel free to experiment with different values until you achieve the desired appearance for your callout box.

Centre align text:¶

In Markdown, you can’t directly apply text alignment using Markdown syntax alone because Markdown is intentionally kept simple and doesn’t provide extensive text formatting options. However, you can achieve text alignment by using HTML and inline CSS styles. Here’s how you can center-align text in Markdown using HTML:

<div style="text-align: center;">
This text is center-aligned using HTML and inline CSS.
</div>

This text is center-aligned using HTML and inline CSS.

In this example, the <div> element is styled with text-align: center;, which center-aligns the text inside the <div> element. When you use this code within your Markdown document, it will create a centered text block.

Remember that this approach involves using HTML, so depending on your Markdown renderer or platform, you might need to ensure that HTML rendering is enabled.

Always check the documentation or guidelines of the platform you’re using to make sure using HTML in Markdown files is allowed and supported.

Don’t worry, in MKdocs you can use HTML and CSS without any trouble.

Centre align text within a callout box:¶

You can center the text inside a callout box using the HTML code I provided. Here’s how you can create a centered text inside a callout box:

<div style="text-align: center; border: 2px solid #ccc; padding: 10px; border-radius: 10px;">
This text is center-aligned inside a callout box using HTML and inline CSS.
</div>

This text is center-aligned inside a callout box using HTML and inline CSS.

In this example, I’ve added additional CSS properties to the <div> element:

border: Adds a border around the callout box.
padding: Adds space inside the callout box, so the text doesn’t touch the border.
border-radius: Rounds the corners of the callout box, creating a rounded appearance.

Adjust the values of border, padding, and border-radius to customize the appearance of your callout box further. This HTML code, when used within your Markdown document, will create a centered text inside a styled callout box. Remember to ensure that your platform supports and allows the use of HTML and inline CSS styles.

Embedding¶

To embed your Miro board/map/video etc directly into your MkDocs documentation so that visitors can view the board without leaving your site, you can use an <iframe> HTML tag. Here’s how you can do it:

<iframe width="100%" height="600" src="<https://www.miro.com/app/board/board_id/>" frameborder="0" allowfullscreen></iframe>

Replace https://www.miro.com/app/board/board_id/ with the actual URL of what you want.

In this example, the <iframe> tag is set to take up 100% of the width of its container and has a fixed height of 600 pixels. You can adjust the width and height attributes to fit your layout preferences.

Simply paste this code into your Markdown file where you want the embedded Miro board to appear. When users view your MkDocs documentation, they will see the embedded Miro board directly on the page.

Centre embedded content¶

To center an embedded video in your Markdown file for your MKDocs website using the Material for MkDocs theme, you can use HTML to style the video container. Here’s how you can embed and center a video using HTML and Markdown:

Centering the Video: To center the video (or any other embeded content), you can wrap the <iframe> inside a <div> element and apply CSS styles to center the <div>. You can achieve this with the following HTML code:
```
<div style="text-align:center;">
    <iframe width="560" height="315" src="<https://www.youtube.com/embed/VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
</div>
```
In this code, the <div> element is styled with text-align: center;, which horizontally centers its contents.

Markdown Integration: If you want to include this in your Markdown file, simply paste the HTML code into your Markdown file. MKDocs allows you to use HTML within Markdown files.

Some Markdown content...

<div style="text-align:center;">
    <iframe width="560" height="315" src="<https://www.youtube.com/embed/VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
</div>

More Markdown content...

Remember to replace VIDEO_ID with the actual ID of your YouTube video. This approach will center the embedded video on your MKDocs website.

Rounding the corners of an embed

To round the corners of an embedded link include the following adjustment at the end of the embed link:

allowfullscreen style="border-radius: 10px;"

the full embed code will then look like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/jfKfPfyJRdk?si=0PktLmlkr21qPSie" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="border-radius 10px;"></iframe>

Which when done right, should then look like this:

Replace the link with whatever it is that you are embedding and it should be just fine! :D

Hyperlinking¶

To turn a sentence into a hyperlink in Markdown, you can use the following syntax:

[Your Sentence Here](URL)

Replace Your Sentence Here with the text you want to display as the hyperlink, and URL with the actual web address (URL) you want the sentence to link to. For example:

[Visit Youtube's Website](https://www.youtube.com)

Visit Youtube’s Website

In this example, the sentence “Visit youtube’s Website” will appear as a hyperlink, and clicking on it will take you to youtube.

Remember to replace https://www.youtube.com with the actual URL you want to link to.

Colours¶

Errors¶

-->

How do I dropdown?

This is how you dropdown.

Heading

+ markdown list 1 + nested list 1 + nested list 2 + markdown list 2

Click to expand

Your detailed content goes here. You can include **Markdown** *formatted* content within the collapsible section.

Click to expand

Your detailed content goes here. You can include **Markdown** *formatted* content within the collapsible section.

▶ Click to expand

Your detailed content goes here. You can include **Markdown** *formatted* content within the collapsible section.

Comments¶

If you’ve found this guide useful in any way, or think there is anything else I should add, please leave a comment down below! 👇

Markdown Tech Support¶

Images (sizing, alignment, etc)¶

Place an Image with rounded corners¶

multiple images in a grid¶

Text (alignment, font size, etc)¶

Create a callout box:¶

1. Using Blockquotes:¶

2. Using Markdown Extensions:¶

custom title for callout box¶

Admonition, collapsible¶

Admonition, collapsible and initially expanded¶

Use these commands to change the colour of each of the callout boxes as well as their icons¶

Round the corners of a callout box¶

Using HTML <div> Elements:¶

Using Inline HTML with Styling:¶

Centre align text:¶

Centre align text within a callout box:¶

Embedding¶

Centre embedded content¶

Hyperlinking¶

Colours¶

Errors¶

Comments¶

Using HTML `<div>` Elements:¶