(learn-myst)= ## 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). ```markdown    ``` --- #### 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. ```markdown ```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} :class: warning 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. ) [//]: # (This is a multiline comment. It can span multiple lines. Even if I just keep typing. As long as it is embedded in paranthesis. ) % comment [Stack Overflow Markdown multiline discussion](https://stackoverflow.com/questions/4823468/comments-in-markdown) \ ![screen shot of multiline comments html](images/myst-markdown-comments.png) * 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](./Images/fun-fish.webp "fun fish graphic") To embed images from a local directory: ![screen shot of multiline comments html](images/myst-markdown-comments.png) ```{note} Local Images: :class: warning "./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. alternate_text cartoon fish XHTML tags should be closed, HTML5 do not.


cartoon fish

Without using 'div' statements, we have a problem.
cartoon fish
cartoon fish
Alternately we use margin:auto to center:
cartoon fish
cartoon fish
--- Image right align:
alt text alt text
alt text alt text
cartoon fish
```
alt text
``` --- We can flop an image using:
cartoon fish
cartoon fish
--- #### Admonition! Here is how to add Admonition. ```{admonition} Here's my title :class: warning Here's my admonition content ``` ```{admonition} Here's my title :class: warning Here's my admonition content ``` [Admonition vis Code Fence (Myst)](https://myst-parser.readthedocs.io/en/v0.17.1/syntax/optional.html#syntax-header-anchors) ::::{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.

This is the **title**

This is the *content*

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 :class: warning Here's note content ``` --- #### Tabs ```{tabs} ```{tab} Conda Install To install Sphinx. ```{tab} PIP Install To install PIP. ``` ``` #### 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} :class: warning 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
Play
36:52
Play
Seek backwards
Seek forward
06:43 / 39:36
Mute
Language
Settings
Fullscreen
Play
36:52
Play
Seek backwards
Seek forward
06:43 / 39:36
Mute
Language
Settings
Fullscreen
--- --- --- --- % --- Here we remove the height tag.
--- Here we remove the height tag.
--- Parameter: 'Webshare' :::{card} Skycaptain vs. Emulsion ::: :::{card} Skycaptain vs. Emulsion ::: --- Embed with modest branding set to true. --- 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") [![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](https://youtu.be/t9xd0hBC_v8?t=64) | --- | Time | Video Link | |------|-----------| | 1:04 | [Watch video](https://youtu.be/t9xd0hBC_v8?t=64 "1:04") | --- | Time | Video Link | |------|-----------| | 1:04 | [https://youtu.be/t9xd0hBC_v8?t=64](https://youtu.be/t9xd0hBC_v8?t=64 "Time: 1:04") | --- ```{admonition} Horizontal Rule post video embed :class: warning Be sure to add a Horizontal Rule after the '/div' for a video embed. ``` ```{note} :class: warning 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](https://myst-parser.readthedocs.io/en/v0.17.1/syntax/optional.html#syntax-header-anchors) ##### 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](Table) 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](https://docs.readthedocs.io/en/stable/guides/cross-referencing-with-sphinx.html#my-target) --- #### 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.

This is bold text.

--- (a-classes)= #### Classes ![No Spaces](./Images/Spaces_No-Spaces.png) (multiple-size-headings)= #### 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 ---