More Shortcode Examples

Darklane includes layout and styling shortcodes for enhanced content control.

This post demonstrates the gallery, space, columns, color, and hr shortcodes.

Gallery Shortcode

The gallery shortcode makes it easy to show multiple images as a slideshow without cluttering your post. Navigate with arrow buttons or keyboard.

Key features:

Takes a list of image URLs (one per line)
Shows one image at a time with prev/next arrow buttons
Keyboard navigation (left/right arrow keys)
Counter showing “X/N” position
Images adapt to their natural dimensions (no forced aspect ratio after your fixes)
Auto-hides arrows if only one image

1/5

A simple gallery demo — use the arrows or keyboard left/right to cycle through images.

Custom Width Gallery

1/5

We can also use a “width” param as an argument to reduce or control the width.

Notice each gallery can be operated independentally

Space Shortcode

The space shortcode can be used to insert blank lines or breaks between elements.

The next two images have the default gap between them

By using the space shortcode we can increase the gap between the next two images.

In the text below we’ll show how markdown text doesn’t respect the addition of extra whitespace. We’ll repeat several text sections: the first will flow all the text together, the next will add whitespace but it will be ignored, and the final one will use the space shortcode.*

This is a line of text. And this is another. Notice the text will flow naturally together.

This is a line of text. And this is another. Notice the text will flow naturally together even though each sentence was on its own line.

This is a line of text. And this is yet another.

By using the space shortcode in between this line is now below the others.

Columns Shortcode

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

note

Columns automatically flows and sizes

In the next example we’ll distribute a bunch of bullet text across three columns. The shortcode does all the work!

feature 1
feature 2
feature 3
feature 4
feature 5
feature 6
feature 7
feature 8
feature 9
feature 10
feature 11
feature 12

Color Shortcode

The color shortcode can be used to give a splash of color within text.

This is a entire block of colored test within an md shortcode.

info
This highlight’s styling should be uneffected even though it’s embedded inside the color shortcode.

HR Shortcode

The default markdown horizontal rule (---) looks like this:

The hr shortcode provides styled dividers for better visual separation between sections.

Without options, it renders a thin solid line:

Same as explicitly using style="line":

The dots style creates a centered ornament:

Dashed line span the full width:

The fade style creates a gradient from the edges:

Available styles

line — solid line (default)
dots — centered three-dot ornament
dashed — dashed line across
fade — gradient fade from edges