Graphical elements
Contents
Graphical elements¶
Here’s an overview of extra graphical and structural elements which can be generated through Myst Markdown to use in Jupyterbooks. Three apostrophes (```) is used for starting and ending Myst Markdown content. When building structures inside structures, you need to increase the number of apostrophes. For example, if you want a code inside a box inside a tab, the tab has to be initialized with five apostrophes, the box with three apostrophes and the code with three apostrophes.
Boxes¶
Learning goals
Used for learning goals.
Excercises
Used for excercises.
Remember
Used for highlighting important stuff.
Warning
Generally not used.
Error
Generally not used.
This was created by the following code in Markdown:
```{admonition} Learning goals
:class: note
Used for learning goals.
```
```{admonition} Excercises
:class: hint
Used for excercises.
```
```{admonition} Remember
:class: caution
Used for highlighting important stuff.
```
```{admonition} Warning
:class: danger
Generally not used.
```
```{admonition} Error
:class: error
Generally not used.
```
Panels¶
Panels are not generally used, but is a possible way of structuring content if it is seen as useful.
Content of the left panel.
Panel header 2
Panel body 2
Panels can be made with the following code. In the first panel we also have a random badge generated through shields.io.
The panels are separated with —
The first header is marked with ^^^
The second header is maked with +++
````{panels}
Content of the left panel.
[]
---
Panel header 2
^^^
Panel body 2
+++
Panel footer 2
```
````
We can also specify the number of colomns and the format of the borders:
Header A
Body A
Header B
Body B
Header C
Body C
Which is generated with the following code:
````{panels}
:column: col-4
:card: border-2
Header A
^^^
Body A
---
Header B
^^^
Body B
---
Header C
^^^
Body C
````
Dropdowns¶
Hint!
This is mainly used for extra information and hints.
Dropdown menus are created by adding the class dropdown to an admonition (box):
```{admonition} Hint!
:class: tip, dropdown
This is mainly used for extra information and hints.
```
Code is included in dropdowns like this:
````{admonition} Solution
:class: tip, dropdown
```{code-block} python
for i in range(10):
print("You are cool!")
```
You can do it like this or you can choose not to.
````
Solution
for i in range(10):
print("You are cool!")
You can do it like this or you can choose not to.
Tabs¶
We can create tabs with text and/or coding blocks to separate content, like disciplinary specific such as physics examples, chemistry examples, life science examples and so on.
Here’s how it’s done in C++
int main(const int argc, const char **argv) {
return 0;
}
Here’s how it’s done in Python
def main():
return
Here’s how it’s done in Java
class Main {
public static void main(String[] args) {
}
}
Here’s how it’s done in Julia
function main()
end
Here’s how it’s done in Fortran
PROGRAM main
END PROGRAM main
These tabs are generated with the following code:
````{tabbed} C++
Here's how it's done in C++
```{code-block} c++
int main(const int argc, const char **argv) {
return 0;
}
```
````
````{tabbed} Python
Here's how it's done in Python
```{code-block} python
def main():
return
```
````
````{tabbed} Java
Here's how it's done in Java
```{code-block} java
class Main {
public static void main(String[] args) {
}
}
```
````
````{tabbed} Julia
Here's how it's done in Julia
```{code-block} julia
function main()
end
```
````
````{tabbed} Fortran
Here's how it's done in Fortran
```{code-block} fortran
PROGRAM main
END PROGRAM main
```
````
Figures¶
You can insert figures like this:
```{figure} ./path/to/figure.jpg
:name: label
caption
```
Quotes¶
One can also make nicely formatted quotes:
Everybody should learn how to think, because it teaches you how to program.
—Andreas Haraldsrud, 2021
Jeg vil også ha et sitat.
—Cathrine Tellefsen, 2021
which is made with the following code:
```{epigraph}
Everybody should learn how to think, because it teaches you how to program.
-- Andreas Haraldsrud, 2021
```
```{epigraph}
Jeg vil også ha et sitat.
-- Cathrine Tellefsen, 2021
```
Pseudocodes¶
For pseudocodes use the code box with language text:
```{code-block} text
number = 0
repeat 10 times:
number = number + 3
show number on screen
```
number = 0
repeat 10 times:
number = number + 3
show number on screen