feat(post): use kramdown syntax

sparanoid · Jan 18, 2017 · d79f2a2 · d79f2a2
1 parent ab8b2c9
commit d79f2a2
Showing 1 changed file with 24 additions and 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
@@ -12,67 +12,55 @@ 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`
 
 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`
 
 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.