블로그에 html, css, JavaScript등을 쉽게 본문에 보여주는 방법 : 깃허브

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

블로그에 html코드를 보여줄때
깃허브 사용하기
깃허브 가입하기
깃허브로 코드링크 받기

블로그에 html코드를 보여줄때

여러분은 블로그의 활용팁이나 추천하는 기능을 가진 html코드등을 어떤 방법을 통해서 블로그본문에 나타내실건가요? 티스토리의 경우에는 자체적으로 에디터상에서 코드를 삽입하는 메뉴가 있지만 구글블로그에는 그런 기능은 존재하지않는 에디터를 사용하고 있음으로 알아서 작업해야합니다.

이전에는 제가 Color Scripter라는 사이트를 소개해 드렸는데 본문에 html코드로 삽입은 가능하지만 코드가 너무 길고 넣는 과정이 체계적이지 않아서 단발성으로 복사하여 넣는것이라 관리가 어려웠는데요. 이 방법은 휠씬 간편하고 체계적인 사용성으로 쉽게 블로그에 코드를 넣을 수 있는 방법이라 소개해 드리니 자신에게 맞는 사이트를 이용해보시면 좋겠습니다.

깃허브 사용하기

깃허브란 개발자들이 코드를 저장하고 관리하며, 협업을 통해 소프트웨어 개발을 진행하는 데 필수적인 웹 기반 플랫폼으로 많은 사용자가 소통하고 운영하는 사이트입니다. 개인 프로젝트부터 대규모 오픈소스 프로젝트까지, 전 세계 개발자들이 깃허브를 통해 소통하고 협력하며 더 나은 소프트웨어를 만들어가고 있는 곳으로 내 아이디를 만들고 나만의 공간에서 내가 필요한 코드등을 저장하고 관리도 할 수 있어 활용가치가 높죠. 

여기서 우리는 거창하게 코드를 만들고 개발자들처럼 활동하는것이 아닌 코드를 효율적으로 관리하는 선에서 이 사이트를 이용하기 위해서 가입할것입니다. 먼저 깃허브에 접속하고 가입을 해주세요.

깃허브(git hub) 바로가기

깃허브 가입하기

깃허브 메인페이지의 우측상단에 보시면 Sign up버튼이 있습니다. 클릭해주세요.

이메일, 패스워드, 이름을 차례로 입력하고 가입을 진행합니다.

가입을 마치고 로그인 화면에서 로그인해주세요.

깃허브로 코드링크 받기

이제 본격적으로 내 html, css, javascript등의 코드를 저장하고 링크를 받아서 블로그에 삽입해볼까요? 먼저 로그인후 우측상단의 내 프로필 아이콘을 눌러 나오는 메뉴중 'Your gists'를 눌러 주세요.

저는 이미 여러개를 입력해 놓아서 아래의 캡처이미지와 같이 여러개의 코드가 저장되어 있는것이 목록으로 나타납니다. 여기에 내가 새롭게 저장하고자 하는 코드를 넣어 새로운 문서를 저장할 수 있습니다.

우측 상단에서 프로필아이콘 옆의 +를 눌러 Create new gist를 실행합니다.

코드를 입력하는란과 이름을 입력하는 란에 각각 원하는 코드와 이름을 입력합니다. 이름을 입력할때에는 꼭 이름뒤에 내가 원하는 확장자명을 입력해야 합니다. .html, .css, .js등을 입력해야 합니다. 이는 코드의 텍스트 색상을 자동으로 나타나게 해주는 역할도 함께 합니다.

이렇게 만들어 저장한 코드는 우측 상단을 확인해보면 블로그 본문에 넣을 수 있는 스크립트 코드를 복사할 수 있는 복사코드를 제공해줍니다. 아이콘을 눌러 복사하여 블로그 본문의 html편집창에 붙여넣기 해주세요.

구글블로그의 에디터에서 html보기로 글쓰기창을 변경한 후에 코드를 원하는 곳에 붙여넣기 하면 아래와 같이 본문에 코드가 나타나게 됩니다.

이렇게 깃허브에서도 간단하게 내가 원하는 코드를 저장하고 본문에 넣을 수 있는 코드를 쉽게 복사하여 붙여넣기가 가능합니다. 코드를 내 저장공간에 저장하여 나중에 다시 확인이 가능하고 편집이 가능한점이 가장 큰 장점이라고 할 수 있겠습니다.

이 글의 카테고리 : 추천유틸도구