본문으로 건너뛰기

hexo-tag-gdemo 소개

· 약 2분

소개

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

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

설치

npm install @heowc/hexo-tag-gdemo

사용법

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

1. gdemo_terminal 태그



코드

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

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

2. gdemo_terminal 태그



코드

[command]는 ';'을 기준으로 여러 [command]로 나눠서 표현할 수 있다.

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

3. gdemo_editor 태그



코드

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

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

greet();
{% endgdemo_editor %}

예외

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

.desktop {
height: 250px;
width: 600px;
margin: 0 auto 50px;
}

참고