Custom HTML Markups

By on

.note, .store, and .download

A paragraph block with a thin border line.

Usage

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

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

Example

Download it from GitHub

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

.largetype

Make normal paragraph text large enough.

Usage

[PayPal](donate)
{: .largetype}

Example

PayPal

.browser

A simple browser frame using pure CSS.

Usage

![Image](https://sparanoid.com/logo.png)
{: .browser}

Example

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.

Usage

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

plugin: lightense

Markdown markup:

![Image](https://sparanoid.com/photo.jpg)

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](https://sparanoid.com/logo.png){: .no-lightense}

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

Example

Moonstruck Princess Extended - Red

Image Sizes

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

Small Size

![Image](https://sparanoid.com/logo.png){: .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.

![Image](https://sparanoid.com/logo.png)

Moonstruck Princess Extended - Yellow

Large Size

![Image](https://sparanoid.com/logo.png){: .size-large}

Moonstruck Princess Extended - Green

Aligned Images

![Image](https://sparanoid.com/logo.png){: .size-left}

![Image](https://sparanoid.com/logo.png){: .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.