Markdown for Blogger : Using Pagedown or Marked.

update 0.3.2

<!-- markdown -->
<script src='//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js'></script>
<script>
  (function(){
    // https://github.com/chjj/marked
    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: true,
        smartLists: true,
        smartypants: false
    });
    var scripttags = document.getElementsByTagName('script')
    , i, l
    , s, d
    for (i = 0, l = scripttags.length; i !== l; i++){
      if (scripttags[i].type === 'markdown') {
        s = scripttags[i]
        d = document.createElement('div')
        d.innerHTML = marked(s.innerHTML)
        s.parentNode.insertBefore(d, s)
      }
    }
  })()
 </script>


finaly Write post

write post in `script type='markdown'` tag

<script type="markdown">
Text

    // indent indicates code
    var a = "test"

More text.
![Alt text](/path/to/img.jpg "Optional title")
</script>


CSS

this is additional css sample

.main-inner {
    padding-top: 5px;
}

.date-outer {
    margin: 30px 0px 20px;
    border: 0px solid rgb(170, 177, 35);
}

.main-inner .widget {
    border: 0px solid rgb(170, 177, 35);
    margin: 20px -16px;   /* main-widget 간 좌우 간격 */
    padding: 0px 10px 10px;
}

div#comments.comments h4 {
    font-size : 10px;
    font-weight : normal;
}

#blog-pager {
    padding : 7px;
    font-size: 100%;
    border: 0px solid rgb(170, 177, 35);
}

.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
    margin: 0px -15px 0px;
}

.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
    padding: 0 15px;
}

.main-inner .widget .post-body ul li {
    padding: 0;
    margin-bottom: 0;
}

xxxpre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
h1 {
    font:inherit;
    color:inherit;
    font-size:150%;
    font-weight:bold;
    margin:2em 0 1em 0;
    border-bottom:solid 2px #aaa;
}
h2 {
    font:inherit;
    color:inherit;
    font-size:120%;
    font-weight:bold;
    margin: 1em 0 1em 0;
    text-decoration:underline;
    xxborder-bottom: dotted 2px #ccc;
}
h3 {
    font:inherit;
    color:inherit;
    font-size:110%;
    font-weight:bold;
    margin: 1em 0 0.5em 0;
    xxtext-decoration:underline;
}
h4 {
    font:inherit;
    color:inherit;
    font-size:110%;
    font-weight:bold;
    margin: 0.5em 0 0 0;
}
h5 {
    font:inherit;
    color:inherit;
    font-size:110%;
    font-weight:bold;
    margin: 0.5em 0 0 0;
}
.main-inner .widget .post-body ul,
.main-inner .widget .post-body ol {
    xxmargin: -0.5em 0px;
}
.date-header {
  text-decoration: none;
}

이 블로그의 인기 게시물