heowc / hexo-tag-gdemo Goto Github PK

View Code? Open in Web Editor NEW

13.0 1.0 2.0 1.33 MB

glorious-demo tag plugin for Hexo

License: MIT License

JavaScript 100.00%

hexo-tag hexo hexo-plugin demo hacktoberfest

hexo-tag-gdemo's Introduction

hexo-tag-gdemo

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

Introduction

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

DEMO

Demo Link

Installation

npm install @heowc/hexo-tag-gdemo

※ Deprecated npm install hexo-tag-gdemo

Usage

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

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

command

command represents one or more commands separated by ';'. Be ware that the commands can not contain ' as hexo would assume that the argument is finished and the next will follow what will lead to the object not beeing rendered.

minHeight

minHeight defines the minimal hight of the editor/terminal window. Beware that it can grow depending on the content you provide.

windowTitle

windowTitle will be displayed as title of the editor/terminal window. Use whatever you like.

onCompleteDelay

onCompleteDelay defines the wait delay, after a line of commands/code was typed. This does not affect the content in gdemo_terminal. Content will instantly appear after all commands are typed.

promptString

The promptString defines, which character or character sequence will be displayed in front of the typed commands. You can use '>' or 'root@local:/$ ' or anything else you like to display.

id

The id parameter sets a unique id for the instance of editor/terminal. The IDs have to be different for multiple instances inside of the same post.

highlightingLang

highlightingLang defines the designated highlighting language. If not specified, javascript will be used. You can find a list of supported languages at the prismjs homepage.

`_config.yml`

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

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`

{% 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 ;.

{% gdemo_terminal 'cd /usr/bin;./node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
Hello World!
{% endgdemo_terminal %}

3. When using `gdemo_editor`

{% gdemo_editor '250px' 'bash' '500' 'demo-editor' %}
function greet(){
  console.log("Hello World!");
}

greet();
{% endgdemo_editor %}

See more here.

License

MIT

Thanks

@rafaelcamargo

hexo-tag-gdemo's People

Contributors

Stargazers

Watchers

Forkers

itpropro sachiotomita

hexo-tag-gdemo's Issues

please update prismjs_theme cdn

Nowadays jsdelivr is not as quickly as it used to be in China
Please change prismjs_theme code to let me use my own cdn

Define own stylesheet

To prevent loading too much from other CDNs and to provide the possibility to customize some css values, it would be great to have the option of specifying an own stylesheet. I think the best place for that would be the _config.xml.

Configuring npm for use with GitHub Packages

See https://help.github.com/en/packages/using-github-packages-with-your-projects-ecosystem/configuring-npm-for-use-with-github-packages

Add test case for results after rendering

add test code

Send multiple commands

I really like this implementation, but for me to use it in my daily posts, I would really like to have a possibility to provide multiple commands.
Currently you can only define one command and one output. Often multiple commands lead to one output and it would be great if that could be integrated into this tag plugin.
Maybe separate the commands by ; or ,?

Restructuring

Overall structure improvement

add babel

https://babeljs.io/

Provide highlighting capabilities

I think it would be great to have the possiblity to highlight code in the given language.
It's described here (Syntax highlight)[https://github.com/glorious-codes/glorious-demo/wiki/Syntax-highlight] how to use prism for that.
Unfortunately, I don't have any know-how in JS, so i am thankful to anyone who would like implement it.

Suggestion - Change parsing style for commands and output

The current parsing style for the content of the terminal can only support concentrated commands within the hexo tag arguments, which decreases readability and functionality as these commands are merely separated by a semicolon inline.

Modifications to the parsing style could avoid these disabilities by adding specific identifiers like $ within the tag itself.

For instance, the current style for tags

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

could be modified into the following

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

and the parser could recognize the $ at the beginning of the commands.

In this way the terminal can support multi-output for different commands. e.g.

{% gdemo_terminal '' '250px' 'bash' '500' '$' 'demo-teriminal' %}
$ node ./demo
Hello World!
$ cat .gitignore
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
{% endgdemo_terminal %}

Further modifications could support multi-line commands by forcing users to explicitly add ; to the end of commands so that the parser could identify the end of commands and beginning of outputs.

These identifiers above could also be able to be modified by users using the _config.yml file using formats similar to the following:

gdemo:
  terminal:
    command_id: '$'
    command_end: ';'

Backwards compatibility can be added by still supporting the current inline command style when included, parsing using the style mentioned above only when the user enters an empty string for the command argument.

Error when no options defined in _config.yml

When none of the _config.yml properties mentioned in the documentation are specified, hexo g or hexo s will throw the following error:

ERROR Plugin load failed: hexo-tag-gdemo
TypeError: Cannot read property 'style_url' of undefined
...

The properties need to be checked for existence as well.

Hexo not rendering since last update

Thanks for all the refactoring and the integration of babel! Since I updated to the 0.10.2, the following error is thrown as soon as another highlighting language than "javascript" is specified:

Unhandled rejection Template render error: (unknown path)
  TypeError: Cannot read property 'rest' of undefined
    at Object._prettifyError (C:\Temp\testblog\node_modules\nunjucks\src\lib.js:36:11)
    at C:\Temp\testblog\node_modules\nunjucks\src\environment.js:567:19
    at Template.root [as rootRenderFunc] (eval at _compile (C:\Temp\testblog\node_modules\nunjucks\src\environment.js:637:18), <anonymous>:24:3)
    at Template.render (C:\Temp\testblog\node_modules\nunjucks\src\environment.js:556:10)
    at Environment.renderString (C:\Temp\testblog\node_modules\nunjucks\src\environment.js:380:17)
    at Promise.fromCallback.cb (C:\Temp\testblog\node_modules\hexo\lib\extend\tag.js:123:48)
    at tryCatcher (C:\Temp\testblog\node_modules\bluebird\js\release\util.js:16:23)
    at Function.Promise.fromNode.Promise.fromCallback (C:\Temp\testblog\node_modules\bluebird\js\release\promise.js:185:30)
    at Tag.render (C:\Temp\testblog\node_modules\hexo\lib\extend\tag.js:123:18)
    at Object.onRenderEnd (C:\Temp\testblog\node_modules\hexo\lib\hexo\post.js:280:20)
    at Promise.then.then.result (C:\Temp\testblog\node_modules\hexo\lib\hexo\render.js:64:19)
    at tryCatcher (C:\Temp\testblog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Temp\testblog\node_modules\bluebird\js\release\promise.js:517:31)
    at Promise._settlePromise (C:\Temp\testblog\node_modules\bluebird\js\release\promise.js:574:18)
    at Promise._settlePromise0 (C:\Temp\testblog\node_modules\bluebird\js\release\promise.js:619:10)
    at Promise._settlePromises (C:\Temp\testblog\node_modules\bluebird\js\release\promise.js:699:18)
    at _drainQueueStep (C:\Temp\testblog\node_modules\bluebird\js\release\async.js:138:12)
    at _drainQueue (C:\Temp\testblog\node_modules\bluebird\js\release\async.js:131:9)
    at Async._drainQueues (C:\Temp\testblog\node_modules\bluebird\js\release\async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Temp\testblog\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:781:20)
    at tryOnImmediate (timers.js:743:5)

I just initiated a new stock hexo blog with hexo init and installed only gdemo to reprouce the issue.

This works:

{% gdemo_terminal 'node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' 'javascript' %}
Test
{% endgdemo_terminal %}

This throws an error:

{% gdemo_terminal 'node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' 'java' %}
Test
{% endgdemo_terminal %}