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="http://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

intense.js

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

Usage

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

plugin: intense

Markdown markup:

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

Or simply use HTML:

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

intense.js is activated globally by default, if you want to disable this effect for specific image, you can simply apply .nointense CSS class to your <img>:

<p>
  <img src="http://sparanoid.com/photo.jpg" class="nointense" 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