admin2/manual_teachbooks
1
0
Fork 0
mirror of https://github.com/TeachBooks/manual.git synced 2026-11-12 22:35:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

formatting fix

Browse source
This commit is contained in:
Tom van Woudenberg 2025-05-14 09:39:36 +02:00 • committed by GitHub
parent 8d569821d5
commit bcba8bd07c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 52 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

104
book/basic-features/figures.md
View file

@ -2,29 +2,29 @@
To add a figure, just copy the figure to the correct directory. Then, in your markdown file, include the figure as follows:
````
```{figure} <figurename>.png/.jpg
---
height/width: <height or width in pixels>
name: <name of the figure>
align: left / center / right
figclass: left blank or "margin"
---
<Figure caption>
```
````md
```{figure} <figurename>.png/.jpg
---
height/width: <height or width in pixels>
name: <name of the figure>
align: left / center / right
figclass: left blank or "margin"
---
<Figure caption>
```
````
For example:
````
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 70%
name: demoexample1
align: center
---
example 1: width (70%) as percentage, align center
```
````md
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 70%
name: demoexample1
align: center
---
example 1: width (70%) as percentage, align center
```
````
provides this output, which looks nice.
@ -43,15 +43,15 @@ You can find more documentation on including figures [here](https://jupyterbook.
There are many settings, for instance aligning right:
````
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 50%
name: demoexample2
align: right
---
example 2: width (50%) as percentage, align right
```
````md
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 50%
name: demoexample2
align: right
---
example 2: width (50%) as percentage, align right
```
````
with the result:
@ -67,22 +67,22 @@ example 2: width (50%) as percentage, align right
Aligning right can come with the potential downside (not always wanted) that text is wrapped around the figure. To avoid this one can use `<div>` elements, both before and after the text (make sure to leave an empty line after the `<div>`!):
````
<div style="clear: both;">
and the output
</div>
<div style="clear: both;">
````html
<div style="clear: both;">
and the output
</div>
<div style="clear: both;">
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 50%
name: demoexample3
align: right
---
example 3: width (50%) as percentage, align right with additional div style
```
```{figure} ../images/TUDelft_logo_rgb.png
---
width: 50%
name: demoexample3
align: right
---
example 3: width (50%) as percentage, align right with additional div style
```
</div>
</div>
````
<div style="clear: both;">
@ -108,16 +108,16 @@ including `figclass: margin` sets the figure to the column at the right.
</div>
````
```{figure} demo97/demo97_figure1.jpg
---
figclass: margin
width: 50%
name: demoexample2
---
example 2:including figclass: margin
```
````md
```{figure} demo97/demo97_figure1.jpg
---
figclass: margin
width: 50%
name: demoexample2
---
example 2:including figclass: margin
```
````
<br>