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

The medium size is the default size of images, so you don’t need additional CSS classes 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 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](https://sparanoid.com/logo.png){: .no-resize}

Run?

Small Images (center)

![Image](https://sparanoid.com/logo.png){: .no-resize.center}

Run?