Hexo Tag Plugin Collection
All tag plugins used for kiko.io available on Github
Since day one of this blog I use Tag Plugins, sometimes as NPM packages from other developers, sometimes developed by myself.
The latter have grown significantly over time and I want to share them with you by publishing them in a Github project called hexo-tag-plugins, where you can download and use those you need on extending your own Hexo based blog.
On the Github page you can find all the info on how to use the plugins. In this article I will only briefly introduce them:
- Anchor
- Anchorlist
- Alertbox
- Alternative Blockqoute
- Blockquote Details
- Codepen
- CodeSandbox
- Download Link
- Image Compare
- Image Link
- Image Slide
- Indiepen
- More Info
Anchor
Anchor element as A
- or HR
-Tag as jump target for example from a Anchorlist
.
Usage Example:
1 | {% anchor "my-anchor" HR %} |
Live Output:
1 | <hr id="my-anchor"> |
See https://github.com/kristofzerbe/hexo-tag-plugins#anchor for more details.
Anchorlist
Creates an overview of all anchors in the content with jump links.
Usage Example:
1 | {% anchorlist |
Live Output:
- My First Anchor
- My Second Anchor
See https://github.com/kristofzerbe/hexo-tag-plugins#anchorlist for more details.
Alertbox
Renders a iconized colored box with text for warnings or with some special information. 6 styles are provided: Exclamation, Question, Warning, Info, Success and Note.
This plugin uses a FontAwesome font for the icons and some styles that also need to be included in your Hexo project.
Usage Example:
1 | {% alertbox warning %} |
Live Output:
Something has failed!
Uuh, keep attention!
Everything’s fine
What’s up?
Some important information
Just as note…
See https://github.com/kristofzerbe/hexo-tag-plugins#alertbox for more details.
Alternative Blockquote
An alternative blockquote tag plugin for quotes with citator and reference url.
Usage Example:
1 | {% blockquote_alt "Anonymous" "https://en.wikipedia.org/wiki/Lorem_ipsum" %} |
Live Output:
--- AnonymousLorem ipsum dolor sit amet…
See https://github.com/kristofzerbe/hexo-tag-plugins#alternative-blockquote for more details.
Blockquote Details
Blockquote including summary, citator and reference url, wrapped in a details
tag.
Usage Example:
1 | {% blockquote_details "Lorem ipsum" "Anonymous" "https://en.wikipedia.org/wiki/Lorem_ipsum" %} |
Live Output:
Lorem ipsum
--- AnonymousLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
See https://github.com/kristofzerbe/hexo-tag-plugins#blockquote-details for more details.
Codepen
Embedding a pen from Codepen.
Usage Example:
1 | {% codepen "abjJNYE" "Lorem Ipsum" html 250 %} |
Live Output:
See https://github.com/kristofzerbe/hexo-tag-plugins#codepen for more details.
CodeSandbox
Tag Plugin for embedding a sandbox from CodeSandbox.
Usage Example:
1 | {% codesandbox "cool-shamir-de613" "Lorem Ipsum" 300 %} |
Live Output:
See https://github.com/kristofzerbe/hexo-tag-plugins#codesandbox for more details.
Download Link
Button link for downloading an asset file, with additional caption (“Download <additionalCaption> <assetFile>”).
Usage Example:
1 | {% download_link "example-image_ORIGINAL.jpg" "Photo" %} |
Live Output:
Download Photo example-image_ORIGINAL.jpg
See https://github.com/kristofzerbe/hexo-tag-plugins#download-link for more details.
Image Compare
Comparing two images side-by-side with the aid of the JS library Image Compare Viewer.
Usage Example:
1 | {% image_compare |
Live Output:


See https://github.com/kristofzerbe/hexo-tag-plugins#image-compare for more details.
Image Link
Renders an image including ALT attribute within a link.
Usage Example:
1 | {% image_link "kiko-io-screenshot.png" "http://kiko.io" "Blog kiko.io" %} |
Live Output:

See https://github.com/kristofzerbe/hexo-tag-plugins#image-link for more details.
Image Slide
Shows multiple images within a slider with the aid of the JS library Tiny Slider.
Usage Example:
1 | {% image_slide |
Live Output:
See https://github.com/kristofzerbe/hexo-tag-plugins#image-slide for more details.
Indiepen
Embedding a “local” pen (index.html
, main.js
and styles.css
stored in an asset subfolder) via Indiepen.
Usage Example:
1 | {% indiepen "indiepen-example" 300 html %} |
Live Output:
See https://github.com/kristofzerbe/hexo-tag-plugins#indiepen for more details.
More Info
Renders a list of related, informative links regarding a post.
Usage Example:
1 | {% moreinfo '{ "list": [ |
Live Output:
- Wikipedia: Markdown
- Markdown Guide: Basic Syntax
- Daring Fireball: Markdown: Syntax
See https://github.com/kristofzerbe/hexo-tag-plugins#more-info for more details.
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, which will be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
In case your blog software can't send Webmentions, you can use this form:
Webmentions
No Webmentions yet...
Comments