MySt and Markdown for Sphinx Cheatsheet#
I’ve never been a fan of Re-StructuredText, but most importantly I’m new to MySt, which leads to a lot of googling and painstaking trial-and-error while writing. Although my preferred references are the Jupyter Book MyST Cheatsheet, the Sphinx Book Theme Documentation, and the MyST Parser Reference, they are way too extensive, sometimes incorrect, and I don’t really use every directive or variant thereof. Therefore, I’ll use this post to gather the bits of the syntax and snippets I use the most.
Stay in touch by entering your email below and receive updates whenever I post something new:
As always, thank you for reading and remember that feedback is welcome and appreciated; you may contact me via email or social media. Let me know if there's anything else you'd like to know, something you'd like to have corrected, translated, added or clarified further.
Addendum#
Once you’re done reading this article, you can continue by having a look at the related content and the discussions I’ve linked below.
Basics#
Your Extension and Parser#
Please double check which parser and extension you are using, the behaviors described here will differ depending on whether you’re using myst_nb
, myst_parser
, etc.
Markdown Notation#
Source |
Result |
---|---|
|
example |
|
example |
|
example |
|
|
- Dwell on the beauty of life. Watch the stars, and see yourself running with them.
Marcus Aurelius
Emojis#
Emoji |
Text |
---|---|
👍 |
thumbs-up |
📌📍 |
pin |
👨🔧 |
tradesperson |
💡 |
idea, lightbulb |
📚 |
books |
📣 |
megaphone |
📢 |
megaphone |
🌎 |
world |
🧭 |
compass |
🧰🔧 |
tool, wrench |
🔨 |
hammer |
💻 |
computer, pc, laptop |
🚀 |
rocket |
🦊 |
fox |
🔔 |
bell |
⭐ |
star |
👉👈👇👆 |
point |
👋 |
wave |
Font Awesome#
Source |
Result |
---|---|
|
Links and References#
The doc
Role#
The doc
role must be used as follows[1] {doc}`/about`
or {doc}`about`
, which yield: About ℹ️. Note that I haven’t used the .md
extension at the end.
Furthermore, the {doc}
role does not support referencing sections by using anchor tags; for this you should use the Markdown notation or references and labels (wether manual or automatically generated).
⚠️ The Jupyter Book documentation for references contains a mistake in this regard as seen in the page’s source. Remember, {doc}`/about.md`
will not work ❌.
Source |
Result |
---|---|
|
|
|
✅ Use absolute addressing with /
and without the extension of the content file, always.
Markdown Links#
With the Markdown syntax, it’s OK under certain circumstances to leave the .md
extension out while referencing documents MySt and Markdown for Sphinx Cheatsheet ([](./sphinx-myst-markdown)
). However, just use it to avoid the hassle of wondering whether your links are not working due to incorrect syntax, a bug, non-existent documents, etc.
⚠️ Referencing sections within content files requires the .md
extension regardless of whether the absolute or relative syntax is used.
✅ Use absolute addressing with /
and the extension of the content file, whenever possible.
Source |
Result |
---|---|
|
|
|
|
|
Here is my absolute link |
|
Here is the relative link |
The slash notation (/
) for the root of the site is somewhat problematic, it works most of the time, but it doesn’t when anchor tags are present:
Source |
Result |
---|---|
|
|
|
|
|
|
|
❌ |
|
❌ |
The ref
Role and Section Labels#
(ref-role-and-section-labels)=
MyST supports manual labels, as documented here.
Source |
Result |
---|---|
|
|
|
|
|
Auto-generated Header Anchors#
Adding section labels manually as shown above gets tedious quite quickly, therefore, use sphinx.ext.autosectionlabel
[2] and explore the list of available labels after it’s been enabled as shown in Load Sphinx environment.pickle and List all Labels.
Also, myst_parser
already has support for implicit anchors [3]. Remember, however, to properly set myst_heading_anchors
to your liking.
Source |
Result |
---|---|
|
|
|
|
|
|
|
|
|
Referencing Content in extra/
#
Content in extra
must be referenced as follows: [content](../extra/robots.txt)
. It yields a {download}
link as this
Images and Figures#
Figures with Links#
```{figure} sphinx-myst-markdown.md-data/ubuntu.png
---
name: ubuntu
scale: 25%
---
[link](https://jdsalaro.com)
```
Scaled and Aligned Figure#
There seems to be a bug whereby alignment of the content isn’t reset after the paragraph following a figure or the heading coming immediately after. That can be fixed with </br>
as +++
and ---
don’t help.
HTML Image#
Image#
Referencing Figures and Images#
Source |
Result |
---|---|
|
|
|
link example |
|
Structure#
If needed, +++
can be used to break the paragraph.
Code#
Syntax Highlighting [4]#
```bash
$ echo 'Hello World!'
Hello World!
```
1$ echo 'Hello World!'
2Hello World!
```python
print('Hello World!')
```
1print('Hello World!')
Code-Cells and Output [5] [6]#
from datetime import datetime
text = f"Last executed on {datetime.now()}"
print(text)
Last executed on 2024-10-16 14:55:56.513588
Images and MyST-NB Metadata#
```{code-cell} ipython3
---
mystnb:
image:
width: 200px
alt: fun-fish
classes: shadow bg-primary
figure:
caption: |
Hey everyone its **party** time!
name: fun-fish
---
from IPython.display import Image
Image("sphinx-myst-markdown.md-data/ubuntu.png")
```
from IPython.display import Image
Image("sphinx-myst-markdown.md-data/ubuntu.png")
Math [7]#
Hello 👋, \(z=\sqrt{x^2+y^2}\) is an equation equivalent to $z=\sqrt{x^2+y^2}$
!
$$
z=\sqrt{x^3+y^3}
$$
```{math}
z=\sqrt{x^4+y^4}
```
It’s also possible to use AMSMath syntax as follows:
\(\vec{\mathbf{a}}_{net}\) is 0, then \(\vec{\mathbf{F}}_{net} = \vec{0}\)
Admonitions#
example
example
Warning
example example
Tip
example example
Note
example example
Error
example example
Note
referenceable note
Here is my reference to the note defined above.
Custom#
Hacky Image with Annotations#
While experimenting for 🎭 Best Fonts for Programming, I was looking for ways to easily annotate images and this occurred to me. It’s quite hacky, and I never did use it, but I might in the future and the idea seems solid (having numeric indicators and marginal comments).
```{div} custom-annotated-image
:::{figure} sphinx-myst-markdown.md-data/anonymous-pro.png
---
name: best-programming-fonts-anonymous-pro.png
align: left
---
This is my caption.
:::
`01`
:::{margin}
Hello
:::
`02`
`03`
`04`
`05`
`06`
`07`
`08`
`09`
`10`
`11`
`12`
:::{margin}
World!
:::
`13`
`14`
```
01
02
03
04
05
06
07
08
09
10
11
12
13
14
ABlog [8]#
Warning
Note the quotes ("
) around the :format:
and :date:
arguments; they are necessary. Otherwise, ABlog will come into an error condition such as ERROR: Directive 'postlist': Invalid options YAML: while parsing a block mapping
for :format:
and ERROR: Directive 'postlist': Invalid options YAML: while scanning for the next token found character '%' that cannot start any token
for :date:
.
```{postlist} 1
:category: cheatsheets
:list-style: circle
:excerpts:
:sort:
:expand: Read more ...
:format: "{title} by {author} on {date}"
:date: "%A, %B %d, %Y"
:tags: git
:language: English
```
Result 👇
Git Revision Selection and Expressions A…B by Jayson Salazar Rodriguez on Saturday, July 15, 2023
While using git it’s common to use object identifiers to operate on the underlying objects: checking branches out, reverting a commit, resetting to a given point in the history, and more.
ReST#
I don’t personally like nor use ReST much, I feel it is way too verbose and convoluted with all those dots and colons. However, it’s useful to have a couple of syntax overviews handy. I mainly use the Tuto site on ReST and Sphinx, as well as the LPN Sphinx Primer and the Sublime and Sphinx Guide.
Comments#