StackEdit로 Blogger 글쓰기

StackEdit로 Blogger 글쓰기

StackEdit로 Blogger 글쓰기 정리

  • Blogger 글작성을 위해 StackEditer의 기능들을 기록하는 페이지이다
  • 210214 업데이트

마크다운 에디터와 문법

  • StackEdit를 설치하면 처음에 뜨는 Welcome to StackEdit! 예제에 마크다운 문법이 나와있다.
  • 오른쪽 메뉴의 MARKDOWN CHEAT SHEET 에도 간단하게 나와있다.
  • Markdown 문법을 몰라도 StackEdit는 WYSIWYG 스타일 에디터로 글 작성이 쉽다.
  • 일반적인 내용이라, 나중에 정리

글을 배포/업데이트 방법

  • 여러 사이트 등록해두고, 동시배포 또는 업데이트 가능하다 (고 한다.)
    • Blogger, Dropbox, GitHub, GitLab, Google Drive, Wordpress, Zendesk 를 지원한다고 한다.
    • 아직은 Blogger 이외 다른 플랫폼은 안써서 모르겠다
  • Blogger에 퍼블리시 시, 초안으로 저장되는 것이 아니라 바로 배포상태가 된다.
    • 태그를 추가하거나 외부에 보이지 안되게 하려면, 수동으로 초안으로 바꿔야 한다
    • Publish to Blogger 와 Blogger Page 두가지가 있는데, 차이를 모르겠다.
    • Template는 Styled Html 로 설정해서 배포하고 있다.
  • 한번 배포한 페이지는 이후 업데이트 (Publish now)로 갱신해야한다.
    • 한번 배포한 글은, StackEdit 글제목 옆이나 글 관리창에 아이콘이 생겨난다.
    • File publication에 배포한 글의 고유ID가 등록되어 관리된다.
    • 여기서 링크를 지우면 더이상 업데이트가 안된다.
    • 만약 업데이트를 누르지 않고 Publish to Blogger를 반복해서 누르면 새글로 여러개가 등록된다.

가로줄 넣는 방법 (점프 브레이크)

  • StackEdit에서는 ---- (-를 4개) 쓰면 가로줄로 바뀜
  • 단순한 가로줄은 아니고, Blogger에서는 점프브레이크라서 기능하는것이 있다고 함
  • (로딩을 끊거나, 스니펫을 끊는 등)

글에 그림을 넣는 방법

  • StackEdit는 마크다운 에디터로 텍스트만 기록하여, 그림은 링크로만 삽입 가능하다.
    • 그림을 블로거 서버에 올리고 링크를 걸거나, 업체들이 제공하는 그림의 링크를 써야 한다.
      - 단, Blogger 외부그림을 링크로 삽입하면, 글 목록에서 (대표그림)에 그림이 뜨지 않는다.
  • 구글 포토나 웹사이트 그림의 URL을 확인하고, 마크다운에 정해진 문법으로 쓰면 된다.
  • 문법은 다음과 같다
    • ![Alt text](/url/to/img.jpg "Title" =wxh)
    • ![Alt text](/url/to/img.jpg "Title" =wx)
  • 세부사항으로
    • Alt text는 대체 텍스트로,
      • 이미지가 로딩 안될때 띄우는 텍스트이다.
      • 빈칸도 가능하지만 이미지가 로딩 안될 때, 엑박도 안뜨게 된다.
    • /url/to/img.jpg 는 이미지 주소로,
      • JPG, PNG, SVG, GIF 까지 확인해봤다.
      • 일반적인 이미지 파일은 모두 가능하겠다.
    • Title은 이미지 설명 텍스트로
      • 이미지 위에 마우스 커서를 올렸을 때 띄우는 텍스트이다
    • wxh는 이미지 크기로
      • width x height 의 뜻이다. 폭과 높이를 지정하면 해당 크기로 표시된다.
      • 비율은 그대로 두고 폭만 지정하려는 경우 [=폭x] 으로 쓰면 되는데 ‘x’ 까지 써야 인식한다.
      • 리사이즈한 이미지를 클릭해서 원본크기로 보이는 방법은 아직 못 찾았다.
  • 기타
    • 구글 포토 사진을 사용하는 방법
      • 구글 포토 주소창에 보이는 URL로는 본인이외는 직접 접근이 불가능하다.
      • 이때는 블로거 편집창에서 임시로 글을 써서 그림을 삽입하고, HTML 로 바꿔서 주소를 복사하여 쓴다.
      • 파일 업로드, 구글포토, 블로거, 이미지 URL 사용 모두 가능하다.
      • URL 경우를 제외하고 이미지가 블로거 서버에 복사되며, 이후 다른글에서도 사용 가능하다.
      • 파일 업로드에 사용한 임시글은 저장하지 않아도 된다.
  • 예제

    • ![i7 2600 vs Ryzen 3200G](https://1.bp.blogspot.com/-주소생략-/211547.png "Example" =200x100)

      • i7 2600 vs Ryzen 3200G

    • ![i7 2600 vs Ryzen 3200G](https://1.bp.blogspot.com/-주소생략-/211547.png "Example" =200x)

      • i7 2600 vs Ryzen 3200G

    • ![i7 2600 vs Ryzen 3200G](깨진링크1 "깨진링크 테스트1" =200x)

      • i7 2600 vs Ryzen 3200G

    • ![](깨진링크2 "깨진링크 테스트2" =200x)

Written with StackEdit.