구글 Blog + Markdown(StackEdit)

StackEdit

• 구글 블로그는 글에 스타일을 적용하기 힘들다.
• 쉽게 스타일을 적용하기 위해 Markdown 문법 적용을 고려함.
• 방법을 찾던 중 StackEdit(https://stackedit.io)를 발견하고 활용하기로 결정
• StackEdit를 선택한 이유는 작성한 글을 구글 블로그에 쉽게 Publish 할 수 있기 때문

Publish

1. 구글 계정만 있으면 구글 블로그에 쉽게 Publish 할 수 있다.
2. Publish 하는 방법은 간단해서 StackEdit 페이지를 방문 후 조금만 살펴보면 쉽게 연동이 가능하다.
3. StackEdit 연동시 헷갈렸던 점은 아래와 같다.
   • StackEdit는 구글 블로그에 Plug-in 형태로 적용하는 Editor가 아니다. StackEdit는 작성한 글을 구글 블로그에 쉽게 Publish 해주는 기능을 제공하는 사이트이다.
   • 구글 블로그 테마중에서 StackEdit와 호환되지 않는 테마가 있다.

장점

• Markdown 문법 사용이 가능하다.
• 표는 물론이고 다이어그램, 복잡한 수학식도 작성할 수 있다.
• 구글 블로그와 연동하기 쉽다.
• 한 번 연동된 게시물은 계속적으로 Update가 가능하다.
• 구글 블로그 뿐만 아니라 Dropbox, GitHub, WordPress, Zendesk와도 연동이 가능하다.
• 별도 Plug-in을 설치하는게 아니라 사용법이 간단하다.
• 글 라벨 등록도 가능하다.

단점

• 구글 테마중에서 SlackEdit로 Publish 했을 때 충돌나는 테마가 있기 때문에 충돌나지 않는 테마만 사용해야 한다.
• 블로그 전체적으로 “https://stackedit.io/style.css” 가 일괄적으로 적용되므로 구글블로그에서 설정한 값들이 적용되지 않을 수 있다.
• 이미지 올리는 방식에 대한 확인 필요.

커스터마이징

• StackEdit 적용 후 블로그에 적용된 "https://stackedit.io/style.css"로 인해 마음에 들지 않는 부분들 수정함.
• [수정] 본문 font-size : 110% → 1.0em

   .post-body{
      font-size: 1.0em;
      line-height: 1.4;position: relative;
    }
  

• [추가] 위젯의 font-size : 16px → 13px 로 변경

  div#sidebar-right-1 {
    font-size : 13px;
  }
  

• [추가] 본문글의 margin-bottom : 180px → auto

  div.stackedit__html {
    margin-bottom: auto;
  }
  

참고사이트

• Syntax 문법 : https://daringfireball.net/projects/markdown/syntax
• StackEdit 설명문서 : https://stackedit.io/Welcome document.pdf
• Code Syntax Highlighting 문법 : https://help.github.com/articles/creating-and-highlighting-code-blocks/

  Note: GitHub’s fenced code blocks are also supported with Highlight.js syntax highlighting:

Read More