| title | Your Article Title Here | |
|---|---|---|
| date | 2026-01-01 | |
| description | A short, one- or two-sentence summary of the article. | |
| authors |
|
|
| image | ||
| categories |
|
|
| related_posts |
Write normal paragraphs. Inline formatting: bold, italic, inline code,
and a link. Links to other sites automatically open in a
new tab; links to other foojay pages stay in the same tab.
Make the link TEXT say where the link goes: "see the Hugo documentation", not "see the documentation here". A screen reader can list every link on a page on its own, out of the sentences around them, so a page of "here", "this" and "read more" is a list of destinations nobody can tell apart — and it reads better for anyone skimming, too.
- A bullet
- Another bullet
- A nested bullet
- A numbered item
- Another one
A blockquote for pull-quotes or citations.
Fence code blocks with ```. The content gets syntax-highlighted
automatically with EnlighterJS
if you add the language after the opening fence.
For example, Java code:
public class Hello {
public static void main(String[] args) {
System.out.println("Hello, foojay!");
}
}The tags used most on Foojay: java, bash, yaml, xml, kotlin, json, cpp, html, python, javascript, css, sql, groovy, dockerfile, rust, powershell, c, lua.
Others that work: csharp, go, typescript, ruby, php, scala, swift, dart, r, markdown, diff, ini, nginx, shell, latex, matlab, scss, less, jsx.
Use a tag even when it isn't in this list — an unknown one just renders unhighlighted, never broken. Or leave the tag off entirely for plain, unhighlighted output, for example:
$ ./gradlew build
Put the image file in THIS folder where your content lives, then reference it by filename:
The text in the square brackets is the DESCRIPTION, and it is the only part of
an image a reader using a screen reader gets. Write what the image shows, the way
you would say it out loud to someone on a call: "The Ports view in IntelliJ,
showing the app on port 8080", not "screenshot". Leave it empty —  —
only when the image is decoration and the text around it already says everything;
the PR check reports empty ones so you can confirm that was on purpose, and it
never fails your pull request over it.
For a smaller, floated, or captioned image, use the img shortcode
(class can be alignleft, alignright or aligncenter). Give it an alt, for
the same reason:
{{< img src="my-image.png" alt="The Ports view in IntelliJ" class="alignright" width="320" caption="An optional caption" >}}
Every image in an article is click-to-enlarge automatically — you don't need to do anything for that, and it works with the keyboard too.
Several images as a responsive grid — one filename per line. A | adds a
caption to an image, and the caption doubles as its description (add a second
| when the two should differ):
{{< gallery >}} one.png two.png | The second one three.png {{< /gallery >}}
cols sets the number of columns (default 3, and a maximum — the grid still
drops to fewer columns on a phone), and caption writes one caption under the
whole gallery:
{{< gallery cols="2" caption="Our setup for the recording" >}} one.png two.png {{< /gallery >}}
Clicking an image enlarges it, so no thumbnails or links are needed.
Pass just the video id:
{{< youtube dQw4w9WgXcQ >}}
Add a title when the article embeds more than one video — it is what a screen
reader announces, and without it every frame on the page is called "YouTube
video":
{{< youtube id="dQw4w9WgXcQ" title="Demo: building the app from scratch" >}}
| Feature | Supported |
|---|---|
| Markdown | Yes |
| Shortcodes | Yes |
Write a diagram as a mermaid code block and it is rendered as a real diagram
in the article — no image to draw, export, or keep up to date, and the source
stays reviewable in the pull request. This is the same syntax GitHub renders in
issues and READMEs, so you can paste a diagram you already have.
graph LR
A[Source] --> B[javac]
B --> C[Bytecode]
C --> D{JIT?}
D -->|Hot| E[Native code]
D -->|Cold| F[Interpreter]
For more examples, see the blog post TODO. You can use the Mermaid live editor to create diagrams.