MEMO
Jekyll-TeXt-Theme을 사용하면서 적용한 부분이 있음
직접 커스터마이징한 부분이 많으므로 기본 마크다운에서는 적용이 안될 수 있으니 추가 설정 필수

Link

• 새 창 열기 : {:target='_blank'}

[link](https://willnfate.github.io){:target='_blank'}

link

Image

markdown

• 테두리 : {:.border}
• 스타일 : {:width='600px' height='300px'}
• 코멘트 : *comment*

![GitHub Pages](/assets/images/blog/GitHubPages/img01.png){:.border width='600px'}  
*출처 : [link](https://willnfate.github.io){:target='_blank'}*

출처 : link

CSS Customizing

img + br + em,
img + em {
  font-size: map-get($base, font-size-sm) !important;
  font-style: italic;
  text-align: center;
  color: $text-color-l;
  border-left: 2px solid lightgray;
  padding: .4rem .3rem 0;
}

custom image (deprecated)

• 직접 제작해서 사용했으나, table에 넣으니 테이블이 깨지는 오류 발생
• 기본 markdown 문법으로 이미지 작성하는 방법으로 변경

html 작성

<!-- _includes/img.html -->
<figure style='width:{{ include.width}};'>
    <img data-action="zoom" src='{{ include.src }}' alt='{{ include.alt }}'
        class='post--img'>
    {%- if include.link != null -%}
    <figcaption>
        <a href='{{include.link}}' target='_blank'>
            {%- if include.description != null -%}
            {{ include.description }}
            {%- else -%}
            {{ include.link }}
            {%- endif -%}
        </a>
    </figcaption>
    {%- else -%}
    <figcaption>{{ include.description }}</figcaption>
    {%- endif -%}
</figure>

markdown 입력

{% include img.html src='/assets/images/blog/github-pages/img-03.png' 
    width='600px' link='https://willnfate.github.io' %}

Pop-up Image

[![Image](/assets/images/blog/GitHubPages/img01.png){:width='300px'}](/assets/images/blog/GitHubPages/img01.png)

Code Block

REF Escaping double curly braces inside a markdown code block in Jekyll

• 코드 블럭에 Curly braces 코드를 입력할 때 코드를 실제로 실행하는 문제 발생
• -> { %- raw -%} … { % endraw %} 사이에 코드를 입력해서 해결

Table

type 1

|test|test|
|test|test|

type 2

|header|header|
|:---:|---|
|body|body|

MathJax

{ } 입력하기

• $$ 와 $ 에 따라 사용법 상이

$\{1,2,3\}$
\(\{1,2,3\}\)

$\\{1,2,3\\}$  
$$
\{1,2,3\}
$$ 

Comment Block

부가 설명

• 명칭의 다른 이름 등의 추가 표기용으로 별도 설정
• 입력 방식

    # comment block
    > 부가 설명
    {:.comment}
  

• CSS 설정

    .comment {
    margin: -1rem 0px 0px !important;
    padding-left: 8px !important;
    }
  

Font Color

• 사용법 내용

    **내용**{:.font-blue}
  

• CSS 설정

    .font-red {
    color: red !important;
    }
    .font-blue {
    color: #006bf3 !important;
    }
  

각주¹

• 각주 : 해당 내용 뒤에 [^숫자] 형식으로 추가
• 각주 설명 : 서식 없이 [^숫자]: 형식으로 입력할 것. 입력 위치는 어디에 입력하든 문서 맨 마지막에 출력됨

각주[^1]
[^1]: 각주 설명은 문서 맨 아래에 이렇게 보여진다

REF
지킬(Jekyll) 포스팅에 이미지 첨부하는 방법 총체적 정리
how-to-style-images-with-markdown
kramdown table