description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
[Mermaid](https://github.com/mermaid-js/mermaid) is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.
To include a Mermaid diagram in your post, there are two steps:
1. Set `mermaid = true` in the `[extra]` section of the front matter of your page, section or `config.toml`. This will load the JavaScript needed to render the diagrams.
2. Use the `mermaid()` shortcode to define your diagram in your posts. For example:
```plaintext
{%/* mermaid() */%}
classDiagram
class CognitiveDistortions {
+AllOrNothingThinking()
+Overgeneralization()
+MentalFilter()
+JumpingToConclusions()
}
class AllOrNothingThinking {
+SeeInExtremes()
}
class Overgeneralization {
+GeneralizeFromSingle()
}
class MentalFilter {
+FocusOnNegative()
}
class JumpingToConclusions {
+MakeAssumptions()
}
CognitiveDistortions *-- AllOrNothingThinking
CognitiveDistortions *-- Overgeneralization
CognitiveDistortions *-- MentalFilter
CognitiveDistortions *-- JumpingToConclusions
{%/* end */%}
```
The diagram will be rendered as follows:
{% mermaid() %}
classDiagram
class CognitiveDistortions {
+AllOrNothingThinking()
+Overgeneralization()
+MentalFilter()
+JumpingToConclusions()
}
class AllOrNothingThinking {
+SeeInExtremes()
}
class Overgeneralization {
+GeneralizeFromSingle()
}
class MentalFilter {
+FocusOnNegative()
}
class JumpingToConclusions {
+MakeAssumptions()
}
CognitiveDistortions *-- AllOrNothingThinking
CognitiveDistortions *-- Overgeneralization
CognitiveDistortions *-- MentalFilter
CognitiveDistortions *-- JumpingToConclusions
{% end %}
The Mermaid shortcode supports two parameters:
-`invertible`: If set to `true` (default), the diagram will be inverted in dark mode, just like [invertible images](#invertible-image).
-`full_width`: Allows the diagram to take up the width of the header. See [full-width image](#full-width-image).
{{ admonition(type="tip", text="You can use the [Mermaid Live Editor](https://mermaid.live/) to create and preview your diagrams.") }}
Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active.
{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}
{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}}
Display a path or URL on the next code block found. If it starts with "http", it will become a link. Particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
{{ admonition(type="warning", title="IMPORTANT", text="This feature requires JavaScript. To enable it, set `add_src_to_code_block = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
Embed text from a remote URL or a local file. To display the path or URL on the code block, see the [show source or path shortcode](#show-source-or-path).
- **Remote VS local files**: If `src` starts with "http", it will be treated as a remote file. Otherwise, it assumes a local file path.
- **Files access**: As it uses Zola's [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data), local files must be inside the Zola directory—see [File searching logic](https://www.getzola.org/documentation/templates/overview/#file-searching-logic).
- **Code block formatting**: To display the text as a code block, you must manually add the Markdown code fences (backticks) and, optionally, specify the programming language for syntax highlighting.
#### Usage
Embedding a remote Python script within a code block with syntax highlighting:
You can change the `title` and `icon` of the admonition. Both parameters take a string and default to the type of admonition. `icon` can be any of the available admonition types.
{{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
#### Usage
```
{{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}}
This shortcode formats a reference section with a hanging indent like so:
{% references() %}
Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. *Scranton Agricultural Quarterly, 38*(3), 67-81.
Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. *New York Journal of Business, 12*(4), 112-125.
Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College's Model United Nations. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few {{ spoiler(text="months. Yes, [really](https://en.wikipedia.org/wiki/Goldfish#Cognitive_abilities).") }}
As you can see, Markdown is rendered. You can even add newlines with `<br>`.
This shortcode has the optional flag `fixed_blur` to blur a fixed placeholder ("SPOILER"), instead of blurring the actual contents. Like this: it is {{ spoiler(text="not necessary", fixed_blur=true)}} to wait 24 hours before filing a missing person report.
#### Usage
```
{{/* spoiler(text="text to hide", fixed_blur=false) */}}
Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll.
{% wide_container() %}
| Title | Year | Director | Cinematographer | Genre | IMDb | Duration |
