1. 사전 작성 문서
2. 마크다운 테이블 스타일링
- Markdown table 작성시 table 셀 styling 하기
  - 관련 링크
- 위 링크 정보를 참조하여 테이블 스타일링 예시
3. jekyll-spaceship 테스트
4. jekyll-spaceship을 github에 적용하기
- JEKYLL Deploy Action
- 적용방법

1. 사전 작성 문서

2021년 1주차 블로그 에서 위키문서로 빼기로 하고 넘어옴
2020년 50주차 블로그에 적었던 테이블 스타일링 기법도 여기로 모아 정리하기로 했다.

2. 마크다운 테이블 스타일링

이 부분은 jekyll-spaceship과 상관없이 별도로 적용가능한 부분임

Markdown table 작성시 table 셀 styling 하기

위키에서 table 작성하다가 특정 셀을 강조하고 싶을 때가 있다.
inline으로 필요할 때만 하는 방법을 알아보자

위 링크 정보를 참조하여 테이블 스타일링 예시

아래 테이블의 markdown 작성예를 보고 싶으면

현재 문서의 Raw 파일을 참조

테이블 바로 위의 로컬 sytle 태그와 테이블 속성주는 명령어가 핵심

1열	2열	3열
빨간줄	파란열	빨간줄
	파란열
노란줄	노란줄	노란줄
	파란열

3. jekyll-spaceship 테스트

github : https://github.com/jeffreytse/jekyll-spaceship

1. Table Usage

Rowspan and Colsapn

예제

Stage	Direct Products	ATP Yields
Glycolysis	2 ATP
Glycolysis	2 NADH	3–5 ATP
Pyruvagye oxidation	2 NADH	5 ATP
Citric acid cycle	2 ATP
	6 NADH	15 ATP
	2 FADH	3 ATP
30–32 ATP

vimwiki 에서 테이블 자동 포맷팅을 해주기 때문에 주의해서 편집해야 한다.
- 우선 vimwiki 포맷에 따라 편집한다 (모든 delimiter 줄이 맞도록 한다)
- 그다음 jekyll-spaceship 포맷에 따라 공백을 제거한다

MultiLine

줄 마지막의 backslash는 내용이 다음줄과 Join 한다는 표시이다

Easy Multiline
Apple Apple Apple	Banana Banana Banana	Orange Orange Orange
Apple Apple	Banana Banana	Orange Orange
Apple	Banana	Orange

Headerless

원래 위 링크에 있던 체스 보드는 이랬지만…
- 기물이 너무 작아 잘 안보이고 체스판이 너무 길쭉하다.

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x

custom table css 설정으로 확대한 체스보드 테이블을 그릴 수 있다.
- 위에서 소개했던 테이블 스타일링을 활용했다
요즘 넷플릭스 영화로 유명한 퀸즈 갬빗 오프닝 이다. #thequeensgambit

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x

poster

위의 표와 포스터 그림을 가로로 배열하는 방법

표에 오른쪽으로 column을 한개더 만드는 방법은 표가 아래위로 길어지는 경향이 있어 보기 싫음
Kramdown 문법 에서 HTML Blocks 문법을 사용

아래와 같이 구성하면 markdown 문법과 HTML 문법을 동시에 사용하여 문서를 작성할 수 있다.

<style>
.chess-container {display: flex; align-items: center; justify-content: space-around;}
</style>
    
<div markdown="1" class="chess-container">
    
some markdown table
    
some markdown image
    
</div>

위 코드에서 justify-content를 center로 설정하면 체스보드와 그림 사이에 여유가 없이 딱 붙게됨.
위에서 테이블과 포스터의 키를 맞추는 것은 td 태그의 line-height attr을 미세조정하여 맞춤.
- line-height: 1.32em 으로 맞춤
CSS flexbox 문법을 찾아볼 것

Cell Alignment

예제

Fruits \|\| Food
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4 A. Peach B. Orange C. Banana		How’s It?
		Fine Bad
		Fine Bad
		It’s OK!

Cell Markdown

예제
- 아래 예제를 스타일링 하지 않고 그냥 작성하면 그림이 100% 크기로 꽉차게 된다
- img 태그에 대해 height 속성을 정해줬다.
  - 브라우저에 F12로 디버깅모드에서 그림의 원래 크기를 알수 있는데..
  - height을 원래 크기 (552)의 1/4값인 138px로 정해주었다.
- vim에서 간단한 사칙연산을 하려면..
  - step1: insert mode로 진입
  - step2: Ctrl+r 입력
  - step3: =552/4 입력
  - step4: insert mode 시작한 자리에 138이 입력된다

예제

MathJax \|\| Image
Apple Banana Orange	Apple Banana Orange	Apple Banana Orange
Rowspan is 4 A. Peach B. Orange C. Banana		How’s it?
		$I = \int \rho R^{2} dV$
		$I = \int \rho R^{2} dV$
		It’s OK!

주의
- Kramdown 설명에는 Reference Style IAL로 그림에 attribute을 설정할 수 있다고 하는데..
  - kramdown syntax.html #images
    1 2 3 1. ![cell-image] [cell-image]: ~.png {:height="138px"}
  - table 밖에서는 동작하지만 table 내부에서는 동작하지 않음 (아래는 Reference 스타일 적용)
  - 위의 표에서는 Reference Style로 적용하지 않고 별도 style 태그를 사용함.
    - 일단 표안에서의 해결책은 style block으로 설정하는것

Cell Inline Attributes

attribute definitions (ALDs) 를 사용하는 방법

{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}

ALD line 구조
- 왼쪽 brace로 시작, 공백 3개까지 허용
- colon(:) 으로 이어짐, 아이디를 적고 다시 colon 으로 마무리
- 속성 정의가 이어짐 (허용되는 문자는 backslash로 escape된 closing brace 혹은 closing brace를 escape하지 않는 어떤 문자라도 허용)
- 오른쪽 brace로 마침, 줄 마지막까지 공백 허용함
같은 reference 이름을 가진 ALD가 한개 이상이면 한 곳에서 모두 정의된 것처럼 간주된다.

다른 element에 속성을 붙이고자 할 때 inline attribute list (IAL)도 사용할 수 있다

{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="cls1 cls2" -->
{: ref-name title="hallo you"} 
{: ref-name class='.cls3' .cls4} 

Here’s an Inline Attribute Lists example
IALs	< Normal HTML Block >
	Red
	Green
	Blue
	Black

Block Inline Attribute Lists - 이곳에서 IAL에 대해 자세하게 배울 수 있다.

2. MathJax Usage

예제

$ a*b = c^b $

$ 2^{\frac{n-1}{3}} $

$ \int_a^b f(x)\,dx. $

원래 johngrib님 가이드대로 $를 두 개씩 써서 감쌌는데..
jekyll-spaceship을 사용하면서 …
- 두개씩 쓰면 그 줄은 그 수식만 존재하게 되며
- 하나씩만 쓰면 다른 글자와도 어울릴수 있게됨.
- 원래부터 이런 것은 아니었음.
  - 이 문서에서 $를 두 개써도 다른 글자와 어울릴 수 있었음
  - 해당 문서 히스토리를 보면 알겠지만 jekyll-spaceship 적용이후 틀려져서 하나짜리로 변경하게 됨
  - 왜 이렇게 되는지는 아직 알아보지 않음.
$ 하나로 감싼 예제

example 1) 이 수식 $ a*b = c^b $을 다른 문자열과 같이 써 본다.

$ 두 개로 감싼 예제

example 2) 이 수식 $$ a*b = c^b $$을 다른 문자열과 같이 써 본다.

3. PlantUML Usage

#platuml
PlantUML 설명서
plantuml 예제
startuml 예제

4. Mermaid Usage

#mermaid
mermaid-js 문서 홈페이지
mermaid 예제
startmermaid 예제

5. Media Usage

two ways to embed a video/audio in your jekyll blog page

inline-style

![]({media-link})

Reference-style

![][{reference}]
[{reference}]: {media-link}

sample
- 원래 위 영상은 autoplay 속성이 들어가 있었는데 빼버림.

Youtube Usage
Vimeo Usage
DailyMotion Usage
Spotify Usage
SoundCloud Usage
General Video Usage
- 이곳에 있던 usage는 다 잘되는데 비디오가 자동플레이 되어 제거함
General Audio Usage
- Audio는 안되는 듯.. 아직은 필요없어서 왜 안되는지는 확인안해봄.

6. Hybrid HTML with Markdown

script block은 무시되는 듯함 HTML로 렌더링 되지 않음
일단 Usage 예제는 삭제함

7. Markdown Polyfill

7.1 Escape Ordered List

Normal:

List item Apple.
List item Banana.
List item Cafe.

Escaped:

⁣1. List item Apple. ⁣3. List item Banana. ⁣10. List item Cafe.

이건 잘 안되고 있음
<li> tag 로 렌더링 되어야 하는데 그냥 <p> tag로 렌더링 됨

8. Emoji Usage

#emoji
- Complete list of github markdown emoji markup : github에서 사용하는 emoji 목록
- emoji-cheat-sheet : 이모지 치트 시트
I give this plugin two !

I give this plugin two !
emoji size 조절건
- jekyll/jemoji를 바로 사용했을 때는 height, width가 고정으로 20 이었음
- jekyll-spaceship에 포함된 emoji는 문맥에 따라 emoji size가 변경됨
  - 1단계 제목에서는 35x35 size, li 에서 사용하면 16x16으로 변경됨
  - 일단 예전에 20으로 고정되었던 상황보다는 훨씬 나아짐
- max-width: 1em 으로 문맥에 따라 변경되는 가변크기
  - 폰트 사이즈를 재 설정해주면 emoji size를 변경할 수 있음!!
  - stackoverflow에 이 건으로 질문을 올리고 자문자답함…

그외 이모지 관련 참고할 사이트

emojipedia.org
- emoji 백과사전같은 사이트
- platform별 이모지를 비교할 수 있다
- 이모지 이름을 알수 있다 (예: Otter, Pinching hand)

9. Modifying Element Usage

_config.yml에 jekyll-spaceship 옵션을 설정하여 element 설정을 바꿀 수 있는건데.. 아직은 사용할 계획이 없어서 Pass.

4. jekyll-spaceship을 github에 적용하기

로컬 Ruby 환경에서 jekyll-spaceship이 문제없이 적용되었기에 github에 그대로 올려서 잘될줄 알았다면 큰 오산이다.
Jekyll-spaceship Inatallation: github의 Tip 을 잘 읽어보자

Tip: Note that GiHub Pages runs in safe mode and only allows a set of whitelisted plugins. To use the gem in GitHub Pages, you need to build locally or use CI (e.g. travis, github workflow and delply to your gh-pages branch.
- 즉, github whitelist에 없는 플러그인들을 사용하는 jekyll-spaceship이 그냥 순순히 실행되지는 않는다는 얘기.
- 위에서 CI 도구들 ( travis, Github workflow )을 언급했는데 이건 무슨 툴인가?
  - 지속적 통합 : Continuous Integration
  - 단순하게, 자동으로 배포하는 툴이다.
  - Plugins < About GitHub Pages and jekyll < GitHub Pages Docs
    - 아래에는 위 링크에서 맨 마지막 Paragraph 번역
    - GitHub Pages에서는 지원되지 않는 plugins으로 사이트를 만들 수 없다.
    - 지원되지 않는 plugin을 꼭 사용하고 싶다면, 사이트를 로컬머신에서 빌드한 다음, 빌드된 static files들을 GitHub에 push하라.

JEKYLL Deploy Action

A GitHub Action to deploy the jekyll site conveniently for GitHub Pages.

이 Tool은 jekyll-spaceship을 만든 jeffreytse가 만든 도구
위에서 로컬에서 미리 빌드해서 Push하는 것처럼 CI 도구를 이용하면 온라인상에서, 자동으로 빌드하고 Push할 수 있다.
- 즉, 환경만 만들어 놓으면 기존에 포스트 작성하고, git push 하듯이 할 수 있다.
- honggaruy.github.io의 마스터가 기존에 소스코드와 사이트 static file을 모두 포함했다면..
- 이제 마스터는 소스파일만 관리하고 다른 git branch에서 사이트 정적파일을 관리한다고 보면된다
Jekyll Deploy Action을 이용하면 GitHub Action (CI 도구)를 이용한다.
근데 jeffreytse는 자신의 블로그는 travis를 이용한다.

적용방법

JEKYLL Delplay Action Usage 참조

github page repository의 master 브랜치에 github workflow file을 만든다. ( 예. .github/workflows/build-jekyll.yml)
- 위의 Usage example대로 설정하면 push될 때마다 자동으로 빌드하고, 빌드된 static file들이 배포할 브랜치( 예: gh-pages)에 등록된다.
- 이 사항을 적용한 commit
- 로컬 사양과 맞춘다고 runs-on을 windows-latest로 바꾸지 말것. ubuntu-latest에서만 실행됨
Personal Token 사이트에 접속하여 토큰을 만들어야 한다.
- 이건 일종의 인증키 같은 것인가?
- GitHub Action은 GitHub 내부에 속하지 않고 외부에서 접속하는 느낌
Github Repository's Settings에 가서 Secrets tab으로 전환
거기서 GH_TOKEN 이라는 이름으로 토큰을 만들것
마지막으로, Github Repository's Settings로 가서 GitHub Pages section까지 scroll down 하고 gh-pages branch를 GitHub Pages source로 선택하라.

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x

♜	♞	♝	♛	♚	♝	♞	♜	8
♟	♟	♟		♟	♟	♟	♟	7
								6
			♟					5
		♙	♙					4
								3
♙	♙			♙	♙	♙	♙	2
♖	♘	♗	♕	♔	♗	♘	♖	1
a	b	c	d	e	f	g	h	x