레이블이 markdown인 게시물을 표시합니다. 모든 게시물 표시
레이블이 markdown인 게시물을 표시합니다. 모든 게시물 표시

2017년 12월 5일 화요일

Markdown과 Stackedit

차례

시작하며….

Markdown으로 글을 정리 하는건 다른 문서 편집 문법에 비해 편하다는 것을 앞선에서 이야기 드렸습니다.

그럼 이걸 어떻게 써야 할까요????

이걸 이용해서 Blogger에는 어떻게 올려야 할까요???

그 방법에 대해서 이야기 하도록 하겠습니다.

Stackedit

기본적으로 Blogger에서는 Markdown을 지원 하지 않습니다.

그러니까… 열심히 Markdown으로 입력을 했지만 Blogger에서는 형태를 잡을 때 다시 해야 한다는 거죠.;;;

제가 처음으로 Markdown을 사용해야 하고 싶다고 마음 먹었을 때 가장 먼저 한거는 Markdown을 Blogger에 적용하는 방법을 찾는 것이었어요.

이곳 저곳 돌다가 가장 효과적이고 사용이 편리한 것은 Stackedit 였습니다.

https://stackedit.io/

Viewer로써와 Blogger에 적용하는 방법 모두 최강입니다.

어떤 점이 최강인지 하나씩 볼게요.

도움말

https://stackedit.io/editor# 에 접속을 하게 되면 가장 처음에는 접속 하는 것이라면 “Hello!”라는 타이틀과 함께 사용자를 반겨 주지요.

아래의 그림이 일부의 모습입니다.

이 Hello의 글만 읽더 라도 Markdown을 사용하는 법에 대해 아주 간단하게 알 수 있게 되지요.^^

어제 제가 열심히 적은 내용들이 사실은 모두 필요 없었어요..;;;;

그래도 저를 위한 자료라고 생각해야죠.ㅎ

실시간 변환

위의 그림에서 보던 거 처럼 중간을 중심으로 왼쪽은 편집기이고 오른쪽은 뷰어예요.

사용할 텍스트 편집기가 없을 때는 직접 적으면 원하는 형태가 나오는지 확인을 할 수 있어요.

Import from disk

아시는 분은 아시겠지만 저는 편집기 중에 Vim을 선호합니다.

Vim으로 작성을 한 후에 내용을 복사하고 Stackedit에도 붙여넣기로 글을 전달할 수 있지요.

그런데 파일을 직접 Import를 한다면 현재 작성하는 파일이 아니라 예전에 작성했던 파일들도 쉽게 확인 할 수 있겠죠??

우측의 #을 클릭하면 Import from disk 버튼이 있어요.

아래 그림 처럼요~

클릭 후 원하는 파일을 선택 하거나 Drag를 해 주면 원본은 좌측에, 우측에는 Viewer 형태로 바로 나오게 되죠.

아직까지는 파일에 대한 Refresh가 되는건 아닌거 같아요.

뭐.. 나중에는 되지 않을까요??

그럼 Vim으로 바로 수정 한 후에 Stackedit로 Refresh를 하여 바로 확인이 가능 해질거 같아요.

쉬운 Publish

이 부분이 가장 마음에 드는 것 중에 하나였어요.

Blogger를 하려면 기본 적으로 Blogger에 가서 “글쓰기”를 눌러서 원하는 글을 적고 저장을 하게 되죠.

그런데 Stackedit의 좌측 상단의 # 표시를 누르고 Publish까지 눌러 보세요.

클릭을 하면 Blogger와 업로드 할 수 있는 Web 사이트들이 나와요.

Blogger를 클릭 하시면 입력이 필요한 화면이 나오죠.

원하는 URL이나 수정을 원하실 때는 PostID까지 입력을 하시고 OK를 누르시면 바로 업로드 혹은 업데이트가 되요.

그리고 원하는 Web 사이트에 동일한 내용으로 올릴 수도 있지요~

이거 대박 아닌가요?????

어디에서도 동일한 형태로 올려 주니까요!!!! ^^

하지만… 혹시 아세요??

단순하게 글만 올리면 Blogger에서의 라벨은 어떻게 올려야 할까요????????

매번 업로드를 하고 라벨은 수정을 해야 하는건가요??

만약에 그래야 했다면.. 저는 금방 포기 하고 말았을거예요.ㅠ

Stackedit는 그렇게 하지 않아도 되는 거겠죠?? ㅋㅋ

마치며….

오늘 다 적으려고 했는데….

생각보다 많이 길어 졌네요.

제가 늦게 퇴근해서 글 적는 시간이 적었어요.;;

Blogger에 올릴 때 타이틀과 라벨 부분은 내일 다시 완료 하도록 하겠습니다.

감사합니다.

작성자: 시간: 댓글 없음:
라벨: , , ,

2017년 12월 4일 월요일

Markdown의 기본

차례

시작하며….

한동안 정리를 하면서 단순 Text로 글을 정리 한다는게 매우 불편하다는 생각을 했어요.

나중에 다른 곳에 글을 올린다고 할 때 원본글은 있지만 글자의 크기나 이미지의 링크 등을 일단 txt로는 관리 하기 너무 어렵더라고요.

그러니 만약에 다른 곳에 글을 옮긴다고 하면 또 다시 해당 사이트에 맞게 구조의 편집을 다시 해야 하더라고요.

그런 생각을 하니 갑자기 귀찮다는 생각이 들더군요.

그래서 이것 저것 찾다가 괜찮은 택스트 편집 문법인 Markdown을 찾게 되었네요.

이 편집 문법이 Html 처럼 복잡 하지 않고 제가 사용할 정도까지는 딱!! 적당했어요.

Markdown의 장점

이제 Markdown을 사용한지는 별로 되지 않았지만 그래도 제가 생각하는 장점은 다음과 같아요.

  1. 짧은 명령어
  2. 많은 Viewer
  3. Github 연동

1. 짧은 명령어

우선 기본 문법이 많지 않고 사용하는 방법이 굉장히 쉬워요.

  • Test1
  • Test2
  • Test3

예를 들어 위 처럼 html에서는 list를 주려고 하더라도.

<li> Test1
<li> Test2
<li> Test3

으로 <li>을 반복적으로 적어줘야 하지만.. Markdown은 아래처럼만 적으면 되요.

* Test1
* Test2
* Test3

3글자를 더 입력하지 않는다는게 얼마나 편한 건지 모르겠어요.^^

2. 많은 Viewer

Markdown이라는거 자체가 단순 문서 편집 문법을 가져서 그런지 생각보다 Viewer가 많더라고요.

Chrome 같은 곳에서 확장 기능도 있고요.

그리고…

저는 그냥 Vim으로 보는 것도 나쁘지 않은거 같아요.^^

Markdown Syntax in Vim

위의 이미지는 지금 작성하는 글의 Syntax가 포함된 화면이예요.

편집기는 Vim이고요.

Syntax를 이용하여 Markdown의 문서를 조금은 이쁘게 볼 수 있어서 단순 Text 보다 좋은거 같더라고요.

3. Github 연동

사실 Markdown이라는 용어를 알게 된것도 Github를 하면서 였어요.

하던 일만 하니(저는 임베디드쪽에서 일을 하고 있어요~) 웹쪽이나 어플 쪽은 까막눈이죠.ㅎㅎ

그러다가 Github에 README.md를 작성해야 한다는데 “이게 뭔가요..” 했지요.;;

처음에는 무관심하게 지나쳤는데 최근에 블로그를 하면서 찾다 보니 이게 저한테 맞는다는 생각을 했어요.

그리고 Git도 같이 사용하려고 했는데 Markdown이 Github는 기본 제공이 되더라고요!!

즉, 제가 모든 문서를 Markdown으로 작성을 한다면 특별한 Viewer 없이도 양식대로 볼 수 있는거더라고요.

지금 하고자 하는 것들이 모두 맞아 떨어 지게 된거죠.^^


위의 장점들은 저의 개인적인 장점들이니 다른 분들은 다른 장점 혹은 단점을 가지고 계실수도 있어요~

Markdown의 문법

기본 문법

사실 지금도 고민이예요.

너무나 많은 곳에서 Markdown 문법을 알려주고 있는데..

나도 여기에 적어야 하나…

아니면 링크만 열결을 해야 하나..^^;;

일단 가장 기본적인 Markdown의 문법은 아래 사이트에서 확인을 하시면 될거 같아요~

마크다운의 사용법과 정보

그외 문법

위에 없는 문법 중에 자주 쓸거 처럼 보이는거 몇개만 더 알려 드리면 다음과 같아요.

Code 부분

    ```javascript
        userCustom.onReady = function() {
            /* PlantUML Prepare */
            previewContentsElt = document.getElementById('preview-contents');
            $.getScript('//cdn.rawgit.com/dankogai/js-deflate/master/rawdeflate.js', makeUml);
        };
    ```

위 처럼 입력을 하고 Viewer로 보면 아래 처럼 나와요.

    userCustom.onReady = function() {
        /* PlantUML Prepare */
        previewContentsElt = document.getElementById('preview-contents');
        $.getScript('//cdn.rawgit.com/dankogai/js-deflate/master/rawdeflate.js', makeUml);
    };

신기하지 않나요?? ^^

Table

  |       | 철수   | 영희   |
   ----- | ------ | ------ 
  | 국어  | 100    | 80     |
  | 영어  | 90     | 90     |
  | 수학  | 80     | 70     |

Table도 그릴 수 있어요.

위처럼 작성을 하게 되면 아래 처럼 그림을 그려주죠.

철수 영희
국어 100 80
영어 90 90
수학 80 70

저는 이런게 왜이렇게 신기하고 좋은지 모르겠네요.ㅎㅎ

아.. 그리고 위의 테이블은 Viewer 마다 조금씩 문법이 다를 수 있어요~

마치며….

오늘은 Markdown에 대해 이야기 해 보았어요.

아직 편한건 잘 모르겠지요?? ^^;;;

하지만 슬슬 왜 제가 이걸 사용하게 되었는지 또 설명을 드릴게요.

오늘도 감사합니다.

작성자: 시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)