Custom HTML Markups

By on

.note, .store, and .download

A paragraph block with a thin border line.


[Download](download) it from GitHub
{: .download}

Love this plugin? please consider [buying me a cup of coffee](donate).
{: .store}


Download it from GitHub

Love this plugin? please consider buying me a cup of coffee.


Make normal paragraph text large enough.


{: .largetype}




A simple browser frame using pure CSS.


{: .browser}


Delicious Preview

Lightense Images

A simple library inspired by Tim Holman to view large images up close using simple mouse interaction, and the full screen.


Add the following setting to your post front-matter field:

plugin: lightense

Markdown markup:


Lightense Images is activated globally by default, if you want to disable this effect for specific image, you can simply apply .no-lightense CSS class to your image or <img>:

![Image]({: .no-lightense}

Please note that if you’re using HTML markup, you should wrap your images into a <p> container.


Moonstruck Princess Extended - Red

Image Sizes

There’re different size helpers for images. They’re available using the following CSS classes:

Small Size

![Image]({: .size-small}

Moonstruck Princess Extended - orange

Medium Size

The medium size is the default size of images, so you don’t need additional CSS classes for it.


Moonstruck Princess Extended - Yellow

Large Size

![Image]({: .size-large}

Moonstruck Princess Extended - Green

Aligned Images

![Image]({: .size-left}

![Image]({: .size-right}

Moonstruck Princess Extended - Blue

Aligned images are smaller images beside the text, you can just apply .size-left or .size-right to your images and nothing special markup required. However, that aligned images will be responded to normal large size for small desktops or mobile devices.

Small Images

Useful for images smaller than container width.

![Image]({: .no-resize}


Small Images (center)