Github Blog 만들기 #5 - Hydejack 글쓰기 문법 예시

28 Sep 2023 in Development Log / Blog Log on Blog

• 목차추가
• Note 추가
• 큰 텍스트
• 이미지 Caption
• 인용문 강조
• 흐릿한 텍스트
• 테이블 처리
  • 테이블이 길거나 크다면?
  • 테이블이 작은데 맞추고 싶다면?
• 코드 블럭
  • html 파일 작성시 주의
• 수학 블럭
• 마치며

기본 마크다운 문법을 제외하고, Hydejack에서 가지고 있는 고유 문법들을 정리해봤습니다.
포스트를 쓸 때 참조하시면 좋을 것 같습니다.

목차추가

---
layout: post
title: "Github Blog 만들기 #3 - Hydejack 글쓰기 문법 예시" 
image: /assets/img/blog/example-content-ii.jpg
sitemap: false
categories: [devlog,blog]
tags: [blog]
---
* toc
{:toc}

글 최상단에 위와 같이 toc을 붙이면 목차가 생깁니다. 이 글에도 적용된 것 처럼요

## depth2
### depth3
#### depth4
##### depth5
###### depth6

클릭하면 해당 위치로 이동합니다.
궁금해서 Depth를 꽤 많이 늘려봤는데도 잘 작동하네요. 유용한 기능입니다.

Note 추가

특정 문단이나 문구 밑에 사족을 달 때 사용합니다.

이렇게 노트를 쓰면 됩니다.

이렇게 노트를 쓰면 됩니다.
{:.note}

큰 텍스트

강조나 맥락 전환용으로 쓰면 좋을 것 같네요.

이렇게 큰 텍스트를 쓰면 됩니다.

이렇게 큰 텍스트를 쓰면 됩니다.
{:.lead}

이미지 Caption

이미지에 설명을 달아줄 수 있습니다.
특정 이미지 밑에 아래와 같이 작성하면 됩니다.

![6.png](..%2F..%2F..%2Fassets%2Fblog%2F6.png){:.lead width="800" height="100" loading="lazy"}
귀여운 이미지네요.
{:.figcaption}

귀여운 이미지네요.

인용문 강조

인용문을 강조할 때 사용합니다.

> 인용문입니다.
> 일반적인 인용문이에요.



> 이건 하이드잭 테마를 적용시켰습니다.
> 어떤가요?
{:.lead}

인용문입니다. 일반적인 인용문이에요.

이건 하이드잭 테마를 적용시켰습니다. 어떤가요?

흐릿한 텍스트

중요하지 않은 정보를 흐릿하게 처리하고 싶을 때 쓰면 좋겠네요
잡담이 많은 제게 필요한 내용입니다.

이건 일반적인 텍스트입니다.<br>

그리고 저는 흐려지는 아이이죠. 저는 불필요한가요?<br>
{:.faded}

이건 일반적인 텍스트입니다.

그리고 저는 흐려지는 아이이죠. 저는 불필요한가요?

테이블 처리

시각적으로 정리하는게 가장 좋겠죠.
테이블에 대한 문법은 아래와 같습니다.
: 의 위치에 따라 내용 정렬이 달라지네요.

|——–|:——–|:——:|———-:|

| 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |
|--------|:--------|:------:|----------:|
| 기본    | 왼      |   중    |         오 |

기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬
기본	왼	중	오

테이블이 길거나 크다면?

아래와 같이 테이블이 길거나 크다면 Hydejack은 그냥 가로 크기에 맞춰 테이블을 압착시켜 버립니다.
내용을 읽기 힘들겠죠.
그래서 가로 스크롤을 제공합니다.

이건 기본적으로 가로에 맞춰주는 테이블이에요.<br>

| 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 | 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |
|--------|:--------|:------:|----------:|-------|:--------|:------:|----------:|-------|:--------|:------:|----------:|-------|:--------|:------:|----------:|
| 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 |


이건 하단에 스크롤 설정을 넣은 테이블입니다.<br>

| 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 | 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |
|--------|:--------|:------:|----------:|-------|:--------|:------:|----------:|-------|:--------|:------:|----------:|-------|:--------|:------:|----------:|
| 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 | 기본    | 왼      |   중    |         오 |
{:.scroll-table}

이건 기본적으로 가로에 맞춰주는 테이블이에요.

기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬
기본	왼	중	오	기본	왼	중	오	기본	왼	중	오	기본	왼	중	오

이건 하단에 스크롤 설정을 넣은 테이블입니다.

기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬	기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬
기본	왼	중	오	기본	왼	중	오	기본	왼	중	오	기본	왼	중	오

테이블이 작은데 맞추고 싶다면?

테이블이 커도 문제지만 너무 작아도 보기 안좋을 수 있습니다.
그래서 가로가 꽉 차게 양식을 맞춰줄 수 있죠.

이건 일반 테이블 생성입니다.<br>

| 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |
|--------|:--------|:------:|----------:|
| 기본    | 왼      |   중    |         오 |

이건 가로 맞춤 설정을 넣은 모습입니다.<br>

| 기본정렬 | 왼쪽 정렬 | 중간 정렬 | 오른쪽 정렬 |
|--------|:--------|:------:|----------:|
| 기본    | 왼      |   중    |         오 |
{:.stretch-table}
테이블에도 캡션을 넣을 수 있습니다.
{:.figcaption}

이건 일반 테이블 생성입니다.

기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬
기본	왼	중	오

이건 가로 맞춤 설정을 넣은 모습입니다.

기본정렬	왼쪽 정렬	중간 정렬	오른쪽 정렬
기본	왼	중	오

테이블에도 캡션을 넣을 수 있습니다.

테이블의 밑에도 Caption을 넣어 설명해줄 수 있습니다.

코드 블럭

개발자들이 글을 쓸 때 제일 많이 신경쓰는 부분이죠
저도 코드블럭이 좋아서 지금 테마를 고른 경향도 있습니다.
여러가지 방법이 있지만 개인적으로 가장 편한 방법으로 알려드리겠습니다.

#~~~java
#//file: `Test.java` 요 부분은 파일이름 헤더 기능으로 각 언어에 맞게 추석처리를 해야합니다.

#System.out.println("test");
#~~~

//file: `Test.java`

System.out.println("test");

html 파일 작성시 주의

html 파일에 있는 Liquid 템플릿 엔진의 문법은 ~~~ 주석안에 넣어도 코드로 인식하지 못하는 경우가 있다.

  {% if site.menu %}
  {% for node in site.menu %}
  {% assign url = node.url | default: node.href %}
  {% assign count = count | plus: 1 %}

Liquid 템플릿 엔진의 문법

이런아이들은 html 주석 헤더와 푸터에 raw태그 를 넣어주면 그대로 출력된다.
이 글에서 해당 태그를 어떤 식으로든 작성해서 보여줄 수가 없어서 링크로 대체합니다..

직접 글 써보시다보면 이해가 되실겁니다.약간 볼드모트느낌

여기에 raw

  {% if site.menu %}
  {% for node in site.menu %}
  {% assign url = node.url | default: node.href %}
  {% assign count = count | plus: 1 %}

여기에 endraw

수학 블럭

수학공식에 대한 문법 지원도 해줍니다.
자주 쓰지는 않을 것 같지만, 포스트가 너무 아름다워지네요.
알고리즘 DP같은 글 정리할 때 공식 정리정도?

Lorem ipsum $$ f(x) = x^2 $$

Lorem ipsum \(f(x) = x^2\)

$$
\begin{aligned} %!!15
  \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em]
            &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j)            \\[2em]
            &= (x_1, \ldots, x_n)
               \left(\begin{array}{ccc}
                 \phi(e_1, e_1)  & \cdots & \phi(e_1, e_n) \\
                 \vdots          & \ddots & \vdots         \\
                 \phi(e_n, e_1)  & \cdots & \phi(e_n, e_n)
               \end{array}\right)
               \left(\begin{array}{c}
                 y_1    \\
                 \vdots \\
                 y_n
               \end{array}\right)
\end{aligned}
$$

\[\begin{aligned} %!!15 \phi(x,y) &= \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) \\[2em] &= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) \\[2em] &= (x_1, \ldots, x_n) \left(\begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array}\right) \left(\begin{array}{c} y_1 \\ \vdots \\ y_n \end{array}\right) \end{aligned}\]

마치며

더 자세한 내용은 Hydejack 공식 문서를 참고하세요.

편하게 글을 쓰는 방법은 Prose.io 를 사용하시면 됩니다.
그냥 Github 연동하고 외부에서 파일생성, 작성을 도와주는 사이트입니다.
블로그 제작 고생하였습니다~! 즐거운 개발 블로그 생활 되세요.