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

Medium size is the default size of images, so you don’t need additional CSS class 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 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.