Honkit에서 이미지와 제목을 가운데에 맞추기

이게 뭐야

Honkit (개발이 끝난 gitbook v1이 포크 된 것)으로 문서를 작성하고 있을 때, 이미지를 꽂았을 때에 초기 설정이라고 왼쪽 정렬된 것을 깨달았다. 외형이 좋지 않기 때문에 중앙 가지런히 하고 싶었지만, 약간 수고했으므로 비망해 메모.

정리하면

book.json과 styles/website.css를 만들고 css 안에 가운데에 맞추고 싶은 class에 text-align : center를 지정한다

자세히

Asciidoc에서 이미지를 표시하고 싶을 때, 그 이전의 행에 타이틀을 기입할 수 있다.

Document.adoc

= 画像サンプル
:imagesdir: img

.寿司寿司寿司
image::sushi.png[width="300"]

(Qiita는 Asciidoc의 신택스 하이라이트 할 수 없다… … 슬픈)

이렇게 쓰면 타이틀(과 스시)이 왼쪽으로 치우친다.



슬프다. 그래서 문서 폴더에 book.json과 website.css를 추가합니다.

폴더 구성

img/
  sushi.png
styles/
  website.css
SUMMARY.adoc
Document.adoc
book.json

book.json은 {}만 쓰면 OK.

book.json

{}

website.css가 중앙 정렬을 위한 본체로, 여기에 설정을 써 준다.

website.css

.title {
    text-align: center;
}
.content{
    text-align: center;
}

사실은 이것만으로 좋다고 생각했지만, images 태그 쪽에도 align center를 써 주지 않으면 안된다.

Document.adoc

= 画像サンプル
:imagesdir: img

.寿司寿司寿司
image::sushi.png[width="300", align="center"]

이렇게 하면 겨우 중앙 정렬할 수 있게 되었다.



스시도 낯선 것처럼 아름답다.

결론

Gitbook을 사용하려고 하면 수수께끼의 호스팅 사이트로 되고 있고, Asciidoc 사용할 수 없게 되어 있어서 정말 곤란하고 있었다. Honkit 정말 감사합니다. 매우 도움이되었습니다.