markdown_preview.less

.markdown-preview {
  @c_border: #666; // border-color

  max-width: 900px;
  margin: 0 auto;
  padding: 25px;
  color: black;
  hr {
    margin: 50px 0;
    background-color: transparent;
    &:after{
      content: "";
      display: block;
      border-top-style: ridge;
    }
    &.pb {
      // <hr class="pb">を入れる事で、
      // プリント時の改ページを指定することができる。
      page-break-after: always;
      &:after {
        display: none;
      }
    }
  }
  h1, h2, h3, h4, h5 {
    font-weight: normal;
    border-color: @c_border;
  }
  h1 {
    font-size: 35px;
    border: none;
    margin: 30px auto;
    text-align: center;
    letter-spacing: 5px
  }
  h2 {
    font-size: 25px;
    letter-spacing: 3px;
    margin: 50px auto 25px;
  }
  h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px
  }
  // 僕の用途ではh4以降は基本的に必要ないので、
  // 設定していません。

  // 見出し以外のタグを字下げする
  // ぱっと思いつく、よく使うタグを指定
  p, table, ul, ol, dl, pre, blockquote {
    margin-left: 25px;
    ul, ol, dl {
      margin-left: 0px;
    }
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 800px;
    th {
      text-align: center;
      background-color: #eee;
      border-color: @c_border;
    }
    tr {
      border-top: #666;
    }
    td {
      border-color: @c_border;
    }
  }
  .margin-clear {
    margin-left: 0;
  }
  // テキストの中央揃え
  .center {
    text-align: center;
    &:extend(.margin-clear);
  }
  // テキストの右寄せ
  .right {
    text-align: right;
    &:extend(.margin-clear);
  }

  // 画像の中央寄せ
  img {
    max-height: 300px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}