티스토리 코드블럭(codepen) 사용하기

티스토리에서 it 블로그로 운영하시는 분들은 코드를 작성하실 일이 자주 있으실 겁니다. 하지만 기본 HTML 형태로 작성하게 되면 가독성이 떨어지고 코드를 읽기 어려워집니다. 그래서 오늘은 codepen이라는 사이트를 이용해서 html, css, js 등을 임베드 시켜서 가독성 좋게 만드는 방법에 대해서 알아보도록 하겠습니다. 물론 티스토리 자체에서도 코드블럭 플러그인도 존재하기 때문에 이것도 소개해 드리도록 하겠습니다.

 

How to use codepen

코드펜(codepen)은 HTML, CSS, JS를 작성해서 실시간으로 결과를 보여주는 사이트입니다. 이것을 활용하면 다양한 사이트에 임베드하여 코드를 실행하는 화면을 띄워 줄 수 있습니다.

 

codepen 에 먼저 가입을 해줍니다.

 

https://codepen.io/

CodePen

 

codepen에 가입을 하셨다면 이제 코드를 입력해 주러 Pen 메뉴로 이동해 줍니다.

기본 대시보드 화면에서 여러 템플릿들을 보고 따라 만드실 수도 있습니다.

 

템플릿을 보시면 코드가 어떻게 작성되어 있는지 샘플을 확인하실 수 있습니다. 약간의 코드 리딩이 가능하신 분들은 이것을 잘 활용할 수도 있겠습니다.

코드에서 우측 하단에 보시면 Embed가 있습니다. 이 버튼을 클릭하시면 임베드 할 수 있는 html 코드가 나오게 됩니다.

 

티스토리 글쓰기에서 '기본모드'라고 적혀 있는 부분을 클릭하시면 HTML 모드로 바꿀 수 있습니다.

 

아까 확인한 임베드 코드를 복사해 줍니다. Copy Code를 클릭해 줍니다. 워드프레스 전용 코드도 있으니 워드프레스를 운영하시는 분들은 참고해 주세요 

 

코드를 붙여넣고 다시 기본모드로 돌아가 보시면 위와 같이 나오게 됩니다. 티스토리는 글쓰기 모드에서는 script 부분은 정상적으로 출력되지 않습니다.

 

미리보기를 클릭해 보시거나 글 작성을 완료 하시면 코드와 코드 실행 결과가 나오는 것을 확인하실 수 있습니다.

 

티스토리 코드 플러그인 Syntax Highlight

티스토리 관리자 페이지로 들어오셔서 왼쪽 메뉴에 플러그인으로 들어가시면 '코드 문법 강조' 라는 메뉴가 있습니다. 이것을 활성화 해주세요

 

티스토리 글쓰기에서 점 세개(...) 버튼을 클릭하시면 '코드블럭' 항목이 있습니다. 이것을 열어서 코드를 작성해 주시면 됩니다.

 

HTML, CSS, Python, C++, C 등 언어를 설정하실 수 있습니다. 그러면 언어에 따라서 템플릿이 적용됩니다.

조금 더 가독성 높은 코드가 출력되는 것을 확인하실 수 있습니다.

 

2022.05.06 - [Coding] - [코딩] VSCode 필수 확장프로그램(Extension) 추천

[코딩] VSCode 필수 확장프로그램(Extension) 추천

2021.05.07 - [Coding] - vscode Github 연동방법 / 깃허브 사용하기 / vscode github 설치하는 방법

vscode Github 연동방법 / 깃허브 사용하기 / vscode github 설치하는 방법