Skip to content

Site Tech

Markdown Cheatsheet

Me

This site uses MkDocs, which is a superset of markdown. This section will serve as reminder on markdown syntax. As I get information from Emily on other tech -- tasks that are more involved -- that tech will be given its own dedicated page.

For full documentation on MkDocs markdown, visit mkdocs.org.
Here's the link for the material theme.

Install Commands

  • mkdocs new [dir-name] - Create a new project.
  • mkdocs serve - Start the live-reloading docs server.
  • mkdocs build - Build the documentation site.
  • mkdocs -h - Print help message and exit.

Project layout

mkdocs.yml    # The configuration file.
docs/
    index.md  # The documentation homepage.
    ...       # Other markdown pages, images and other files.

Inline images

Emily-Assisted
For externally-stored images (most will be stored on GitHub, for my pages)::

![Me](https://art.tightbytes.com/assets/images/blog25/06-16Office.jpg){: align=left width=300 }

and for those stored with the data files::

![Celeste](images/C01-Aa.jpg){: align=left width=300 }

Not sure about this approach:

<figure>
  <img src="https://dummyimage.com/600x400/eee/aaa" width="300" />
  <figcaption>Image caption</figcaption>
</figure>
These pages more commonly have a html link:

<a href="/assets/images/blog25/06-16Office.jpg" target="_blank" rel="noopener">
<img src="/assets/images/blog25/06-16Office.jpg" alt="Me" width="300"align="right"></a>

...as it allows for a clickable image to open a larger version in a new tab. The HTML <img> approach really does offer a lot more flexibility when you're aiming for beautiful layouts or precise formatting in MkDocs with the Material theme. And best of all, it plays nicely with all your existing assets/images/... structure.

If you need to:

  • Center the image → style="display: block; margin: 0 auto;"
  • Make it responsive → style="max-width: 100%; height: auto;"
  • Add a light border or shadow → style="box-shadow: 0 0 5px rgba(0,0,0,0.2);"

Embedded YouTube Video

This code is no longer being used:

<video width="384" height="384" controls>
  <source src="https://tightbytes.com/videos/Celeste/C01Aaa.mp4" type="video/mp4">
</video>

Instead, videos are being hosted on Cloudflare. 

<div style="position:relative;padding-top:100%">
    <iframe src="https://customer-ze4n45l8rqsb9yse.cloudflarestream.com/420e07a7d02c25184d2faf7e6ff0b53c/iframe"
    allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
    style="border:none;position:absolute;inset:0;width:100%;height:100%"></iframe>
</div>

Simply change the number after '.com/' -- 420e07a7d02c25184d2faf7e6ff0b53c -- and before '/iframe'. Quick-n-dirty way to make it not huge:

<style>
  .flex-container {display: flex; gap: 20px; align-items: flex-start;}
  .column {flex: 1 1 0; min-width: 0;}
  .column--right {border-left: 1px solid var(--md-default-fg-color--lightest); padding-left: 20px; }
</style>

<!-- NOTE! DO NOT INDENT! MARKDOWN WILL FAIL!! /-->

<div class="flex-container" markdown>
<div class="column">

<div style="position:relative;padding-top:100%">
    <iframe src="https://customer-ze4n45l8rqsb9yse.cloudflarestream.com/6c50151790d66b09f2d94d7c3096ec7d/iframe"
    allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
    style="border:none;position:absolute;inset:0;width:100%;height:100%"></iframe>
</div>

</div>

<div class="column column--right" markdown>
</div>

</div>

.

Embedded Audio

This code:

        <audio controls="controls">
          <source src="http://tightbytes.com/music/Sketches/Sketch15.mp3" type="audio/wav">
          Your browser does not support the <code>audio</code> element. 
        </audio>

...produced:

Embedded Video

This code:

<iframe width="560" height="315"    src="https://tightbytes.com/art/images/Cui/24/1750s/s02/LeRegarde01.mp4" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen>
</iframe>

...produces, from my site:

(Note to self: took out [ autoplay; ] )

For Cloudflare, simply change out the number string after ".com/" and before "/iframe", in this instance, this number: 'f16255e78c021b7a0e5fae66ae554133'. So, this code:

<div style="position:relative;padding-top:56.25%">
  <iframe src="https://customer-ze4n45l8rqsb9yse.cloudflarestream.com/f16255e78c021b7a0e5fae66ae554133/iframe"
          allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture"
          allowfullscreen
          style="border:none;position:absolute;inset:0;width:100%;height:100%"></iframe>
</div>

... produces, from Cloudflare:

Emily suggests:

or

... and even ...

... 05.Nov.2025
Added this - thanks, Emily.

Creating Dotpoints

Once you've decided:

  • Select A.
  • Select B.
  • To identify C.
  • Finally, click on D.

Note: setting things to italics like this makes more impact - these have yielded reasonable results. You will almost certainly find better settings, which is the whole point of sharing this.

Here's a typical example of embedding a link: Blender-for-Mac users, please refer to the Mac user help page.

Horizontal Separator Lines

The code is this (minus the '*')::

<hr style="height:4px;border-width:0;color:pink;background-color:pink">

...which produces the following grey horizonal bar to help separate sctions (like the one below).

HTML and CSS

Grid for two simple layouts:

Slide Show:

CSS stuff

AstroDocs

Do Not Show On Page