시작

jekyll-spaceship mermaid를 사용하게 되면 어쩌다가 다음과 같이 글자가 짤리는 것을 볼 수 있다.

과정

jekyll-spaceship이 default로 mermaid를 생성하는 방법은 mermaid.ink를 통해 link로 연결하는 것이기 때문에 mermaid.ink github에서 issue를 확인해봤다.


이 issue의 내용을 통해서 애초에 mermaid 자체의 원인임을 확인할 수 있었다.


그래서 mermaid code block에 다음과 같은 code를 추가해주면 된다.

%%{init: {"themeCSS": ".label foreignObject { font-size: 90% }"}}%%

마무리

위 코드를 통해 font 사이즈를 줄여주니 글자가 좀 작아져 짤리지 않는 모습을 확인할 수 있다.