Learn Myst Markdown

This is a list of the minimum specifications required to create useful documention.

Carriage return / Line Break
Horizontal Rule
Multiple size headers
Codeblocks (copy code button)
Comments
Embedded Images
Admonition
Note
Embedded Video (Onedrive)
Links [Section, Page, External]
Escape Special Characters
Theme Variations (dark)
Classes

Carriage Return / Line Break

In Myst, line breaks can be accomplished by adding two spaces at the end or backslash.

'  '
\

This is a line break
as we typically get in code using ‘\n’.
But here instead we end the line with two spaces.
Or we can use
a backslash.

Horizontal Rule - Line across page

Consists of three dashes. Sphinx calls these ‘transitions’.

---

White Space

Create two blank spaces (for indentation).

&nbsp;&nbsp;

Code Blocks

Code Block are created by indenting four spaces.

Indent (four spaces gives us an code block.
A space above to separate the block from any preceding text may be required.

Code Block can also be written using ``` three back ticks.

  ```python  
         print("This is a code block")  
         Code block content here
  ```# closing back tick

Comments

Comments use the ‘%’ to precede the comment.

% This is a comment on a single line.

This is also a single line comment

[//]: # (This is a comment.)

Note

Spaces must be included around ‘: # (’

We can achieve multiline comments also.

[//]: # (This is a
multiline comment.
It can span multiple lines.
Even if I just keep typing.
embedded in paranthesis.
)

Stack Overflow Markdown multiline discussion

<!— your comment
goes here and
here. —>

screen shot of multiline comments html

Note there are three dashes.

Bullet Points

Can be dashes, ‘-’, or ‘*’.
Double asterisks leads to an empty circle bullet.
‘* *’

- Double Bullet Example.

Embedded Images

Embedded images use:

![alt](src "title")
![A cute cat](https://example.com/cat.jpg "A cute cat")

cartoon fish

To embed images from a local directory:

![screen shot of multiline comments html](images/myst-markdown-comments.png)

Note

Local Images:

“./Images/path”
Be sure to reference the directory relatively with no absolute path.

HTML elements go in ‘_build’ folder, not Markdown ‘docs’.
They require different path syntax.

Using the HTML tag ‘img’ we can align and ajust the size of an image.

<img src="image_file_path" alt="alternate_text">
<img src="./_static/fun-fish.png" alt="cartoon fish" align="left" width="100">
XHTML tags should be closed, HTML5 do not.

cartoon fish

Without using ‘div’ statements, we have a problem.

<div style="display:block; text-align:center;">
<img src="./_static/fun-fish.png" alt="cartoon fish" align="center" width="100">
</div>

Alternately we use margin:auto to center:

<div style="display:block; text-align:center;">
<img src="./_static/fun-fish.png" alt="cartoon fish" width="100" style="margin:auto;">
</div>

Image right align:

<div style="text-align: right;">
<img src="./_static/fun-fish.png" alt="alt text" style="float: right; margin-left: 10px; display: block; clear: right;">
<img src="./_static/fun-fish.png" alt="alt text" style="float: right; margin-left: 10px; display: block; clear: right;">
</div>

<div style="text-align:right;">
  <img src="./_static/fun-fish.png" alt="alt text" width="150" style="display:block;">
</div>

We can flop an image using:

<div style="display:block; text-align:center; transform: scaleX(-1);">
<img src="./_static/fun-fish.png" alt="cartoon fish" align="right" width="150">
</div>   

Admonition!

Here is how to add Admonition.

```{admonition} Here's my title
:class: warning

Here's my admonition content
```  

Here’s my title

Here’s my admonition content

Admonition vis Code Fence (Myst)

::::{important}
:::{note}
This text is **standard** _Markdown_
:::
:::: 

::::{important} :::{note} This text is standard Markdown ::: ::::

Notes done with Code Fences can be bolded.
We can also use ‘div’ statements to alter the background.

<div class="admonition note" name="html-admonition" style="background: lightgreen; padding: 10px">
<p class="title">This is the **title**</p>
This is the *content*
</div>

This is the **title**

This is the *content*

Note!

Here is how to add a Note.

```{note} Here's my title
:class: warning

Here's my note content
```    

Note

Here’s my title

Here’s note content

Tabs

To install Sphinx.

#### Grids
Grids!

    ::::{grid} 1 2 3 4
    :outline:
    
    :::{grid-item}
    A
    :::
    :::{grid-item}
    B
    :::
    :::{grid-item}
    C
    :::
    :::{grid-item}
    D
    :::
    ::::
          

::::{grid} 1 2 3 4
:outline:

:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::

---
#### Cards

    :::{card} Card Title

    Card content
    :::

:::{card} Card Title

Card content
:::

---

    :::{card} Card Title
    Header
    ^^^
    Card content
    +++
    Footer
    :::                

:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::

---

**Cards - Styling**

```{note} 
:class: warning

Specificity of ID Selectors: ID selectors have very high specificity and override **class** and type selectors.

Note

Sphinx‑Design’s card groups automatically align card heights:

::: {card-group}
::: {card}
Card 1 HTML…
:::

::: {card}
Card 2 HTML…
:::
:::

Card Group background can be styled:

::: {card-group} :class-card-group: my-card-group
:::{card}

Content of card 1
:::
:::{card}

Content of card 2
:::
:::

.my-card-group {
  background-color: #f0f8ff; /* Light blue background */
  padding: 10px;
  border-radius: 8px;
}

Cards in a Grid

::::{grid} 2
:::{grid-item-card}  Title 1
A
:::
:::{grid-item-card}  Title 2
B
:::
::::

::::{grid} 2 :::{grid-item-card} Title 1

::: :::{grid-item-card} Title 2 ::: ::::

Embed Video

36:52

06:43 / 39:36

36:52

06:43 / 39:36

---

Here we remove the height tag.

Parameter: 'Webshare'
:::{card} Skycaptain vs. Emulsion

<iframe width="280" height="145" src="https://www.youtube.com/embed/t9xd0hBC_v8?start=14" title="YouTube video player" frameborder="2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
:::

:::{card} Skycaptain vs. Emulsion

:::

Embed with modest branding set to true.

<iframe width="200" height="113" src="https://www.youtube.com/embed/lFtEMg86lJc?start=74&modestbranding=1&rel=0" title="Simready video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

ChatGPT suggested embed code for yt at a particular time:

[![Video thumbnail](https://img.youtube.com/vi/t9xd0hBC_v8/0.jpg)](https://youtu.be/t9xd0hBC_v8?t=64 "Click to watch the video at 1:04")

Time	Video Link
1:04	https://youtu.be/t9xd0hBC_v8?t=64

Time	Video Link
1:04	Watch video

Time	Video Link
1:04	https://youtu.be/t9xd0hBC_v8?t=64

Horizontal Rule post video embed

Be sure to add a Horizontal Rule after the ‘/div’ for a video embed.

Note

From Onedrive, the video can be doubled in size and over written by the height and width parameters.

Embed Giphy

via GIPHY

Links

External Url.

[alt-text](url address)
[myst-parser](https://myst-parser.readthedocs.io/en/v0.17.1/syntax/optional.html#syntax-header-anchors)

We have installed myst-parser via documentation directions myst-parser

Link to Another Section in the Same Page.

This allows us to use:

[some header](header-label)

[link will take us to the Note Header](Table)

Clicking on the link will take us to the Table Header

Another page that is .rst instead of Markdown.

[credit.rst](credit.rst)

Link to Another Section of Another page.

These are called explicit targets.

(My_target)=
## Explicit targets

Reference [](My_target). 

Add ‘(My_Target)=’
to the header on the target page.

[ ](My_target)

Explicit References documentation

Table

:::{note} This text is standard Markdown :::

:::{table} This is a **standard** _Markdown_ title
:align: center
:widths: grid

abc | mnp | xyz
--- | --- | ---
123 | 456 | 789
:::

:::{table} This is a standard Markdown title :align: center :widths: grid

abc	mnp	xyz
123	456	789
:::

Task Lists

- [ ] An item that needs doing
- [x] An item that is complete

[ ] An item that needs doing
[x] An item that is complete

Html Tags

BOLD

To create bold text in HTML, you can use the or tags.

<p>This is <strong>bold text</strong>.</p>

Classes

Multiple Size Headings

These are examples of different size headings.

h1: #, h2: ##, h3: ###, h4: ####, h5: #####, h6: ######

::::{important}

In MyST/Sphinx Navigation Panel:

Headings that appear in the navigation panel must be part of the document section hierarchy.

If you place a heading after another section of the same or higher level without proper hierarchy, Sphinx may treat it as “out of section” and it won’t get a ToC entry.

::::

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 2