Medium 블로그에서 gist 쉽게 사용하기 (code medium)
Medium 블로그를 운영한 지 1년 반이 지났네요. 그때부터 지금까지 한 가지 아쉬운게 있다면 code snippet을 추가할 때 조금 불편하단 점이 있습니다.
기존에 code snippet 추가방법의 단점을 소개하고, gist를 조금 더 쉽게 사용하는 방법을 공유할까 합니다.
기존 code 추가 방법
1. gist 를 사용한다.
Medium을 블로그로 사용하는 개발자들은 모두 한 번쯤 봤을법한, gist에 코드를 넣고 복사하여 추가하는 방법입니다. 깔끔하지만 이 방법의 단점은 Medium 블로그와 gist.github 페이지를 이동해야 하는 번거로움이 있습니다.
2. Medium 에서 제공하는 code block 사용하기
가장 손쉽게 할 수 있는 방법입니다. 간단한 코드를 넣을때는 저도 활용하지만 긴 코드를 넣을 때는 가독성 측면에서 떨어지는게 사실입니다..
function printName() {
console.log(this.name)
}var name = "seo"
printName(); // seovar obj = {name: "jeong kuk"}
printName.call(obj); // jeong kuk
3. image 첨부하기
이 방법도 예전에 carbon을 사용해봤습니다. https://carbon.now.sh/ 에 접속 한 뒤, 소스를 copy하고 언어와 theme를 설정해 준 뒤 캡쳐해서 사용해 봤습니다. 이 방법의 단점은 읽는 독자들이 Crtl + c 가 안된다는 점입니다. 이미지이기 때문이죠.
Code Medium 소개
최근에 혹시 code snippet을 손쉽게 올릴 수 있는 방법이 없을까 찾아보다가 확장 프로그램인 Code Medium을 알게 되었습니다. Code Medium을 사용하면 gist 페이지가 Medium 에서 열리기 때문에 gist 페이지를 방문할 필요가 없습니다. 무슨말인지 아래에서 설명하겠습니다.
- 우선 크롬 웹 스토어로 이동합니다. (링크)
- code medium을 검색하여 아래와 같은 확장 프로그램을 설치합니다.
3. Medium 블로그에서 글을 쓸 때 항상 왼쪽에 + 표시를 볼 수 있습니다. 이것을 눌러줍니다.
4. 누르면 아래와 같이 맨 오른쪽에 Add a Github Gist 버튼이 추가되어 있습니다. 이 버튼을 클릭합니다.
5. 그러면 아래와 같이 Github에 로그인 하라는 창이 나옵니다. 로그인을 해줍니다.
6. 로그인 후에 Medium 블로그 글을 쓰는 페이지에서 아래와 같이 gist 화면이 나옵니다. 여기서 코드를 붙이고 생성하면 실제 gist에도 코드가 생성되고 바로 Medium 블로그에 임베드 됩니다.
7. 전체 브라우저 화면은 이렇게 되겠네요.
음.. Code Medium을 쓰면 Medium 블로그와 gist 를 왔다갔다 방문할 필요가 없습니다. 상대적으로 편하긴 하지만,, 아직 Medium 블로그에서 Code snippet을 이렇게 쉽게 추가할 수 있다! 라고 누군가에게 언급하진 않을 것 같습니다.
