add image captions

This commit is contained in:
EvilMuffinHa 2022-06-23 21:50:12 -04:00
parent 7626e95032
commit 1e8616424a
4 changed files with 41 additions and 2 deletions

View File

@ -106,7 +106,10 @@ The `image()` shortcode can be used to embed images in markdown as follows:
Position can be either `left`, `center`, or `right`. Style allows you to embed css for the image.
The `icaption()` shortcode allows you to add smaller italicized text for image decoration. Position works the same way as image and style can be used to embed css for the `div` holding the text.
`{{ icaption(position="right" text="Yahallo!") }}`
The `tikz()` shortcode can be used to embed tikzpicture code in latex. For example:
`{{ tikz(style="width: 20%; height: 20%;" position="center" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}`
Position works the same way as `image`. Style allows you to embed css for the `div` holding the tikz svg.
Position works the same way as `image`. Style can be used to embed css for the `div` holding the tikz svg.

View File

@ -80,3 +80,6 @@ Images:
Tikz:
{{ tikz(position="right" body="\begin{tikzpicture}\draw (0,0) circle (1in);\end{tikzpicture}") }}
{{ icaption(position="right" text="A circle") }}

View File

@ -260,6 +260,34 @@
margin-left: auto;
}
.post_contents .icaption-left {
display: flex;
justify-content: left;
align-items: left;
margin-right: auto;
margin-top: 10px;
font-size: 0.9rem;
}
.post_contents .icaption-center {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
font-size: 0.9rem;
}
.post_contents .icaption-right {
display: flex;
justify-content: right;
align-items: right;
margin-left: auto;
margin-top: 10px;
font-size: 0.9rem;
}
.post_contents .tikz-left {
width: 0;
display: flex;

View File

@ -0,0 +1,5 @@
{% if text %}
<div class="icaption-{% if position %}{{ position }}{% else -%}center{%- endif %}" {%- if style %} style="{{ style | safe }}"{%- endif %}>
<i>{{ text | safe }}</i>
</div>
{% endif %}