From d79f2a2c3c1f2cb90e0737383cfc63e61831c4bd Mon Sep 17 00:00:00 2001
From: Tunghsiao Liu <t@sparanoid.com>
Date: Wed, 18 Jan 2017 17:30:08 +0800
Subject: [PATCH] feat(post): use kramdown syntax

---
 .../note/2014-06-01-custom-html-markups.md    | 70 +++++++------------
 1 file changed, 24 insertions(+), 46 deletions(-)

diff --git a/_app/_posts/note/2014-06-01-custom-html-markups.md b/_app/_posts/note/2014-06-01-custom-html-markups.md
index 05a5635aa..78d1deb3c 100644
--- a/_app/_posts/note/2014-06-01-custom-html-markups.md
+++ b/_app/_posts/note/2014-06-01-custom-html-markups.md
@@ -12,27 +12,21 @@ A paragraph block with a thin border line.
 
 ### Usage
 
-```html
-<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>
-```
+```markdown
+[Download](download) it from GitHub
+{: .download}
 
-Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.
+Love this plugin? please consider [buying me a cup of coffee](donate).
+{: .store}
+```
 
 ### Example
 
-<p class="download">
-  <a href="https://github.com/sparanoid/sparanoid.com/">Download</a> it from GitHub
-</p>
+[Download](https://github.com/sparanoid/sparanoid.com/) it from GitHub
+{: .download}
 
-<p class="store">
-  Love this plugin? please consider <a href="{{ site.profile.donate }}">buying me a cup of coffee.</a>
-</p>
+Love this plugin? please consider buying me a cup of coffee.
+{: .store}
 
 ## `.largetype`
 
@@ -40,19 +34,15 @@ Make normal paragraph text large enough.
 
 ### Usage
 
-```html
-<p class="largetype">
-  <a href="{{ "{{ site.profile.donate " }}}}">PayPal</a>
-</p>
+```markdown
+[PayPal](donate)
+{: .largetype}
 ```
 
-Please note that you can’t apply CSS classes in Markdown, so you have to use HTML markup.
-
 ### Example
 
-<p class="largetype">
-  <a href="{{ site.profile.donate }}">PayPal</a>
-</p>
+[PayPal](donate)
+{: .largetype}
 
 ## `.browser`
 
@@ -60,19 +50,17 @@ A simple browser frame using pure CSS.
 
 ### Usage
 
-```html
-<p class="browser">
-  <img src="https://sparanoid.com/photo.jpg" alt="Image">
-</p>
+```markdown
+![Image](https://sparanoid.com/logo.png)
+{: .browser}
 ```
 
-Please note that you can't apply CSS classes in Markdown, so you have to use HTML markup.
-
 ### Example
 
-<p class="browser"><img src="{{ site.file }}/delicious.com.png" alt="Delicious Preview" class="no-lightense"></p>
+![Delicious Preview]({{ site.file }}/delicious.com.png){: .no-lightense}
+{: .browser}
 
-## [Lightense Images](https://github.com/sparanoid/lightense-images)
+## [Lightense Images](https://sparanoid.com/work/lightense-images/)
 
 A simple library inspired by [Tim Holman](https://github.com/tholman) to view large images up close using simple mouse interaction, and the full screen.
 
@@ -90,20 +78,10 @@ Markdown markup:
 ![Image](https://sparanoid.com/photo.jpg)
 ```
 
-Or simply use HTML:
-
-```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 image or `<img>`:
 
-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>`:
-
-```html
-<p>
-  <img src="https://sparanoid.com/photo.jpg" class="no-lightense" alt="Image">
-</p>
+```markdown
+![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.