Test

hexo-tag-gdemo

glorious-demo tag plugin for Hexo (Based on version 0.11.2)

Introduction

This is a Hexo tag plugin which allow you to glorious-demo on your blog posts.

DEMO

Demo Link

Installation

1
npm install @heowc/hexo-tag-gdemo

※ Deprecated npm install hexo-tag-gdemo

Usage

1
2
3
{% gdemo_terminal command [minHeight] [windowTitle] [onCompleteDelay] [promptString] [id] [highlightingLang] %}
content
{% endgdemo_terminal %}

or

1
2
3
{% gdemo_editor [minHeight] [windowTitle] [onCompleteDelay] [id] [highlightingLang] %}
content
{% endgdemo_editor %}

command

Command表示用“;”分隔的一个或多个命令。注意，命令不能包含’，因为hexo会假设参数已经完成，下一个参数将会导致对象没有被呈现。

minHeight

min Height定义编辑器/终端窗口的最小高度。注意，它可能会根据您提供的内容而增长。

windowTitle

window Title将显示为编辑器/终端窗口的标题。你喜欢什么就用什么。

onCompleteDelay

on Complete Delay定义在输入一行命令/代码之后的等待延迟。不影响gdemo terminal 的内容。内容将立即出现在所有命令键入后。

promptString

提示符 String 定义了在键入的命令之前显示的字符或字符序列。你可以使用 ‘>’ 或 'root@local:/$ ’ 或其他任何你想要显示的。

id

id 参数为编辑器/终端的实例设置一个唯一的 id。对于同一个帖子中的多个实例， id 必须是不同的。

highlightingLang

highlightingLang 定义了指定的高亮显示语言。如果未指定，将使用javascript。的支持语言列表 prismjs homepage.

_config.yml

If you do not want to use the CDN, fill in the following:

1
2
3
4
gdemo:
  style_url:
  script_url: 
  prismjs_theme:

FAQ

Please read here if you can not display gdemo well.

hexo-tag-gdemo/issues/

Example

1. When using gdemo_terminal

1
2
3
{% gdemo_terminal 'node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
Hello World!
{% endgdemo_terminal %}

2. When using gdemo_terminal [multiple commands]

  • command can be divided into multiple commands based on ;.
1
2
3
{% gdemo_terminal 'cd /usr/bin;./node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
Hello World!
{% endgdemo_terminal %}

3. When using gdemo_editor

1
2
3
4
5
6
7
{% gdemo_editor '250px' 'bash' '500' 'demo-editor' %}
function greet(){
  console.log("Hello World!");
}

greet();
{% endgdemo_editor %}

See more here.

License

MIT

Thanks