@@ -77,6 +77,13 @@ Use the `tikz` shortcode:
7777The diagram renders in the browser via TikZJax - no build step needed.
7878Use TikZ's own ` scale ` option to resize diagrams, e.g. ` \begin{tikzpicture}[scale=0.5] ` .
7979
80+ Optional parameters:
81+
82+ | Parameter | Example | Notes |
83+ | --------- | ------------------------- | ------------------------------------------------------------- |
84+ | ` caption ` | ` caption="Step diagram." ` | Caption shown below the diagram |
85+ | ` id ` | ` id="fig-walk" ` | Anchor id; auto-generated as ` fig-1 ` , ` fig-2 ` , ... if omitted |
86+
8087### Images
8188
8289Place images in the ` static/images ` folder, then reference them with an
@@ -88,33 +95,91 @@ absolute path:
8895
8996To control the size, use the ` img ` shortcode instead:
9097
98+ ``` markdown
99+ {{< img src="/images/my-diagram.png" caption="A random walk after 1000 steps." width="50" >}}
91100```
92- {{< img src="/images/my-diagram.png" alt="Alt text" width="50" >}}
101+
102+ | Parameter | Example | Notes |
103+ | --------- | -------------------------- | ------------------------------------------------------------- |
104+ | ` src ` | ` src="/images/x.png" ` | Path to the image (required) |
105+ | ` caption ` | ` caption="A random walk." ` | Caption shown below; also used as alt text |
106+ | ` width ` | ` width="50" ` | Max width as % of container; default 100% |
107+ | ` id ` | ` id="fig-walk" ` | Anchor id; auto-generated as ` fig-1 ` , ` fig-2 ` , ... if omitted |
108+
109+ ### Tables
110+
111+ For plain tables with no caption or cross-reference, use standard Markdown syntax:
112+
113+ ``` markdown
114+ | Column A | Column B |
115+ | -------- | -------- |
116+ | value | value |
93117```
94118
95- | Parameter | Example | Notes |
96- | --------- | --------------------- | ----------------------------------------- |
97- | ` src ` | ` src="/images/x.png" ` | Path to the image (required) |
98- | ` alt ` | ` alt="A diagram" ` | Alt text for accessibility |
99- | ` width ` | ` width="50" ` | Max width as % of container; default 100% |
119+ To add a caption or a linkable anchor, wrap the table in the ` table ` shortcode:
120+
121+ ``` markdown
122+ {{< table id="tbl-transitions" caption="The four possible transitions from $f_m(k)$." >}}
123+ | Direction | Probability |
124+ | ----------- | ----------- |
125+ | $(+1,+1)$ | $1/4$ |
126+ | $(+1,-1)$ | $1/4$ |
127+ | $(-1,+1)$ | $1/4$ |
128+ | $(-1,-1)$ | $1/4$ |
129+ {{< /table >}}
130+ ```
131+
132+ | Parameter | Example | Notes |
133+ | --------- | ----------------------------- | ------------------------------------------------------------- |
134+ | ` caption ` | ` caption="Transition table." ` | Caption shown below the table |
135+ | ` id ` | ` id="tbl-transitions" ` | Anchor id; auto-generated as ` tbl-1 ` , ` tbl-2 ` , ... if omitted |
136+
137+ ### Cross-referencing
138+
139+ Both the ` img ` and ` tikz ` shortcodes accept an optional ` id ` parameter that
140+ places an HTML ` id ` on the figure wrapper, making it a linkable anchor.
141+
142+ ``` markdown
143+ {{< img src="/images/random-walk.png" id="fig-walk" >}}
144+ {{< tikz id="fig-diagram" >}}...{{< /tikz >}}
145+ ```
146+
147+ ** Same page** plain hash link:
148+
149+ ``` markdown
150+ [ see Figure] ( #fig-walk )
151+ ```
152+
153+ ** Cross-post** use Hugo's ` relref ` shortcode:
154+
155+ ``` markdown
156+ [ see Figure] ({{< relref "other-post.md#fig-walk" >}})
157+ ```
158+
159+ Keep ids short and descriptive. Prefix with ` fig- ` by convention to avoid
160+ conflicts with heading anchors.
161+
162+ ---
100163
101164### Videos
102165
103166Place videos in ` static/videos/ ` and use the ` videos ` shortcode:
104167
105- ```
168+ ``` markdown
106169{{< video src="/videos/my-clip.mp4" >}}
107170```
108171
109172Optional parameters:
110173
111- | Parameter | Example | Notes |
112- | --------- | ------------------------ | ----------------------------------------- |
113- | ` src ` | ` src="/videos/clip.mp4" ` | Path to the video (required) |
114- | ` width ` | ` width="50" ` | Max width as % of container; default 100% |
115- | ` type ` | ` type="video/webm" ` | MIME type; defaults to ` video/mp4 ` |
174+ | Parameter | Example | Notes |
175+ | --------- | ------------------------ | ------------------------------------------------------------- |
176+ | ` src ` | ` src="/videos/clip.mp4" ` | Path to the video (required) |
177+ | ` caption ` | ` caption="Simulation." ` | Caption shown below the video |
178+ | ` width ` | ` width="50" ` | Max width as % of container; default 100% |
179+ | ` type ` | ` type="video/webm" ` | MIME type; defaults to ` video/mp4 ` |
180+ | ` id ` | ` id="fig-walk" ` | Anchor id; auto-generated as ` fig-1 ` , ` fig-2 ` , ... if omitted |
116181
117- ```
182+ ``` markdown
118183{{< video src="/videos/my-clip.webm" type="video/webm" width="50" >}}
119184```
120185
0 commit comments