【ATOM의 조작】 기술중의 HTML을 실시간 미리 보기

요 전날 도입한 ATOM입니다만, 현재 HTML과 Javascript에 대해서 이치로부터 학습중입니다. 그 도중에 「이것 실제의 표시는 어떻게 되는 것일까?」라고 하는 것이 신경이 쓰였습니다.

거기서 실제로 표시되는 부분을 프리뷰하는 기능에 대해서 조사하고 있었습니다만, ATOM은 표준으로 기술중의 코드를 리얼타임에 프리뷰 하는 기능이 탑재되고 있는 것 같다.



이쪽이 ATOM에 표준 탑재되고 있는 Markdown 프리뷰[control]+[shift]+[M]라고 하는 기능입니다. 이것으로 HTML도 미리보기 할 수있는 것 같습니다만, 실제의 표시와는 약간 다르다고 하는 것이므로, HTML 전용의 미리보기 기능을 추가하는 패키지를 도입해 보았습니다.

참고 페이지 이쪽
Atom에서 HTML을 실시간 미리 보기하면서 편집할 수 있는 패키지 atom-html-preview



패키지 검색란에 「html preview」라고 검색하면 나옵니다.
설치 후 HTML 미리보기 화면을 표시하려면 [control] + [shift] + [H].



Markdown 프리뷰의 경우는 ATOM으로 설정한 배경색을 반영한 프리뷰 화면이었습니다만, HTML이라면 디폴트로 화이트가 되는 것 같다. 뭐 CSS를 이용한다면 디폴트 배경색은 관계 없을지도 모릅니다만, 이 이미지의 경우는 개행이 신경이 쓰이네요.

표준의 Markdown 프리뷰에서는 디폴트로 반각 스페이스 2회로 개행 취급이 되는 것 같습니다만, 제 경우에는 그러면 사용하기 어렵다고 생각해 통상 개행 기능을 ON으로 설정했습니다. Qiita 기사와 같이 Markdown 기법으로 써 진행해 나가면 이 설정으로 좋을까라고 생각합니다만, HTML 기술을 프리뷰 하려고 하면 그 개행도 반영되어 버리는 것 같은 것을 알았습니다.

향후는 HTML을 기술할 때는 HTML 프리뷰를 사용해 가고 싶습니다만, 이것 이외에도 재현성에 영향이 나온다면 HTML 전용 프리뷰 쪽이 좋겠네요. 앞으로는 이것을 사용하여 HTML과 Javascript에 대해 학습을 시작할까 생각합니다.