마크다운(Markdown)으로 플리커 사이트(flickr.com)의 이미지 삽입하기

마크다운(Markdown)은 텍스트만 이용해서 구조적인 글을 쓰도록 도와주는 일종의 문법인데요, 저는 주로 개발 로그를 정리하거나 틈틈이 메모를 할 때 사용하고 있습니다. 물론 요즘은 블로그(kkamagui.tistory.com)에 글을 남길 때도 마크다운을 사용하고 있습니다. ^^;;;

마크다운을 처음 접하게 된 건 위키(Wiki) 때문이었는데요, 위키가 글을 엮기 편하고 문법 자체가 아주 간단해서 개발 로그를 남기는 데 그만이더라구요. 그래서 처음에는 설치형 위키인 도쿠 위키(Doku Wiki)를 썼는데요, 혼자 돌리기에는 왠지 무거운 느낌도 있고해서 위키패드로 갈아탔습니다. 위키패드를 써보니 기능도 만족스럽고 마음에 쏙 들더라구요. 그래서 위키패드로 글을 쓰기 시작하다가 위키 문법에 집착하게 되고, 이게 블로깅까지 이어지면서 결국 텍스트로 글쓰는 행위 자체에 집착하게 됐습니다. ㅠㅠ

마크다운을 즐겨 쓰시는 분들 중에는 저처럼 웹에 있는 위지윅(WYSWYG) 에디터가 불편한 분도 있으실 겁니다. 위지윅 에디터의 오류로 쓴 글이 날라가거나 굵게 한 글씨가 제대로 해제가 안되고 계속 굵게 나온다거나 하는 문제를 몇 번 겪고나니 의욕이 사그라들더라구요. ㅠㅠ 뭐, 마크다운으로 갈아탄 뒤에는 그런 일이 없어졌지만요. ^^)/~ 그래서 직접 글 쓰기 사이트(Writer's Note)도 만들어 쓰고 있습니다(개 밥 먹는 중이에요 ㅎㅎ).

제가 사실 이미지는 왠만하면 잘 안넣는데요, 그래도 가끔 필요한 경우가 있어서 제 티스토리 블로그(kkamagui.tistory.com)에 이미지를 올리고 그 링크를 가져와서 넣고 있습니다. 이미지를 많이 안 쓰다보니 별로 불편한 점을 모르고 있다가 오늘 문득 불편하다는 생각이 들더라구요. 그래서 어떻게 하면 좋을까 생각을 해봤는데, 플리커 같은 사이트에 블로깅용 이미지를 모아두고 링크를 거는 방법이 좋을 것 같더군요.

그런데 왠 걸~!! @0@)/~ 실제로 이미지를 올린 뒤에 링크를 아래처럼 걸어보니 정상적으로 표시되지 않는 겁니다. ㅠㅠ 분명히 플리커 사이트에서는 잘 표시되는데 말이죠. 한참을 고민하다가 저만 이런 문제를 겪는게 아닐 것 같아서 검색을 해봤더니~!! Wannabeman 님도 같은 문제로 문제를 겪으시다가 고생 끝에 찾은 방법을 공유해주셨더군요. 해결책은 markdown과-삽질한-하루에서 보실 수 있는데요, 결론만 말씀드리자면....

사진에서 공유 버튼을 누르면 .jpg로 끝나는 그림 링크가 나오는데요, 이 링크를 마크다운 문법으로 넣어주면 됩니다~!! >ㅁ<)~!!

마크다운으로 이미지를 삽입하는 방법은 사실 링크를 삽입하는 방법과 같은데, 차이점이라면 !를 앞에 붙여주는 정도입니다. 아래처럼 말이죠 ^^;;;

![이미지 대체 텍스트에요](http://farm6.staticflickr.com/5532/12181791906_1fd29764e7_o.jpg)

이미지 대체 텍스트에요

<이미지 출처-yes24.com>

아아... 진작 검색해볼 껄 그랬구요. ㅠㅠ 그래도 해결책을 찾았으니 다행이라는....

그럼 즐거운 하루 되세요 ^^

리눅스에서 gcc를 사용해서 코드를 컴파일하고 있는데, 뜬금없는 에러가 나왔습니다. 경고(Warning)를 에러(Error)로 취급해서 빌드를 멈춘다는 메시지였는데요, 아래와 같습니다.

cc1plus: all warnings being treated as errors

make[1]: *** 끝나지 않은 작업을 기다리고 있습니다....

사실 정확한 해결책은 경고(Warning)가 발생하는 코드를 수정하는 것이지만... 경고가 발행하는 곳이 한 두 군데가 아니라서 경고를 에러로 처리하는 옵션을 끄기로 했습니다. 사실 끄는 방법은 아주 간단한데요, gcc의 컴파일 옵션에 -Wno-error를 추가해주면 됩니다. 아래처럼 말이죠 ^^)/~

root> gcc -o a.elf -Wno-error a.c

Makefile을 이용해서 빌드한다면 CFLAG 옵션에다 추가하면 더 간단히 해결할 수 있습니다.

그럼 좋은 하루 되세요 ^^

DISQUS 소셜 댓글 달기

블로그를 방문하다보면 종빈이형 블로그처럼 댓글창이 표시되는 걸 종종 봤습니다. 페이스북이나 트위터, 구글+ 등등 다양한 서비스로 로그인이 가능하고 댓글도 모아 보여주는 신기한 기능(?) 때문에 눈여겨 보고 있었는데요, 내친김에 저도 한 번 달아보기로 했습니다.

멋진 소셜 댓글 창의 정체는 DISQUS에서 지원하는 위젯인데요, 간단히 회원가입만 하면 웹사이트용부터 시작해서 워드프레스용 코드까지 클릭만으로 생성해줍니다. 저는 아무대나 붙여넣을 수 있는 Universal Code를 선택해서 코드를 만들었는데요, 최종 코드는 아래와 같이 두 가지로 나왔습니다.

첫 번째 코드는 DISQUS 댓글 위젯을 표시해주는 코드입니다. HTML의 Body 내부 중에 표시되길 원하는 곳에 붙여 넣으면 됩니다. 코드는 제가 생성한 코드니 실제로 위젯을 다실 분은 직접 생성한 코드를 붙여넣으세요. ^^;;;

<div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'writersnote'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

그리고 두 번째 코드는 관련된 댓글을 실제로 로딩해주는 부분인데요, 역시 적당한 곳에 붙여넣으시면 됩니다. 저는 HTML의 Body 가장 밑에 붙여넣었어요. ^^;;;;

    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'writersnote'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
    </script>

실제로 로딩되는 예제는 종빈이형 블로그Writer's Note의 아래쪽을 보시면 됩니다. ^^

그럼 즐거운 명절 되세요 ^^)/~

+ Recent posts