- Post
This post lives in the future and is dated {{ page.date | date: "%c" }}. When building Jekyll with the --future flag it should appear.
"Welcome to Jekyll! (2025)"
You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site …
a post with image galleries
The images in this post are all zoomable, arranged into different mini-galleries using different libraries.
Lightbox2
PhotoSwipe
Spotlight JS
Venobox
a post with tabs
This is how a post with tabs looks like. Note that the tabs could be used for different purposes, not only for code.
First tabs
To add tabs, use the following syntax:
{% raw %}
{% tabs group-name %}
{% tab group-name tab-name-1 %}
Content 1
{% endtab %}
{% tab group-name tab-name-2 %}
Content 2
{% endtab %}
{% endtabs …a post with typograms
This is an example post with some typograms code.
```typograms
+----+
| |---> My first diagram!
+----+
```
Which generates:
+----+
| |---> My first diagram!
+----+
Another example:
```typograms
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
|| ||
|| Welcome! ||
|| ||
|| ||
|| .----------------. ||
|| | username | ||
|| '----------------' ||
|| .----------------. ||
|| |"*******" | ||
|| '----------------' ||
|| ||
|| .----------------. ||
|| | "Sign-up" | ||
|| '----------------' ||
|| ||
|+----------------------+|
.------------------------.
```
which generates:
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
|| ||
|| Welcome! ||
|| ||
|| ||
|| .----------------. ||
|| | username | ||
|| '----------------' ||
|| .----------------. ||
|| |"*******" | ||
|| '----------------' ||
|| ||
|| .----------------. ||
|| | "Sign-up" | ||
|| '----------------' ||
|| ||
|+----------------------+|
.------------------------.
For more examples, check out the typograms documentation.
a post that can be cited
This is an example post that can be cited. The content of the post ends here, while the citation information is automatically provided below. The only thing needed is for you to set the citation key in the front matter to true.
a post with pseudo code
This is an example post with some pseudo code rendered by pseudocode. The example presented here is the same as the one in the pseudocode.js documentation, with only one simple but important change: everytime you would use $, you should use $$ instead. Also, note that the pseudocode key in the …
a post with code diff
You can display diff code by using the regular markdown syntax:
```diff
diff --git a/sample.js b/sample.js
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")
```
Which generates:
diff --git a/sample.js b/sample.js …a post with advanced image components
This is an example post with advanced image components.
Image Slider
This is a simple image slider. It uses the Swiper library. Check the examples page for more information of what you can achieve with it.
a post with vega lite
This is an example post with some vega lite code.
```vega_lite
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A dot plot showing each movie in the database, and the difference from the average movie rating. The display is sorted by year to visualize everything in sequential order …