LoginSignup
4
4

More than 5 years have passed since last update.

atom markdown-preview用のスタイル

Posted at
styles.less

@def-b: #fff;
@def-b-hilight: #ddd;
@def-c: #444;
@def-c-hilight: #1E88E5;
@def-font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック",Osaka,sans-serif;
@def-border: solid 1px #aaa;
@def-blockquote-content: '\201C';

.b-color(@color: @def-b) { background-color: @color; }

.def-font(@em: 1.00em, @color: @def-c) { font-family: @def-font-family; font-size: @em; color: @color; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.under-line { padding-bottom: 5px; border-bottom: @def-border; }
.ver-margin(@margin) { margin: @margin 0; }
.top-left(@top, @left, @position: absolute){ position: @position; top: @top; left: @left}


.def-table-border{ border: none; border-bottom: @def-border; }
.def-blockquote{ padding: 20px 20px 20px 50px; position: relative; border-left: 5px solid @def-b-hilight; }
.def-q-before{ .def-font(3em); .bold; .top-left(5px,10px); color: @def-b-hilight; content: @def-blockquote-content; }

.markdown-preview.markdown-preview {

  .b-color;
  .def-font;

  h1{ .def-font(2.8em); .bold; }
  h2{ .def-font(2.0em); .under-line; }
  h3{ .def-font(1.4em); .bold; }
  h4{ .def-font(1.3em); .bold }
  h5{ .def-font(1.2em); .bold }
  h6{ .def-font(1.1em); .bold }
  a { .def-font(1.0em, @def-c-hilight) }
  li{ .ver-margin(5px) }

  table { .def-font(0.9em); .ver-margin(40px); border-collapse: collapse; }
  th    { .def-font; .b-color(@def-b-hilight); .def-table-border; }
  td    { .def-font; .b-color(#fff); .def-table-border; }
  pre   { .def-font(0.9em, @def-b-hilight); }

  blockquote{ .def-font; .italic; .def-blockquote; }
  blockquote::before{ .def-q-before; }
}
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4