소개

hexo-tag-gdemo는 glorious-demo를 hexo에서 손쉽게 사용할 수 있도록 작성한 태그 플러그인이며, glorious-demo는 터미널이나 에디터에 코드를 타이핑하는 일련의 동작을 시연하는 자바스크립트 라이브러리이다.

Hexo가 뭔지 모르신다면? 클릭

설치

1
npm install hexo-tag-gdemo

사용법

최대한 단순하게 만들기 위해 2가지 타입(gdemo_terminal, gdemo_editor)과 기본적인 옵션만 넣을 수 있도록 구성했다.

1. gdemo_terminal 태그
코드

'250px' 'bash' '500' '$' 'demo-teriminal'는 생략 가능하다.

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

'250px' 'bash' '500' 'demo-editor'는 생략 가능하다.

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

greet();
{% endgdemo_editor %}

예외

테마로 인해 CSS가 깨져서 예외적인 스타일를 추가했다.

1
2
3
4
.editor-line-text {
background-color: #282c34; color: hsla(0,0%,100%,.5);
overflow: hidden;
}

참고