새소식

GITHUB

Git-Hub Gist를 이용해서 티스토리에 소스코드 올리기

  • -

1. Gist 란?


티스토리에서 소스코드를 올리기 위해서는 아래와 같이 <>코드블럭을 선택을 해준 후그 안에 원하는 소스코드를 넣어 올리는 방법을 사용했습니다. 대부분 티스토리 이용자는 Syntax Highlighter를 사용하여 코드를 올리곤하는데 가끔가다 코드 복사를 잘못해 올리게 되면 전체 코드가 깨지기도 합니다 .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test.html</title>
</head>
<body>
	<h1># 테스트를 위해 만들어진 .html 확장자를 가진 코드 입니다.</h1>	
</body>
</html>


그래서 요즘 알게된 Gist 사용해서 소스코드 올리는 방법을 알아보도록 하겠습니다. Gist 는 일단 무척 쉽습니다. <>코드블럭을 사용하는 방법도 어렵지는 않지만, Git-Hub를 사용하는 사용자 입장에서 Gist로 코드를 올리면 좋을 것 같습니다. Gist 사용법은 코드입력 후 Gist를 생성하면 자동으로 해당코드의 Embed 주소가 부여되는데, 그 주소를 티스토리의 글쓰기 HTML 모드에서  붙여넣기만 하면 끝납니다.

Gist : https://gist.github.com/

위 링크로 이동하면 다음과 같은 화면을 볼수 있습니다.

위 화면에서 Gist description... 부분은 해당 소스코드의 설명입력부분입니다. 그 밑에 Name this file... 부분은 소스코드의 이름이 되구요. 여기서 좋은점이 소스코드의 확장자만 입력하면 Gist 내부에서 자동으로 해당 확장자에 맞는 코드 하이라이팅을 적용해 줍니다.

 

2. 코드 하이라이팅


예를들면 test.html 라고 파일이름을 작성하면 Gist에서는 .html라는 확장자명을 보고 해당코드를 HTML코드로 인식해 그에 맞는 코드하이라이팅을 적용하게 됩니다.

이상태에서 우측하단의 Create public Gist 버튼을 클릭하시면 해당 코드가 Gist로 변환되어 저장되게 되고, 이제 생성된 Gist의 주소만 가져와 붙여넣기 하시면 됩니다.

붙여넣기할 주소는 생성된 Gist의 위쪽에 보시면 Embed 이라고 표시되는 부분입니다. 우측의 버튼을 클릭하면 클립보드에 자동으로 저장이 되게 됩니다. 붙여넣을곳 가서 Ctrl + V만 누르면 됩니다.

이제 티스토리 글쓰기에 들어와서 본인이 생성한 주소를 HTMl 모드에 붙여넣기 해주시면 됩니다.

 

기본모드를 HTML모드로 바꿔 줍시다

 

 

HTML 원하는 부분에 아까 복사 것을 붙여넣기 해주면

짠!!

이렇게 붙여넣기하고 글을 작성 후에 적용하면 이런 모습의 Gist가 포스트내에 생성이 되게 됩니다. 또한 이렇게 생성된 Gist는 코드 밑의 이름을 클릭하여 해당 Gist로 이동할 수 있는데 버전관리 및 수정이 가능합니다.

 중요한건 Gist는 Gist 서버내에 코드가 저장되기 때문에 자신이 Gist에서 직접 지우지 않는 이상 소스는 계속 남아있어서 어디서든 가져다 쓸 수 있다는것이죠!

Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.