이번 포스트에서는 Hexo 테마 중 Tranquilpeak, 어떻게 사용하는지에 대해 알아 보려고 합니다.
목차는 다음과 같습니다.

1. Alert를 사용하는 방법!
2. Highlight Text를 사용하는 방법!



Tag

Alert

Alert을 사용하는 방법


Info 알림을 사용하는 방법은 어떻게!?

Success 알림을 사용하는 방법은 어떻게!?

Warning 알림을 사용하는 방법은 어떻게!?

Danger 알림을 사용하는 방법은 어떻게!?

아이콘이 거슬린다구요? 그럼 이렇게 표시는 어떨까요??

Info 알림을 사용하는 방법은 어떻게!?

Success 알림을 사용하는 방법은 어떻게!?

Warning 알림을 사용하는 방법은 어떻게!?

Danger 알림을 사용하는 방법은 어떻게!?

우선 위와 같이 이 테마에서 가능한 md문법에 대해서 알아보도록 하겠습니다!


문법은 다음과 같습니다.

1
2
3
{% alert [classes] %}
content
{% endalert %}
파라미터 이름
info
success
Classes warning
danger
no-icon

위에 보시는 [classes]에 값을 넣고 작성하면 됩니다.
또한 표에서 보이는 5번째줄의 값(no-icon)은 icon을 보여주지 않고 Alert을 쓰는 방법입니다.
아래와 같이 쓰시면 됩니다.

1
2
3
{% alert info no-icon %}
Info 알림의 예시 코드
{% endalert %}

Info 알림 결과 !



Highlight Text

Highlight Text을 사용하는 방법

Highlight Text는 형광펜을 그은 처럼 작성하는 것 입니다.

일단 예시를 보도록 하겠습니다.

1. 첫번째 형광펜은 기본 문법으로
2. 두번째 형광펜은 hexa color 문법으로


문법은 다음과 같습니다.

1
2
3
{% hl_text [(classes | hexa code | rgb color | rgba color)] %} 
content
{% endhl_text %}
파라미터 이름
red
green
blue
purple
orange
Classes yellow
cyan
primary
success
warning
danger

위에 보시는 [(classes | hexa code)]에 값을 넣고 작성하면 됩니다.
또한 hexa code로도 작성할 수 있습니다.
사용 코드 예시는 아래와 같습니다.

1
2
3
4
5
6
<p>
<!-- basic code -->
1. {% hl_text orange %}첫번째 형광펜{% endhl_text %}은 기본 문법으로<br>
<!-- hexa code -->
2. {% hl_text #00FFFF %}두번째 형광펜{% endhl_text %}은 hexa color 문법으로
</p>

1. 첫번째 형광펜은 기본 문법으로
2. 두번째 형광펜은 hexa color 문법으로