Create a demo area (html, css, javascript) in the post content.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
LICENSE first commit Sep 21, 2016 update readme Sep 26, 2016
index.js Root `<script>` tag code run in a anonymous function. Dec 6, 2016


Use {% demo %} tag to create a demo area (html, css, javascript) in the post content.


npm install hexo-tag-demo --save



{% demo [title] %}
{% enddemo %}

Live Example:

{% demo hexo-tag-demo %}
An example for hexo-tag-demo.

The `<intro>` tag supports __markdown__.

  <div id="colorbox"></div>
  <button id="demo-button">Click Me</button>

  document.getElementById('demo-button').onclick = function() {
    var randomColor = '#' + Math.random().toString().substr(2,6);
    document.getElementById('colorbox').innerHTML = randomColor;
    document.getElementById('colorbox').style.background = randomColor;

  #colorbox {
    border: 1px solid #ddd;
    height: 150px;
    width: 200px;
    line-height: 150px;
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
  #demo-button {
    padding: 5px 10px;
{% enddemo %}

Output Screenshot:

Example Output Screenshot

New in 0.2.0

<template>, <script>, <style> tag support for-show and for-run attribute.

In some special cases, if you need to show some code different from the running demo code, you can use this two attributes.

Set the for-run will just running in the demo area but not showing in the expansion. Set the for-show attribute will show the code just in the expansion but not running it.


{% demo %}
<template for-run>
  <button onclick="alert('something')">alert</button>

<template for-show>
  <button>know nothing</button>
{% enddemo %}