marked.jsで変換後のmarkdownへのcss

markdown.scss

// [Markdown-CSS](https://github.com/simonlc/Markdown-CSS)を元に修正
//colors
$black: black;
$color_mountain_mist_approx: #999;
$color_tundora_approx: #444;
$color_romance_approx: #fefefe;
$color_cobalt_approx: #0645ad;
$color_navy_blue_approx: #0b0080;
$color_blue_ribbon_approx: #06e;
$color_web_orange_approx: #faa700;
$yellow_30: rgba(255, 255, 0, 0.3);
$color_woodsmoke_approx: #111;
$color_storm_dust_approx: #666;
$color_gallery_approx: #eee;
$color_silver_chalice_approx: #aaa;
$pale_canary: #ff9;
$yellow: #ff0;

//fonts
$font_0: Georgia;
$font_1: Palatino;
$font_2: Palatino Linotype;
$font_3: Times;
$font_4: Times New Roman;
$font_5: serif;
$font_6: monospace;

//@extend-elements
//original selectors
//#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6
%extend_1 {
  font-weight: normal;
  color: $color_woodsmoke_approx;
  line-height: 1em;
}

//original selectors
//#preview pre, #preview code, #preview kbd, #preview samp
%extend_2 {
  color: $black;
  font-family: $font_6, $font_6;
  _font-family: 'courier new', monospace;
  font-size: 0.98em;
}

//original selectors
//#preview sub, #preview sup
%extend_3 {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}


#preview {
  html {
    font-size: 100%;
    overflow-y: scroll;
  }
  body {
    color: $color_tundora_approx;
    font-family: $font_0, $font_1, $font_2, $font_3, $font_4, $font_5;
    font-size: 12px;
    line-height: 1.5em;
    padding: 1em;
    margin: auto;
    max-width: 42em;
    background: $color_romance_approx;
  }
  a {
    color: $color_cobalt_approx;
    text-decoration: none;
    &:visited {
      color: $color_navy_blue_approx;
    }
    &:hover {
      color: $color_blue_ribbon_approx;
      outline: 0;
    }
    &:active {
      color: $color_web_orange_approx;
      outline: 0;
    }
    &:focus {
      outline: thin dotted;
    }
  }
  ::-moz-selection {
    background: $yellow_30;
    color: $black;
  }
  ::selection {
    background: $yellow_30;
    color: $black;
  }
  a::-moz-selection {
    background: $yellow_30;
    color: $color_cobalt_approx;
  }
  a::selection {
    background: $yellow_30;
    color: $color_cobalt_approx;
  }
  p {
    margin: 1em 0;
  }
  img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
  }
  h1 {
    @extend %extend_1;
    font-size: 2.5em;
    font-weight: bold;
    padding-bottom: 4px;
    border-bottom: 3px solid lightgray;
  }
  h2 {
    @extend %extend_1;
    font-size: 2em;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 2px solid lightgray;
  }
  h3 {
    @extend %extend_1;
    font-size: 1.5em;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px solid lightgray;
  }
  h4 {
    @extend %extend_1;
    font-weight: bold;
    font-size: 1.2em;
  }
  h5 {
    @extend %extend_1;
    font-weight: bold;
    font-size: 1em;
  }
  h6 {
    @extend %extend_1;
    font-weight: bold;
    font-size: 0.9em;
  }
  blockquote {
    color: $color_storm_dust_approx;
    margin: 0;
    padding-left: 3em;
    border-left: 0.5em $color_gallery_approx solid;
  }
  hr {
    display: block;
    border: 0;
    border-top: 1px solid $color_silver_chalice_approx;
    border-bottom: 1px solid $color_gallery_approx;
    margin: 1em 0;
    padding: 0;
  }
  pre {
    @extend %extend_2;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  code {
    @extend %extend_2;
  }
  kbd {
    @extend %extend_2;
  }
  samp {
    @extend %extend_2;
  }
  b {
    font-weight: bold;
  }
  strong {
    font-weight: bold;
  }
  dfn {
    font-style: italic;
  }
  ins {
    background: $pale_canary;
    color: $black;
    text-decoration: none;
  }
  mark {
    background: $yellow;
    color: $black;
    font-style: italic;
    font-weight: bold;
  }
  sub {
    @extend %extend_3;
    bottom: -0.25em;
  }
  sup {
    @extend %extend_3;
    top: -0.5em;
  }
  ul {
    margin: 1em 0;
    padding: 0 0 0 2em;

    li {
      list-style: disc;
    }
  }
  ol {
    margin: 1em 0;
    padding: 0 0 0 2em;
  }
  li {
    p:last-child {
      margin: 0;
    }
  }
  dd {
    margin: 0 0 0 2em;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  th {
    border: solid 1px gray;
    background-color: lightgray;
    padding: 4px;
  }
  th[align=left] {
    text-align: left;
  }
  th[align=right] {
    text-align: right;
  }
  th[align=center] {
    text-align: center;
  }
  td {
    border: solid 1px gray;
    padding: 4px;
    vertical-align: top;
  }
  td[align=left] {
    text-align: left;
  }
  td[align=right] {
    text-align: right;
  }
  td[align=center] {
    text-align: center;
  }
}
@media only screen and(min-width: 480px) {
  #preview body {
    font-size: 14px;
  }
}
@media only screen and(min-width: 768px) {
  #preview body {
    font-size: 16px;
  }
}
@media print {
  #preview {
    * {
      background: transparent !important;
      color: $black !important;
      filter: none !important;
    }
    body {
      font-size: 12pt;
      max-width: 100%;
    }
    a {
      text-decoration: underline;
      &:visited {
        text-decoration: underline;
      }
    }
    hr {
      height: 1px;
      border: 0;
      border-bottom: 1px solid $black;
    }
    pre {
      border: 1px solid $color_mountain_mist_approx;
      padding-right: 1em;
      page-break-inside: avoid;
    }
    blockquote {
      border: 1px solid $color_mountain_mist_approx;
      padding-right: 1em;
      page-break-inside: avoid;
    }
    tr {
      page-break-inside: avoid;
    }
    img {
      page-break-inside: avoid;
      max-width: 100% !important;
    }
    p {
      orphans: 3;
      widows: 3;
    }
    h2 {
      orphans: 3;
      widows: 3;
      page-break-after: avoid;
    }
    h3 {
      orphans: 3;
      widows: 3;
      page-break-after: avoid;
    }
    a[href]:after {
      content: "(" attr(href) ")";
    }
    abbr[title]:after {
      content: "(" attr(title) ")";
    }
    .ir a:after {
      content: "";
    }
    a[href^="javascript:"]:after {
      content: "";
    }
    a[href^="#"]:after {
      content: "";
    }
  }
  @page {
    :left {
      margin: 15mm 20mm 15mm 10mm;
    }
    :right {
      margin: 15mm 10mm 15mm 20mm;
    }
  }
}