Custom HTML Markups

By on

.note, .store, and .download

A paragraph block with a thin border line.

Usage

<p class="download">
  <a href="https://github.com/sparanoid/sparanoid.com/">Download</a> it from GitHub
</p>

<p class="store">
  Love this plugin? please consider <a href="{{ site.profile.donate }}">buying me a cup of coffee.</a>
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

Example

Download it from GitHub

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

.largetype

Make normal paragraph text large enough.

Usage

<p class="largetype">
  <a href="{{ site.profile.donate }}">PayPal</a>
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

Example

PayPal

.browser

A simple browser frame using pure CSS.

Usage

<p class="browser">
  <img src="https://sparanoid.com/photo.jpg" alt="Image">
</p>

Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.

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)

Or simply use HTML:

<p>
  <img src="https://sparanoid.com/photo.jpg" alt="Image">
</p>

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 <img>:

<p>
  <img src="https://sparanoid.com/photo.jpg" class="no-lightense" alt="Image">
</p>

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

Example

Moonstruck Princess Extended - Red