Skip to main content

hexo-tag-gdemo 소개

· 2 min read

소개​

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;
}

참고​