인쇄 ready적인 gist를 만드는 소기

zenn으로 마이그레이션 : htps : // 전. v / kume t04 / archi c ぇ s / p 린타 b ぇ 기 st
qiita측의 기사를 지울 예정은 특별히 없습니다만, 갱신하지 않습니다.

조금 성형한 느낌의 문서를 써 pdf나 종이로 하고 싶다.
markdown을 인쇄하는 것과 같은 기사를 찾으면, 할 수 있는 npm 도구다 pandoc이라고 귀찮게.
github의 리도미를 인쇄하는 것처럼, 그 정도의 가벼움으로 좋다.

그런 이유로, gist를 만들어 인쇄하기 위한 소기입니다.

콘텐츠 이외의 부분을 지우기

보통 gist를 만들면 이런 느낌입니다.



헤더나 코멘트란이 방해입니다.

그래서 콘텐츠 이외의 부분을 지웁시다. 재미있는 브라우저의 devtool 콘솔을 열고,

const body = document.querySelector('.Box-body.readme')
document.body.innerText = ""
document.body.appendChild(body)

이것을 돌진합니다.



깔끔하네요.

개행 위치 조정

본격적으로 문서를 써 가고 문득 인쇄 미리보기를 보면 이런 느낌이었습니다.



거기서 자르는 건 좀...

구분을 넣고 싶은 위치를 확인하면 역시 devtool을 열고 개행하고 싶은 위치의 DOM의 style에

page-break-after: always;

또는

page-break-before: always;

를 넣습니다 (줄 바꿈 전후 어느 DOM에 넣을지에 따라 조정하십시오).



좋은 느낌이네요.

마음이 들면 인쇄합시다.

보충

기사 쓰기의 몇 달전까지는, 개행하고 싶은 위치에 markdown상에서

<hr style="page-break-after: always;">

를 넣고 있었습니다만, 언제부터인가 이것으로는 움직이지 않게 되어 있었습니다(style 속성이 지워진다).
인쇄할 때마다 수동으로 노력하지 않으면 안 되었기 때문에 귀찮습니다만, 어차피 컨텐츠 편집할 때마다 조정이 필요하다고 생각하면 수고는 같을지도 모릅니다.

요약

이제 「○○를 pdf로 제출해 주세요」라고 말해도 괜찮네요.